diff --git a/.github/workflows/e2ePerformanceTests.yml b/.github/workflows/e2ePerformanceTests.yml index 183993a7bc86..d8e706d467ba 100644 --- a/.github/workflows/e2ePerformanceTests.yml +++ b/.github/workflows/e2ePerformanceTests.yml @@ -46,7 +46,7 @@ jobs: uses: ./.github/actions/javascript/getArtifactInfo with: GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_COMMIT_TOKEN }} - ARTIFACT_NAME: baseline-${{ steps.getMostRecentRelease.outputs.VERSION }}-android-artifact-apk + ARTIFACT_NAME: baseline-${{ steps.getMostRecentRelease.outputs.VERSION }}android-artifact-apk - name: Skip build if there's already an existing artifact for the baseline if: ${{ fromJSON(steps.checkForExistingArtifact.outputs.ARTIFACT_FOUND) }} diff --git a/android/app/build.gradle b/android/app/build.gradle index 183a1783a7e9..56b8a6ffdcb9 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -110,8 +110,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1009004800 - versionName "9.0.48-0" + versionCode 1009004901 + versionName "9.0.49-1" // 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/desktop/package-lock.json b/desktop/package-lock.json index b5619323d38a..75cb080f1349 100644 --- a/desktop/package-lock.json +++ b/desktop/package-lock.json @@ -9,7 +9,7 @@ "dependencies": { "electron-context-menu": "^2.3.0", "electron-log": "^4.4.8", - "electron-updater": "^6.3.7", + "electron-updater": "^6.3.8", "mime-types": "^2.1.35", "node-machine-id": "^1.1.12" }, @@ -59,9 +59,9 @@ } }, "node_modules/builder-util-runtime": { - "version": "9.2.8", - "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.8.tgz", - "integrity": "sha512-zsrY5P0qFy51NoulD0PUpwL/XkO42ndI6QSgK0pMFRE6e/R8hsajGdybMGpdGW00PPCqv7QvbxMOvXr3qkV9ww==", + "version": "9.2.9", + "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.9.tgz", + "integrity": "sha512-DWeHdrRFVvNnVyD4+vMztRpXegOGaQHodsAjyhstTbUNBIjebxM1ahxokQL+T1v8vpW8SY7aJ5is/zILH82lAw==", "license": "MIT", "dependencies": { "debug": "^4.3.4", @@ -156,12 +156,12 @@ "integrity": "sha512-QQ4GvrXO+HkgqqEOYbi+DHL7hj5JM+nHi/j+qrN9zeeXVKy8ZABgbu4CnG+BBqDZ2+tbeq9tUC4DZfIWFU5AZA==" }, "node_modules/electron-updater": { - "version": "6.3.7", - "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.3.7.tgz", - "integrity": "sha512-pCX7f1vAWsje5KVbMak4Xfy+rq/J4pFsfHhmwsPfdiX1cHsjCEJAwTxI6YyE6pb61VS/pWdOACc9ElD7aZDTUg==", + "version": "6.3.8", + "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.3.8.tgz", + "integrity": "sha512-OFsA2vyuOZgsqq4EW6tgW8X8e521ybDmQyIYLqss7HdXev+Ak90YatzpIECOBJXpmro5YDq4yZ2xFsKXqPt1DQ==", "license": "MIT", "dependencies": { - "builder-util-runtime": "9.2.8", + "builder-util-runtime": "9.2.9", "fs-extra": "^10.1.0", "js-yaml": "^4.1.0", "lazy-val": "^1.0.5", @@ -469,9 +469,9 @@ "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==" }, "builder-util-runtime": { - "version": "9.2.8", - "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.8.tgz", - "integrity": "sha512-zsrY5P0qFy51NoulD0PUpwL/XkO42ndI6QSgK0pMFRE6e/R8hsajGdybMGpdGW00PPCqv7QvbxMOvXr3qkV9ww==", + "version": "9.2.9", + "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.9.tgz", + "integrity": "sha512-DWeHdrRFVvNnVyD4+vMztRpXegOGaQHodsAjyhstTbUNBIjebxM1ahxokQL+T1v8vpW8SY7aJ5is/zILH82lAw==", "requires": { "debug": "^4.3.4", "sax": "^1.2.4" @@ -538,11 +538,11 @@ "integrity": "sha512-QQ4GvrXO+HkgqqEOYbi+DHL7hj5JM+nHi/j+qrN9zeeXVKy8ZABgbu4CnG+BBqDZ2+tbeq9tUC4DZfIWFU5AZA==" }, "electron-updater": { - "version": "6.3.7", - "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.3.7.tgz", - "integrity": "sha512-pCX7f1vAWsje5KVbMak4Xfy+rq/J4pFsfHhmwsPfdiX1cHsjCEJAwTxI6YyE6pb61VS/pWdOACc9ElD7aZDTUg==", + "version": "6.3.8", + "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.3.8.tgz", + "integrity": "sha512-OFsA2vyuOZgsqq4EW6tgW8X8e521ybDmQyIYLqss7HdXev+Ak90YatzpIECOBJXpmro5YDq4yZ2xFsKXqPt1DQ==", "requires": { - "builder-util-runtime": "9.2.8", + "builder-util-runtime": "9.2.9", "fs-extra": "^10.1.0", "js-yaml": "^4.1.0", "lazy-val": "^1.0.5", diff --git a/desktop/package.json b/desktop/package.json index 967fda939375..326d6f24f740 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -6,7 +6,7 @@ "dependencies": { "electron-context-menu": "^2.3.0", "electron-log": "^4.4.8", - "electron-updater": "^6.3.7", + "electron-updater": "^6.3.8", "mime-types": "^2.1.35", "node-machine-id": "^1.1.12" }, diff --git a/docs/articles/expensify-classic/bank-accounts-and-payments/bank-accounts/Connect-US-Business-Bank-Account.md b/docs/articles/expensify-classic/bank-accounts-and-payments/bank-accounts/Connect-US-Business-Bank-Account.md index 1ad70117ed5c..49aaa480e2dc 100644 --- a/docs/articles/expensify-classic/bank-accounts-and-payments/bank-accounts/Connect-US-Business-Bank-Account.md +++ b/docs/articles/expensify-classic/bank-accounts-and-payments/bank-accounts/Connect-US-Business-Bank-Account.md @@ -8,7 +8,7 @@ You can choose to connect either a business deposit-only account that only recei | Business deposit-only account | Verified business account | |---------------------------------------------------|------------------------------------------------------| -| ✔ Receive reimbursements for invoices | ✔ Reimburse expenses via direct bank transfer | +| ✔ Receive payments for invoices | ✔ Reimburse expenses via direct bank transfer | | | ✔ Pay bills | | | ✔ Issue Expensify Cards | diff --git a/docs/articles/expensify-classic/bank-accounts-and-payments/payments/Pay-Bills.md b/docs/articles/expensify-classic/bank-accounts-and-payments/payments/Create-and-Pay-Bills.md similarity index 95% rename from docs/articles/expensify-classic/bank-accounts-and-payments/payments/Pay-Bills.md rename to docs/articles/expensify-classic/bank-accounts-and-payments/payments/Create-and-Pay-Bills.md index 465f6742eaea..aff11c059d81 100644 --- a/docs/articles/expensify-classic/bank-accounts-and-payments/payments/Pay-Bills.md +++ b/docs/articles/expensify-classic/bank-accounts-and-payments/payments/Create-and-Pay-Bills.md @@ -1,26 +1,26 @@ --- -title: Pay Bills +title: Create and Pay Bills description: Expensify bill management and payment methods. --- Streamline your operations by receiving and paying vendor or supplier bills directly in Expensify. Vendors can send bills even if they don't have an Expensify account, and you can manage payments seamlessly. -## Receive Bills in Expensify +# Receive Bills in Expensify You can receive bills in three ways: - Directly from Vendors: Provide your Expensify billing email to vendors. - Forwarding Emails: Forward bills received in your email to Expensify. - Manual Upload: For physical bills, create a Bill in Expensify from the Reports page. -## Bill Pay Workflow +# Bill Pay Workflow 1. When a vendor or supplier sends a bill to Expensify, the document is automatically SmartScanned, and a Bill is created. This Bill is managed by the primary domain contact, who can view it on the Reports page within their default group policy. 2. Once the Bill is ready for processing, it follows the established approval workflow. As each person approves it, the Bill appears in the next approver’s Inbox. The final approver will pay the Bill using one of the available payment methods. 3. During this process, the Bill is coded with the appropriate GL codes from your connected accounting software. After completing the approval workflow, the Bill can be exported back to your accounting system. -## Payment Methods +# Payment Methods There are multiple ways to pay Bills in Expensify. Let’s go over each method below. -### ACH bank-to-bank transfer +## ACH bank-to-bank transfer To use this payment method, you must have a [business bank account connected to your Expensify account](https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/bank-accounts/Connect-US-Business-Bank-Account). @@ -32,7 +32,7 @@ To use this payment method, you must have a [business bank account connected to **Fees:** None -### Credit or Debit Card +## Credit or Debit Card This option is available to all US and International customers receiving a bill from a US vendor with a US business bank account. **To pay with a credit or debit card:** @@ -43,13 +43,13 @@ This option is available to all US and International customers receiving a bill **Fees:** 2.9% of the total amount paid. -### Venmo +## Venmo If both you and the vendor must have Venmo connected to Expensify, you can pay the bill by following the steps outlined [here](https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/Third-Party-Payments#setting-up-third-party-payments). **Fees:** Venmo charges a 3% sender’s fee. -### Pay outside of Expensify +## Pay outside of Expensify If you are unable to pay using one of the above methods, you can still mark the Bill as paid. This will update its status to indicate that the payment was made outside Expensify. **To mark a Bill as paid outside of Expensify:** diff --git a/docs/articles/expensify-classic/bank-accounts-and-payments/payments/Pay-an-Invoice.md b/docs/articles/expensify-classic/bank-accounts-and-payments/payments/Pay-an-Invoice.md new file mode 100644 index 000000000000..84fafc949527 --- /dev/null +++ b/docs/articles/expensify-classic/bank-accounts-and-payments/payments/Pay-an-Invoice.md @@ -0,0 +1,65 @@ +--- +title: Pay an Invoice +description: A guide to different methods of paying an invoice +--- + +
+ +There are multiple ways to pay Invoices in Expensify. Let’s go over each method below. + +# How to Pay Invoices + +1. Sign in to your [Expensify web account](www.expensify.com). +2. Click on the Invoice you’d like to pay to see the details. +3. Click on the **Pay** button. +4. Follow the prompts to pay through one of the following methods. + +### ACH bank-to-bank transfer + +To use this payment method, you must have a [business bank account connected to your Expensify account](https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/bank-accounts/Connect-US-Business-Bank-Account). + +**To pay with an ACH bank-to-bank transfer:** +1. Sign in to your [Expensify web account](www.expensify.com). +2. Go to the **Home** or **Reports** page and locate the Invoice that needs to be paid. +3. Click the **Pay** button to be redirected to the Invoice. +4. Choose the ACH option from the drop-down list. + +**Fees:** None + +### Credit or Debit Card +This option is available to all US and International customers receiving an invoice from a US vendor with a US business bank account. + +**To pay with a credit or debit card:** +1. Sign in to your [Expensify web account](www.expensify.com). +2. Click on the Invoice you’d like to pay to see the details. +3. Click the **Pay** button. +4. Enter your credit card or debit card details. + +**Fees:** 2.9% credit card payment fee. + +### Venmo +If both you and the vendor must have Venmo connected to Expensify, you can pay the Invoice by following the steps outlined [here](https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/Third-Party-Payments#setting-up-third-party-payments). + +**Fees:** Venmo and Paypal.me charges may apply. + + +### Pay outside of Expensify +If you are unable to pay using one of the above methods, you can still mark the Invoice as paid. This will update its status to indicate that the payment was made outside Expensify. + +**To mark an Invoice as paid outside of Expensify:** +1. Sign in to your [Expensify web account](www.expensify.com). +2. Click on the Invoice you’d like to pay to see the details. +3. Click the Pay button. +4. Choose **I’ll do it manually**. + +**Fees:** None. + +{% include faq-begin.md %} + +## What’s the difference between an Invoice and an Expense Report in Expensify? +An invoice is an expense submitted to a client or contractor for payment. An expense report is an expense/group of expenses submitted to an employer for reimbursement. + +## What’s the difference between a Bill and an Invoice in Expensify? +A Bill is an amount owed to a payee (usually a vendor or supplier) and is usually created from a vendor invoice. An Invoice is a receivable and indicates an amount owed to you by someone else. + +{% include faq-end.md %} diff --git a/docs/articles/expensify-classic/domains/SAML-SSO.md b/docs/articles/expensify-classic/domains/SAML-SSO.md index e4b27b238e46..a6032afe8d24 100644 --- a/docs/articles/expensify-classic/domains/SAML-SSO.md +++ b/docs/articles/expensify-classic/domains/SAML-SSO.md @@ -2,18 +2,20 @@ title: Managing Single Sign-On (SSO) and User Authentication in Expensify description: Learn how to effectively manage Single Sign-On (SSO) and user authentication in Expensify alongside your preferred SSO provider. Our comprehensive guide covers SSO setup, domain verification, and specific instructions for popular providers like AWS, Okta, and Microsoft Azure. Streamline user access and enhance security with Expensify's SAML-based SSO integration. --- -# Overview -This article provides a comprehensive guide on managing Single Sign-On (SSO) and user authentication in Expensify alongside your preferred SSO provider. Expensify uses SAML to enable and manage SSO between Expensify and your SSO provider. -# How to Use SSO in Expensify -Before setting up Single Sign-On with Expensify you will need to make sure your domain has been verified. Once the domain is verified, you can access the SSO settings by navigating to Settings > Domains > [Domain Name] > SAML. -On this page, you can: +# Using SSO in Expensify +Before setting up Single Sign-On with Expensify you will need to make sure the [domain is verified](https://help.expensify.com/articles/expensify-classic/domains/Claim-And-Verify-A-Domain#step-2-verify-domain-ownership). + +Once the domain is verified, you can access the SSO settings by navigating to Settings > Domains > [Domain Name] > SAML. + +## The Domains page +**On this page, you can:** - Get Expensify's Service Provider MetaData. You will need to give this to your identity provider. - Enter your Identity Provider MetaData. Please contact your SAML SSO provider if you are unsure how to get this. - Choose whether you want to make SAML SSO required for login. If you choose this option, members will only be able to log in to Expensify via SAML SSO. -Instructions for setting up Expensify for specific SSO providers can be found below. If you do not see your provider listed below, please contact them and request instructions. + +**Below are instructions for setting up Expensify for specific SSO providers:** - [Amazon Web Services (AWS SSO)](https://static.global.sso.amazonaws.com/app-202a715cb67cddd9/instructions/index.htm) -- [Bitium](https://support.bitium.com/administration/saml-expensify/) - [Google SAML](https://support.google.com/a/answer/7371682) (for GSuite, not Google SSO) - [Microsoft Azure Active Directory](https://azure.microsoft.com/en-us/documentation/articles/active-directory-saas-expensify-tutorial/) - [Okta](https://saml-doc.okta.com/SAML_Docs/How-to-Configure-SAML-2.0-for-Expensify.html) @@ -22,22 +24,39 @@ Instructions for setting up Expensify for specific SSO providers can be found be - [SAASPASS](https://saaspass.com/saaspass/expensify-two-factor-authentication-2fa-single-sign-on-sso-saml.html) - Microsoft Active Directory Federation Services (see instructions in the FAQ section below) -When SSO is enabled, employees will be prompted to sign in through Single Sign-On when using their company email (private domain email) and also a public email (e.g. gmail.com) linked as a secondary login. +If your provider is not listed, please contact them and request instructions. + +When SSO is enabled, employees will be prompted to sign in through Single Sign-On when using their company email (private domain email) and also a public email (e.g. gmail.com) linked as a [Secondary Login](https://help.expensify.com/articles/expensify-classic/settings/Change-or-add-email-address). + +{% include faq-begin.md %} + +## What should I do if I’m getting an error when trying to set up SSO? +You can double-check your configuration data for errors using samltool.com. If you’re still having issues, you can contact your Account Manager or Concierge for assistance. + +## What is the EntityID for Expensify? +The entityID for Expensify is https://expensify.com. Remember not to copy and paste any extra slashes or spaces. If you've enabled the Multi-Domain support (see below) then your entityID will be https://expensify.com/mydomainname.com. + +## Can you have multiple domains with only one entity ID? +Yes. Please send a message to the Concierge or your account manager, and we will enable the use of the same entity ID with multiple domains. ## How can I update the Microsoft Azure SSO Certificate? -Expensify's SAML configuration doesn't support multiple active certificates. This means that if you create the new certification ahead of time without first removing the old one, the respective IdP will include two unique x509 certificates instead of one and the connection will break. Should you need to access Expensify, switching back to the old certificate will continue to allow access while that certificate is still valid. +Expensify's SAML configuration doesn't support multiple active certificates. This means that if you create the new certification ahead of time without first removing the old one, the respective IDP will include two unique x509 certificates instead of one, and the connection will break. Should you need to access Expensify, switching back to the old certificate will continue to allow access while that certificate is still valid. -To transfer from one Microsoft Azure certificate to another, please follow the below steps: -1. In Azure Directory , create your new certificate. +**To transfer from one Microsoft Azure certificate to another, please follow the below steps:** +1. In Azure Directory, create your new certificate. 2. In Azure Director, remove the old, expiring certificate. -3. In Azure Directory, activate the remaining certificate, and get a new IdP for Expensify from it. -4. In Expensify, replace the previous IdP with the new IdP. -5. Log in via SSO. If login continues to fails, write into Concierge for assistance. +3. In Azure Directory, activate the remaining certificate and get a new IDP for Expensify from it. +4. In Expensify, replace the previous IDP with the new IDP. +5. Log in via SSO. If login continues to fail, write to Concierge for assistance. -## How can I enable deactivating users with the Okta SSO integration? -Companies using Okta can deactivate users in Expensify using the Okta SCIM API. This means that when a user is deactivated in Okta their access to Expensify will expire and they will be logged out of both the web and mobile apps. Deactivating a user through Okta will not close their account in Expensify, if you are offboarding this employee, you will still want to close the account. You will need have a verified domain and SAML fully setup before completing setting up the deactivation feature. +## How can I enable "deactivating users" with the Okta SSO integration? +Companies using Okta can deactivate users in Expensify using the Okta SCIM API: +- When a user is deactivated in Okta, their access to Expensify expires, and they are logged out of both the web and mobile apps. +- Deactivating a user through Okta will not close their account in Expensify +- If you are offboarding this employee, you will still want to close the account. +- A verified domain and a complete SAML setup are required before you can configure the deactivation feature. -To enable deactivating users in Okta, follow these steps: +**To enable deactivating users in Okta, follow these steps:** 1. In Expensify, head to *Settings > Domains > _[Domain Name]_ > SAML* 2. Ensure that the toggle is set to Enabled for *SAML Login* and *Required for login* 3. In Okta, go to *Admin > Applications > Add Application* @@ -49,18 +68,18 @@ To enable deactivating users in Okta, follow these steps: 9. Then, go to *Directory > Profile Editor > Okta user > Profile* 10. Click the information bubble to the right of the *First name* and *Last name* attributes 11. Uncheck *Yes* under *Attribute required* field and press *Save Attribute*. -12. Email concierge@expensify.com providing your domain and request that Okta SCIM be enabled. You will receive a response when this step has been completed. +12. Email concierge@expensify.com, providing your domain, and request that Okta SCIM be enabled. You will receive a response when this step has been completed. 13. In Expensify, go to *Domains > _[Domain Name]_ > SAML > Show Token* and copy the Okta SCIM Token you received. 14. In Okta, go to *Admin > Applications > Expensify > Provisioning > API Integration > Configure API Integration* -15. Select Enable API Integration and paste the Okta SCIM Token in API Token field and then click Save. -15. Go to To App, click Edit Provisioning Users, select Enable Deactivate Users and then Save. (You may also need to set up the Expensify Attribute Mappings if you have not previously in steps 9-11). +15. Select Enable API Integration, paste the Okta SCIM Token in the API Token field, and then click Save. +15. Go to To App, click Edit Provisioning Users, select Enable Deactivate Users, and then Save. (You may also need to set up the Expensify Attribute Mappings if you have not previously in steps 9-11). Successful activation of this function will be indicated by the green Push User Deactivation icon being enabled at the top of the app page. -## How can I set up SAML authentication with Microsoft ADFS? -Before getting started, you will need to have a verified domain and Control plan in order to set up SSO with Microsoft ADFS. +## How do I set up the SAML authentication with Microsoft ADFS? +Before getting started, you will need a verified domain and Control plan to set up SSO with Microsoft ADFS. -To enable SSO with Microsoft ADFS follow these steps: +**To enable SSO with Microsoft ADFS follow these steps:** 1. Open the ADFS management console, and click the *Add Relying Party Trust* link on the right. 2. Check the option to *Import data about the relying party from a file*, then click the *Browse* button. You will input the XML file of Expensify’s metadata which can be found on the Expensify SAML setup page. 3. The metadata file will provide the critical information that ADFS needs to set up the trust. In ADFS, give it a name, and click Next. @@ -69,22 +88,10 @@ To enable SSO with Microsoft ADFS follow these steps: 6. The new trust is now created. Highlight the trust, then click *Edit claim rules* on the right. 7. Click *Add a Rule*. 8. The default option should be *Send LDAP Attributes as Claims*. Click Next. -9. Depending upon how your Active Directory is set up, you may or may not have a useful email address associated with each user, or you may have a policy to use the UPN as the user attribute for authentication. If so, using the UPN user attribute may be appropriate for you. If not, you can use the emailaddress attribute. +9. Depending upon how your Active Directory is set up, you may or may not have a useful email address associated with each user, or you may have a policy to use the UPN as the user attribute for authentication. If so, using the UPN user attribute may be appropriate for you. If not, you can use the email address attribute. 10. Give the rule a name like *Get email address from AD*. Choose Active Directory as the attribute store from the dropdown list. Choose your source user attribute to pass to Expensify that has users’ email address info in it, usually either *E-Mail-Address* or *User-Principal-Name*. Select the outgoing claim type as “E-Mail Address”. Click OK. 11. Add another rule; this time, we want to *Transform an Incoming Claim*. Click Next. 12. Name the rule *Send email address*. The Incoming claim type should be *E-Mail Address*. The outgoing claim type should be *Name ID*, and the outgoing name ID format should be *Email*. Click OK. 13. You should now have two claim rules. -Assuming you’ve also set up Expensify SAML configuration with your metadata, SAML logins on Expensify.com should now work. For reference, ADFS’ default metadata path is: https://yourservicename.yourdomainname.com/FederationMetadata/2007-06/FederationMetadata.xml. - -{% include faq-begin.md %} -## What should I do if I’m getting an error when trying to set up SSO? -You can double check your configuration data for errors using samltool.com. If you’re still having issues, you can reach out to your Account Manager or contact Concierge for assistance. - -## What is the EntityID for Expensify? -The entityID for Expensify is https://expensify.com. Remember not to copy and paste any extra slashes or spaces. If you've enabled the Multi-Domain support (see below) then your entityID will be https://expensify.com/mydomainname.com. - -## Can you have multiple domains with only one entityID? -Yes. Please send a message to Concierge or your account manager and we will enable the ability to use the same entityID with multiple domains. - {% include faq-end.md %} diff --git a/docs/articles/expensify-classic/expenses/Add-Invoices-in-Bulk.md b/docs/articles/expensify-classic/expenses/Add-Invoices-in-Bulk.md new file mode 100644 index 000000000000..6257c1e6d84d --- /dev/null +++ b/docs/articles/expensify-classic/expenses/Add-Invoices-in-Bulk.md @@ -0,0 +1,48 @@ +--- +title: Bulk Upload Invoices +description: How to Bulk Upload Invoices +--- + +Expensify offers importing multiple invoices (bulk import) via CSV to save you from manually creating individual invoices. + +## Uploading Invoices into Expensify + +1. Click the **Reports** tab. +2. Click the **New Report** drop-down. +3. Select **Bulk Import Invoices**. +4. Click the sample CSV link to download your custom CSV template to your browser or computer. +5. Add the invoice details following the formatting rules (see below **CSV formatting guide** section) +6. Click **Upload CSV** + +## CSV formatting guide + +- Send to: recipient's email address (ex: john.smith@companydomain.com) +- Share: email address (ex: julie.clarke@companydomain.com) +- Report Name: this will be the name of the Invoice report +- Merchant: business name of invoice sender +- Amount: use the number format in this column. Negative amounts cannot be invoiced. +- Date: YYYY-MM-DD formatting +- Due Date: YYYY-MM-DD formatting + +## After the Invoices are uploaded + +- After you click **Upload**, the invoices will automatically be created and viewable on the **Reports** page. +- The **Send To** contact will get an email notifying them of the invoice you sent. +- You can manually edit the invoice details. +- You can manually upload a PDF of the invoice to the report. + +{% include faq-begin.md %} + +## Are there any fees associated with Invoices in Expensify? +No, Invoices are part of the [Control Plan](https://help.expensify.com/articles/expensify-classic/expensify-billing/Change-Plan-Or-Subscription#change-group-plan). + +## Can Invoices be revised once they are sent? +If you sent an invoice by mistake, you can click **Undo Send** on the invoice to revoke it. If you’d like to add more details to a sent invoice, you can add those as a [Report comment](https://help.expensify.com/articles/expensify-classic/reports/Add-comments-and-attachments-to-a-report) for everyone to view. + +## How do I communicate with the payor +You can communicate with the payor through [Report comments](https://help.expensify.com/articles/expensify-classic/reports/Add-comments-and-attachments-to-a-report). + +## What’s the difference between an Invoice and an Expense Report in Expensify? +An invoice is an expense submitted to a client or contractor for payment. An expense report is an expense or group of expenses submitted to an employer for reimbursement. + +{% include faq-end.md %} diff --git a/docs/articles/expensify-classic/expenses/Send-and-Receive-Payment-for-Invoices.md b/docs/articles/expensify-classic/expenses/Send-and-Receive-Payment-for-Invoices.md new file mode 100644 index 000000000000..c2ebb64b0af6 --- /dev/null +++ b/docs/articles/expensify-classic/expenses/Send-and-Receive-Payment-for-Invoices.md @@ -0,0 +1,39 @@ +--- +title: Send and Receive Payment for Invoices +description: How to Send and Receive Payments for Invoices +--- + +Simplify your back office by sending invoices to vendors and suppliers in Expensify. +Invoices can be sent to anyone with or without an Expensify account and paid directly to your business bank account through Expensify. + +## How to send an invoice in Expensify + +1. Sign in to your [Expensify web account](www.expensify.com) +2. Customize your company invoices following the steps in this [help article](https://help.expensify.com/articles/expensify-classic/workspaces/Set-Up-Invoicing). (Optional) +3. From the **Reports** page, click the drop-down and select **Invoice**. +4. Upload a PDF/image of the invoice. +5. Add applicable tags and categories based on your workspace settings. +6. Click **Send**. + +## How to Receive an Invoice Payment in Expensify + +1. To use Expensify payments, you must have a [business bank account connected to your Expensify account](https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/bank-accounts/Connect-US-Business-Bank-Account). +2. Ensure the payment details are on the invoice sent to the payor. +3. The payor will receive a notification of the submitted invoice. +4. They will have the option to pay the invoice through Expensify. + +{% include faq-begin.md %} + +## Are there any fees associated with Invoices in Expensify? +No, Invoices are part of the [Control Plan](https://help.expensify.com/articles/expensify-classic/expensify-billing/Change-Plan-Or-Subscription#change-group-plan). + +## Can Invoices be revised once they are sent? +If you sent an invoice by mistake, you can click **Undo Send** on the invoice to revoke it. If you’d like to add more details to a sent invoice, you can add those as a [Report comment](https://help.expensify.com/articles/expensify-classic/reports/Add-comments-and-attachments-to-a-report) for everyone to view. + +## How do I communicate with the payor +You can communicate with the payor through [Report comments](https://help.expensify.com/articles/expensify-classic/reports/Add-comments-and-attachments-to-a-report). + +## What’s the difference between an Invoice and an Expense Report in Expensify? +An invoice is an expense submitted to a client or contractor for payment. An expense report is an expense or group of expenses submitted to an employer for reimbursement. + +{% include faq-end.md %} diff --git a/docs/articles/expensify-classic/expenses/Trips.md b/docs/articles/expensify-classic/expenses/Trips.md index 04f95c96eb44..1c84cd9189f7 100644 --- a/docs/articles/expensify-classic/expenses/Trips.md +++ b/docs/articles/expensify-classic/expenses/Trips.md @@ -2,38 +2,35 @@ title: Trips description: Automate getting paid back for your travel through Expensify's Trips feature. --- -# Overview -Discover how Expensify streamlines your travel expense management when it comes to trips. With the automatic classification of trip receipts and real-time notifications for travel changes, you can effortlessly stay organized and informed on all your trips. - -When a travel receipt/itinerary is uploaded into Expensify and SmartScanned, the Trips section of the mobile app will automatically populate your trip information.. If your flight has any cancellations, unexpected changes, or delays, we will make sure you know about it. We will notify you of the change as soon as it happens via the mobile app. +When a travel receipt or itinerary is uploaded to Expensify via SmartScan, the Trips section of the mobile app automatically populates your trip information. If your flight has any cancellations, unexpected changes, or delays, we will notify you of them as soon as they occur via the mobile app. For the receipt to be processed as a Trip, it must include the total amount of the expense, date, and merchant name. If your company is using a travel integration from the list shown below, you can automate this process entirely: - [TravelPerk](https://help.expensify.com/articles/expensify-classic/integrations/travel-integrations/TravelPerk) - [Egencia](https://help.expensify.com/articles/expensify-classic/integrations/travel-integrations/Egencia) -- [Navan](https://help.expensify.com/articles/expensify-classic/integrations/travel-integrations/Trip-Actions) +- [Navan](https://help.expensify.com/articles/expensify-classic/connections/Navan) -# How to add a Trip to your account +# Add a Trip to your account -Trip receipts are typically sent via email, and will include multiple pages. With that in mind, we recommend emailing receipts directly to Expensify for ease. +Trip receipts are typically sent via email and will include multiple pages. For ease, we recommend emailing receipts directly to Expensify. -To email a flight or hotel receipt, you’ll forward the receipt from your Expensify-associated email address to receipts@expensify.com. +To email a flight or hotel receipt, simply forward the receipt from your Expensify-associated email address to receipts@expensify.com. -# How to access your Trip information +# Access your Trip information To view details about your past or upcoming trips, follow these steps within the Expensify mobile app: 1. Open the Expensify mobile app -2. Navigate to the "Menu" option (top left ≡ icon) +2. Navigate to the **Menu** option (top left ≡ icon) 3. Select **Trips** {% include faq-begin.md %} ## How do I capture Trip receipts sent to my personal email address? -If you received your receipt in an email that is not associated with your Expensify account, you can add this email as a [secondary login](https://help.expensify.com/articles/expensify-classic/account-settings/Account-Details#how-to-add-a-secondary-login) to directly forward the receipt into your account. +If you received your receipt in an email that is not associated with your Expensify account, you can add this email as a [secondary login](https://help.expensify.com/articles/expensify-classic/settings/Change-or-add-email-address) to directly forward the receipt into your account. ## How do I upload Trip receipts that were not sent to me by email? -If your trip receipt was not sent to you by email, you can manually upload the receipt to your account. Check out this resource for more information on [manually uploading receipts](https://help.expensify.com/articles/expensify-classic/expenses/expenses/Upload-Receipts#manually-upload). +If your trip receipt was not sent to you by email, you can manually upload the receipt to your account. Check out this resource for more information on [manually creating expenses](https://help.expensify.com/articles/expensify-classic/expenses/Add-an-expense#add-an-expense-manually). {% include faq-end.md %} diff --git a/docs/articles/expensify-classic/expensify-billing/Receipt-Breakdown.md b/docs/articles/expensify-classic/expensify-billing/Receipt-Breakdown.md index 21e2db5604f8..8f512fb71512 100644 --- a/docs/articles/expensify-classic/expensify-billing/Receipt-Breakdown.md +++ b/docs/articles/expensify-classic/expensify-billing/Receipt-Breakdown.md @@ -2,46 +2,36 @@ title: Receipts Breakdown description: This article goes over the Expensify receipt for billing owners. --- +**Your receipt is broken up into the following sections:** +- A high-level summary of your total Expensify bill +- Ways to reduce your bill and get paid to use Expensify +- A billing breakdown that covers all activity and discounts +- An activity breakdown by workspace -# Overview -This article will give you (the billing owner) a detailed breakdown of your Expensify bill. +## A high-level summary -Your receipt is broken up into multiple sections that include: -1. A high-level summary of your total Expensify bill -2. Ways to reduce your bill and get paid to use Expensify -3. A billing breakdown that covers all activity and discounts -4. An activity breakdown by workspace +- The top section will show the total amount you paid as the billing owner of Expensify Workspaces and give you a breakdown of the price per member. +- Every member of your workspace(s) can store data, review data, and access free features like Expensify Chat. +- We show the total price and then calculate the price per member by using the number of members across all of the workspaces you own. +- Further down in the receipt, there's a breakdown of the members who generated billable activity. -## How-to understand the high-level summary -The top section will show the total amount you paid as the billing owner of Expensify workspaces and give you a breakdown of price per member. Every member of your workspace(s) gets to store data, review data, and access free features like Expensify Chat. Thus, we show the total price and then use all of the members across all of the workspaces you own to calculate the price per member. Further down in the receipt, and in this article, we break down the members who generated billable activity. - -## How-to reduce your bill and get paid to use Expensify +## Reduce your bill and get paid to use Expensify Chances are you can actually get paid to use Expensify with the Expensify Card. In this section of the receipt, we outline how much money you're leaving on the table by not using the Expensify Card. You can click `Get started` to connect with your account manager (if you have one) or Concierge, both of whom can help get you started with the card. _Note: Currently, we offer Expensify Cards to companies with US bank accounts._ -## How-to understand your billing breakdown +## The billing breakdown Your receipt will have a detailed breakdown of activity and discounts across all workspaces. Here's a description of items that may appear on your bill: -- [Number of] Inactive workspace members @ $0.00 - - All inactive members from any of your workspaces. -- [Number of] Chat-only members @ $0.00 - - Any workspace members who chatted but didn't generate any other billable activity. Learn more about [chatting for free.](https://help.expensify.com/articles/new-expensify/chat/Introducing-Expensify-Chat) -- [Number of] Annual Control members @ $18.00 - - Any members included in your annual subscription on the Control plan. -- [Number of] Pay-per-use Control members @ $36.00 - - Any members above your annual subscription size on the Control plan. They're billed at the pay-per-use rate. -- [Number of] Annual Collect members @ $10.00 - - Any members included in your annual subscription on the Collect plan. -- [Number of] Pay-per-use Collect members @ $20.00 - - Any members above your annual subscription size on the Collect plan. These members are billed at the pay-per-use rate. -- X% Expensify Card discount with $Y spend - - The % discount you're getting based on total settled US purchases across your Expensify Cards. -- X% Expensify Card cash back credit for $Y spend - - The amount of cash back you've earned based on total settled US purchases across your Expensify Cards. -- 50% ExpensifyApproved! partner discount - - If you're part of an accounting firm, you get an additional discount for being our partner. [Learn more about our ExpensifyApproved! accountants program.](https://use.expensify.com/accountants-program) -- Total - - Sum of all the line items above. +- **[Number of] Inactive workspace members @ $0.00:** All inactive members from any of your workspaces. +- **[Number of] Chat-only members @ $0.00:** Any workspace members who chatted but didn't generate any other billable activity. Learn more about [chatting for free.](https://help.expensify.com/new-expensify/hubs/chat/) +- **[Number of] Annual Control members @ $18.00:** Any members included in your annual subscription on the Control plan. +- **[Number of] Pay-per-use Control members @ $36.00:** Any members above your annual subscription size on the Control plan. They're billed at the pay-per-use rate. +- **[Number of] Annual Collect members @ $10.00:** Any members included in your annual subscription on the Collect plan. +- **[Number of] Pay-per-use Collect members @ $20.00:** Any members above your annual subscription size on the Collect plan. These members are billed at the pay-per-use rate. +- **X% Expensify Card discount with $Y spend:** The % discount you're getting based on total settled US purchases across your Expensify Cards. +- **X% Expensify Card cash back credit for $Y spend:** The amount of cash back you've earned based on total settled US purchases across your Expensify Cards. +- **50% ExpensifyApproved! partner discount:** If you're part of an accounting firm, you get an additional discount for being our partner -- learn more about our ExpensifyApproved! accountant program [here](https://use.expensify.com/accountants-program). +- **Total:** The sum of all the line items above. -## How-to understand your activity breakdown +## The activity breakdown This section will list all of your workspaces alongside their IDs and break down the billing for each of them. diff --git a/docs/articles/expensify-classic/expensify-partner-program/Card-Revenue-Share.md b/docs/articles/expensify-classic/expensify-partner-program/Card-Revenue-Share.md index b6c3bc0904c0..663a5e3cd9c8 100644 --- a/docs/articles/expensify-classic/expensify-partner-program/Card-Revenue-Share.md +++ b/docs/articles/expensify-classic/expensify-partner-program/Card-Revenue-Share.md @@ -2,26 +2,23 @@ title: Expensify Card revenue share for ExpensifyApproved! partners description: Earn money when your clients adopt the Expensify Card --- -# Overview You can now earn additional income for your firm every time your client uses their Expensify Card. In short, your firm gets 0.5% of your clients’ total Expensify Card spend as cash back. The more your clients spend, the more cashback your firm receives! This program is currently only available to US-based ExpensifyApproved! partner accountants. -# Become a domain admin -To benefit from this program, you or a member of your firm must be a domain admin on your client’s domain in Expensify. +# Become a Domain Admin +To benefit from this program, you or a member of your firm must be a domain admin on the client’s domain in Expensify: 1. Head to *Settings > Domains* -2. Click the name of your client's domain +2. Click the client's domain + - If you can click on the domain and access the domain settings, you are a Domain Admin + - If you’re not a Domain Admin, your client can add you as one by heading to **Settings > Domains > [Client's Domain] > Domain Admins > Add Admin**. -If you can click into the domain and access the domain settings, that means you are a domain admin. +_**Note:** You can view all domain admins under Settings > Domains > [Client's Domain] > Domain Admins._ -Note: You can view all domain admins under *Settings > Domains > [Client's domain name] > Domain Admins*. +# Connect a deposit-only business bank account +[Follow these instructions](https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/bank-accounts/Connect-US-Business-Bank-Account#connect-a-business-deposit-only-account) to connect a deposit-only business bank account. -If you’re not a domain admin, your client can add you as one by heading to **Settings > Domains > [Client's domain name] > Domain Admins > Add admin**. - -# Connect a deposit account -Next, connect a deposit-only business bank account. Any revenue earned will be deposited directly into that account. - -Instructions to connect a deposit-only business bank account are [here](https://help.expensify.com/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-USD#how-to-connect-a-business-deposit-only-bank-account). +Once that's complete, any revenue earned will be deposited directly into that bank account. {% include faq-begin.md %} diff --git a/docs/articles/expensify-classic/spending-insights/Insights.md b/docs/articles/expensify-classic/spending-insights/Insights.md index c5ee218352fd..edd9c2207466 100644 --- a/docs/articles/expensify-classic/spending-insights/Insights.md +++ b/docs/articles/expensify-classic/spending-insights/Insights.md @@ -1,12 +1,11 @@ --- title: Custom Reporting and Insights -description: How to get the most out of the Custom Reporing and Insights +description: How to get the most out of the Custom Reporting and Insights redirect_from: articles/other/Insights/ --- -# Overview -The Insights dashboard allows you to monitor all aspects of company spending across categories, employees, projects, departments, and more. You can see trends in real-time, forecast company budgets, and build unlimited custom reports with help from our trained specialist team. +The Insights dashboard allows you to monitor all aspects of company spending across categories, employees, projects, departments, and more. You can see trends in real time, forecast company budgets, and build unlimited custom reports with help from our trained specialist team. ![Insights Pie Chart](https://help.expensify.com/assets/images/insights-chart.png){:width="100%"} ## Review your Insights data @@ -15,7 +14,7 @@ The Insights dashboard allows you to monitor all aspects of company spending acr 2. Select a specific date range (the default view has the current month pre-selected) 3. Use the filter options to select the categories, tags, employees, or any other parameter 4. Make sure that View in the top right corner is set to the pie chart icon -5. You can view any dataset in more detail by clicking in the “View Raw Data” column +5. You can view any dataset in more detail by clicking in the **View Raw Data** column ## Export your Insights data @@ -26,46 +25,47 @@ The Insights dashboard allows you to monitor all aspects of company spending acr ## Create a Custom Export Report for your Expenses 1. Navigate to **Settings > Account > Preferences > scroll down to CSV Export Formats** -2. Build up a report using these [formulas]((https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates)) +2. Build up a report using these [expense-level formulas](https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates#expense-level) 3. Click the **Custom Export** button on the Insights page and your Account Manager will help get you started on building up your report ## Create a Custom Export Report for your Workspace 1. Navigate to **Settings > Workspaces > Group > [Workspace Name] > Export Formats** -2. Build up a report using these [formulas](https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates) -3. If you need any help, click the **Support** button on the top left to contact your Account Manager +2. Build up a report using these [report-level formulas](https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates#report-level) +3. If you need any help, click the **Support** button on the top left to contact Concierge or your Account Manager {% include faq-begin.md %} -#### Can I share my custom export report? +## Can I share my custom export report? If you would like to create a custom export report that can be shared with other workspace admins, you can do so by navigating to the **[Settings > Workspaces > Group > [Workspace Name] > Export Formats** page. Custom export reports created under the **Settings > Account > Preferences** page are only available to the member who created them. -#### Can I put expenses from different workspaces on the same report? +## Can I put expenses from different workspaces on the same report? -Custom export reports created under the Settings > Account > Preferences page can export expenses from multiple workspaces, and custom export formats created under Settings > Workspaces> Group > [Workspace Name] > Export Formats are for expenses reported under that workspace only. +Custom export reports created under the **Settings > Account > Preferences** page can export expenses from multiple workspaces. -#### Are there any default export reports available? +Custom export formats created under **Settings > Workspaces> Group > [Workspace Name] > Export Formats** are for expenses reported under that workspace only. + +## Are there any default export reports available? Yes! We have [seven default reports](https://help.expensify.com/articles/expensify-classic/spending-insights/Default-Export-Templates) available to export directly from the Reports page: -- **All Data** - Expense Level Export** - the name says it all! This is for the people who want ALL the details from their expense reports. We're talking Tax, Merchant Category Codes, Approvers - you name it, this report's got it! -- **All Data** - Report Level Export - this is the report for those who don't need to see each individual expense but want to see a line-by-line breakdown at a report level - submitter, total amount, report ID - that kind of stuff -- **Basic Export** - this is the best way to get a simple breakdown of all your expenses - just the basics -- **Canadian Multiple Tax Export** - tax, GST, PST...if you need to know tax then this is the export you want! -- **Category Export** - want to see a breakdown of your expenses by Category? This is the export you -- **Per Diem Export** - the name says it all -- **Tag Export** - much like the Category Export, but for Tags +- **All Data — Expense Level Export**: Use this to view all of the details from their expense reports (tax, merchant category codes, approvals, etc.) +- **All Data—Report Level Export**: This report is great if you don't need to see each individual expense but want to see a line-by-line breakdown at a report level (submitter, total amount, report ID, etc.) +- **Basic Export**: The best way to get a simple breakdown of all your expenses +- **Canadian Multiple Tax Export**: To gain a better understanding of the various Canadian taxes tied to expenses (GST, PST, etc.) +- **Category Export**: Use this to see a breakdown of your expenses by Category +- **Per Diem Export**: Use to export your Per Diem details +- **Tag Export**: Similar to the Category Export, but for Tags *These reports will be emailed directly to your email address rather than automatically downloaded.* -#### How many expenses can I export in one report? +## How many expenses can I export in one report? The custom export reports are best for small-to-medium chunks of data. If you want to export large amounts of data, we recommend you use a [default export report](https://help.expensify.com/articles/expensify-classic/spending-insights/Default-Export-Templates) that you can run from the Reports page. -#### What other kinds of export reports can my Account Manager help me create? +## What other kinds of export reports can my Account Manager help me create? We’ve built a huge variety of custom reports for customers, so make sure to reach out to your Account Manager for more details. Some examples of custom reports we’ve built for customers before are: - - Accrual Report - Aged Approval Reports - Attendee Reporting diff --git a/docs/articles/expensify-classic/workspaces/Create-tags.md b/docs/articles/expensify-classic/workspaces/Create-tags.md index ad3f51bc8c58..0743b53ff5fa 100644 --- a/docs/articles/expensify-classic/workspaces/Create-tags.md +++ b/docs/articles/expensify-classic/workspaces/Create-tags.md @@ -1,23 +1,20 @@ --- -title: Create tags +title: Create Tags description: Code expenses by creating tags ---
You can tag expenses for a specific department, project, location, cost center, customer, etc. You can also use different tags for each workspace to create customized coding for different employees. -You can use single tags or multi-level tags: -- **Single Tags**: Employees click one dropdown to select one tag. Single tags are helpful if employees need to select only one tag from a list, for example their department. -- **Multi-level Tags**: Employees click multiple dropdowns to select more than one tag. You can also create dependent tags that only appear if another tag has already been selected. Multi-tags are helpful if you have multiple tags, for example projects, locations, cost centers, etc., for employees to select, or if you have dependent tags. For example, if an employee selects a specific department, another tag can appear where they have to select their project. +**There are two options for tag configuration in Expensify:** +- **Single Tags**: Employees click one dropdown to select one tag. Single tags are helpful if employees need to select only one tag from a list, for example, their department. +- **Multi-level Tags**: Employees click multiple dropdowns to select more than one tag. You can also create dependent tags that only appear if another tag has already been selected. Multi-tags are helpful if you have multiple tags, for example, projects, locations, cost centers, etc., for employees to select or if you have dependent tags. For example, if an employee selects a specific department, another tag can appear where they have to select their project. -To add your tags, you can either import them for an accounting system or spreadsheet, or add them manually. +# Individual Tags -# Single tags - -## Import a spreadsheet - -You can add a list of single tags by importing them in a .csv, .txt, .xls, or .xlsx spreadsheet. +## Import via spreadsheet +You can add a list of single tags by importing them via .csv, .txt, .xls, or .xlsx spreadsheet: 1. Hover over Settings, then click **Workspaces**. 2. Click the **Group** tab on the left. 3. Click the desired workspace name. @@ -30,31 +27,35 @@ Each time you upload a list of tags, it will override your previous list. To avo {% include end-info.html %} ## Manually add individual tags - +You can also add single tags by adding them manually: 1. Hover over Settings, then click **Workspaces**. 2. Click the **Group** tab on the left. 3. Click the desired workspace name. 4. Click the **Tags** tab on the left. 5. Enter a tag name into the field and click **Add**. -# Multi-level tags +# Multi-level Tags + +## Automatic import via accounting integration + +When you first connect your accounting integration (for example, QuickBooks Online, QuickBooks Desktop, Sage Intacct, Xero, or NetSuite), you’ll configure classes, customers, projects, department locations, etc., that automatically import into Expensify as tags. -## Automatic import with accounting integration +To update your tags in Expensify, you must first update the tag in your accounting system: +1. Hover over Settings, then click **Workspaces**. +2. Click the **Group** tab on the left. +3. Click the desired workspace name. +4. Click the **Connections** tab on the left. +5. Click **Sync Now**. -When you first connect your accounting integration (for example, QuickBooks Online, QuickBooks Desktop, Sage Intacct, Xero, or NetSuite), you’ll configure classes, customers, projects, departments locations, etc. that automatically import into Expensify as tags. +Once the tags are updated in your accounting integration, the changes will automatically reflect in Expensify after the connection sync is run. -1. To update your tags in Expensify, you must first update the tag in your accounting system. Then in Expensify, -2. Hover over Settings, then click **Workspaces**. -3. Click the **Group** tab on the left. -4. Click the desired workspace name. -5. Click the **Connections** tab on the left. -6. Click **Sync Now**. +## Import via spreadsheet -## Import a spreadsheet +You can add mutli-level tags by importing them in a .csv, .txt, .xls, or .xlsx spreadsheet. -You can add a list of single tags by importing them in a .csv, .txt, .xls, or .xlsx spreadsheet. +First, determine whether you will use independent (a separate tag for department and project) or dependent tags (the project tags populate different options based on the department selected) and whether you will capture general ledger (GL) codes. -1. Determine whether you will use independent (a separate tag for department and project) or dependent tags (the project tags populate different options based on the department selected), and whether you will capture general ledge (GL) codes. Then use one of the following templates to build your tags list: +Then use one of the following templates to build your tags list: - [Dependent tags with GL codes]({{site.url}}/assets/Files/Dependent+with+GL+codes+format.csv) - [Dependent tags without GL codes]({{site.url}}/assets/Files/Dependent+without+GL+codes+format.csv) - [Independent tags with GL codes]({{site.url}}/assets/Files/Independent+with+GL+codes+format.csv) @@ -64,21 +65,22 @@ You can add a list of single tags by importing them in a .csv, .txt, .xls, or .x If you have more than 50,000 tags, divide them into two separate files. {% include end-info.html %} -2. Hover over Settings, then click **Workspaces**. -3. Click the **Group** tab on the left. -4. Click the desired workspace name. -5. Click the **Tags** tab on the left. -6. Enable the “Use multiple levels of tags” option. -7. Click **Import from Spreadsheet**. -8. Select the applicable checkboxes and click **Upload Tags**. +To import multi-level tags: +1. Hover over Settings, then click **Workspaces**. +2. Click the **Group** tab on the left. +3. Click the desired workspace name. +4. Click the **Tags** tab on the left. +5. Enable the “Use multiple levels of tags” option. +6. Click **Import from Spreadsheet**. +7. Select the applicable checkboxes and click **Upload Tags**. {% include info.html %} Each time you upload a list of tags, it will override your previous list. To avoid losing tags, update your current spreadsheet and re-import it into Expensify. {% include end-info.html %} -# FAQs +# FAQ -**Why can’t I see a "Do you want to use multiple level tags" option on my workspace.** +## Why can’t I see a multi-level tags option on my workspace? If you are connected to an accounting integration, you will not see this feature. You will need to add those tags in your integration first, then sync the connection. diff --git a/docs/articles/new-expensify/expensify-card/Upgrade-to-the-new-Expensify-Card-from-Visa.md b/docs/articles/new-expensify/expensify-card/Upgrade-to-the-new-Expensify-Card-from-Visa.md index 56e456eb1256..8fffec75e744 100644 --- a/docs/articles/new-expensify/expensify-card/Upgrade-to-the-new-Expensify-Card-from-Visa.md +++ b/docs/articles/new-expensify/expensify-card/Upgrade-to-the-new-Expensify-Card-from-Visa.md @@ -4,25 +4,26 @@ description: Get the new Expensify Visa® Commercial Card ---
-If your company is already using Expensify Cards, you can upgrade your cards for free to the new Expensify Visa® Commercial Card to get even more tools to manage employee spending, including: -- Unlimited virtual cards +When you upgrade the Expensify Cards to the new program, you'll have access to even more tools to manage employee spending, including: +- Unlimited [virtual cards](https://use.expensify.com/unlimited-virtual-cards) - Controlled spending amounts on virtual cards to manage subscriptions - Tighter controls for managing spend across employees and merchants -- Fixed or monthly spend limits for each card +- Fixed or monthly spending limits for each card - Unique naming for each virtual card for simplified expense categorization -# Upgrade your company’s Expensify Cards - {% include info.html %} -This process must be completed by a Domain Admin. Although the process is available for all Domain Admins, only one admin needs to complete these steps. +The Expensify Card upgrade must be completed by November 1, 2024. +{% include end-info.html %} -Before completing this process, you’ll want to: +# Upgrade your company’s Expensify Card program +This process must be completed by a Domain Admin. Any domain Admin can complete the upgrade, but only one admin needs to complete these steps. -- Have your employees update their address if needed so that they receive their new Expensify Card in the mail before completing the steps below. -- Ensure that existing cardholders have a limit greater than $0 if you want them to receive a new Expensify Card. If their limit is $0, increase the limit. -{% include end-info.html %} +**Before updating the card program:** +- Make sure your employees' address is up-to-date in their Expensify account +- Confirm the employees who should be receiving a new Expensify Card have a card limit set that's greater than $0 -1. On your Home page, click the task titled “Upgrade to the new and improved Expensify Card.” +## Steps to upgrade the Expensify Cards +1. On your Home page, click the task titled _Upgrade to the new and improved Expensify Card._ 2. Review and agree to the Terms of Service. 3. Click **Get the new card**. All existing cardholders with a limit greater than $0 will be automatically mailed a new physical card to the address they have on file. Virtual cards will be automatically issued and available for immediate use. 4. If you have Positive Pay enabled for your settlement account, contact your bank as soon as possible to whitelist the new ACH ID: 2270239450. @@ -36,19 +37,19 @@ Cards won’t be issued to any employees who don’t currently have them. In thi {% include faq-begin.md %} -**Why don’t I see the task to agree to new terms on my Home page?** +## Why don’t I see the task to agree to new terms on my Home page? There are a few reasons why you might not see the task on your Home page: - You may not be a Domain Admin - Another domain admin has already accepted the terms - The task may be hidden. To find hidden tasks, scroll to the bottom of the Home page and click **Show Hidden Tasks** to see all of your available tasks. -**Will this affect the continuous reconciliation process?** +## Will this affect the continuous reconciliation process? No. During the transition period, you may have some employees with old cards and some with new cards, so you’ll have two different debits (settlements) made to your settlement account for each settlement period. Once all spending has transitioned to the new cards, you’ll only see one debit/settlement. -**Do I have to upgrade to the new Expensify Visa® Commercial Card?** +## Do I have to upgrade to the new Expensify Visa® Commercial Card? -Yes. We’ll provide a deadline soon. But don’t worry—you’ll have plenty of time to upgrade. +Yes, the Expensify Cards will not work on the old program. This must be completed by November 1, 2024. {% include faq-end.md %}
diff --git a/docs/assets/images/ExpensifyHelp-AttendeeTracking-1.png b/docs/assets/images/ExpensifyHelp-AttendeeTracking-1.png new file mode 100644 index 000000000000..e3c08b9133b8 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp-AttendeeTracking-1.png differ diff --git a/docs/assets/images/quickbooks-desktop-access-rights.png b/docs/assets/images/quickbooks-desktop-access-rights.png new file mode 100644 index 000000000000..bcdd35b8c827 Binary files /dev/null and b/docs/assets/images/quickbooks-desktop-access-rights.png differ diff --git a/docs/assets/images/quickbooks-desktop-advanced-settings.png b/docs/assets/images/quickbooks-desktop-advanced-settings.png new file mode 100644 index 000000000000..181380ed7674 Binary files /dev/null and b/docs/assets/images/quickbooks-desktop-advanced-settings.png differ diff --git a/docs/assets/images/quickbooks-desktop-coding-settings.png b/docs/assets/images/quickbooks-desktop-coding-settings.png new file mode 100644 index 000000000000..7b9fc8086c9f Binary files /dev/null and b/docs/assets/images/quickbooks-desktop-coding-settings.png differ diff --git a/docs/assets/images/quickbooks-desktop-company-preferences.png b/docs/assets/images/quickbooks-desktop-company-preferences.png new file mode 100644 index 000000000000..31f2be54bfb8 Binary files /dev/null and b/docs/assets/images/quickbooks-desktop-company-preferences.png differ diff --git a/docs/assets/images/quickbooks-desktop-export-settings.png b/docs/assets/images/quickbooks-desktop-export-settings.png new file mode 100644 index 000000000000..3ff190bc2d60 Binary files /dev/null and b/docs/assets/images/quickbooks-desktop-export-settings.png differ diff --git a/docs/assets/images/quickbooks-desktop-exported-report-comments.png b/docs/assets/images/quickbooks-desktop-exported-report-comments.png new file mode 100644 index 000000000000..2b0d2939e4b0 Binary files /dev/null and b/docs/assets/images/quickbooks-desktop-exported-report-comments.png differ diff --git a/docs/assets/images/quickbooks-desktop-web-connector.png b/docs/assets/images/quickbooks-desktop-web-connector.png new file mode 100644 index 000000000000..b2086420edd8 Binary files /dev/null and b/docs/assets/images/quickbooks-desktop-web-connector.png differ diff --git a/docs/redirects.csv b/docs/redirects.csv index 37e56f31c78d..90baeff59260 100644 --- a/docs/redirects.csv +++ b/docs/redirects.csv @@ -584,3 +584,6 @@ 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 +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 diff --git a/ios/NewApp_AdHoc.mobileprovision.gpg b/ios/NewApp_AdHoc.mobileprovision.gpg index d2f181f6b7f4..76307ce1b460 100644 Binary files a/ios/NewApp_AdHoc.mobileprovision.gpg and b/ios/NewApp_AdHoc.mobileprovision.gpg differ diff --git a/ios/NewApp_AdHoc_Notification_Service.mobileprovision.gpg b/ios/NewApp_AdHoc_Notification_Service.mobileprovision.gpg index c0afa40ecb29..6437d0a3f096 100644 Binary files a/ios/NewApp_AdHoc_Notification_Service.mobileprovision.gpg and b/ios/NewApp_AdHoc_Notification_Service.mobileprovision.gpg differ diff --git a/ios/NewExpensify.xcodeproj/project.pbxproj b/ios/NewExpensify.xcodeproj/project.pbxproj index 1a29a275b956..96baba0d4e87 100644 --- a/ios/NewExpensify.xcodeproj/project.pbxproj +++ b/ios/NewExpensify.xcodeproj/project.pbxproj @@ -43,7 +43,7 @@ D27CE6B77196EF3EF450EEAC /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 0D3F9E814828D91464DF9D35 /* PrivacyInfo.xcprivacy */; }; DD79042B2792E76D004484B4 /* RCTBootSplash.mm in Sources */ = {isa = PBXBuildFile; fileRef = DD79042A2792E76D004484B4 /* RCTBootSplash.mm */; }; DDCB2E57F334C143AC462B43 /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D20D83B0E39BA6D21761E72 /* ExpoModulesProvider.swift */; }; - E51DC681C7DEE40AEBDDFBFE /* (null) in Frameworks */ = {isa = PBXBuildFile; }; + E51DC681C7DEE40AEBDDFBFE /* BuildFile in Frameworks */ = {isa = PBXBuildFile; }; E9DF872D2525201700607FDC /* AirshipConfig.plist in Resources */ = {isa = PBXBuildFile; fileRef = E9DF872C2525201700607FDC /* AirshipConfig.plist */; }; ED222ED90E074A5481A854FA /* ExpensifyNeue-BoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = 8B28D84EF339436DBD42A203 /* ExpensifyNeue-BoldItalic.otf */; }; F0C450EA2705020500FD2970 /* colors.json in Resources */ = {isa = PBXBuildFile; fileRef = F0C450E92705020500FD2970 /* colors.json */; }; @@ -176,8 +176,8 @@ buildActionMask = 2147483647; files = ( 383643682B6D4AE2005BB9AE /* DeviceCheck.framework in Frameworks */, - E51DC681C7DEE40AEBDDFBFE /* (null) in Frameworks */, - E51DC681C7DEE40AEBDDFBFE /* (null) in Frameworks */, + E51DC681C7DEE40AEBDDFBFE /* BuildFile in Frameworks */, + E51DC681C7DEE40AEBDDFBFE /* BuildFile in Frameworks */, 8744C5400E24E379441C04A4 /* libPods-NewExpensify.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; @@ -1848,6 +1848,7 @@ "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = NO; CXX = ""; + DEBUG_INFORMATION_FORMAT = dwarf; ENABLE_STRICT_OBJC_MSGSEND = YES; ENABLE_TESTABILITY = YES; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index 978cc5b3c2ab..8dd29aa08d95 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -19,7 +19,7 @@ CFBundlePackageType APPL CFBundleShortVersionString - 9.0.48 + 9.0.49 CFBundleSignature ???? CFBundleURLTypes @@ -40,7 +40,7 @@ CFBundleVersion - 9.0.48.0 + 9.0.49.1 FullStory OrgId diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index e6a14e30fd04..bbc9daf9ea45 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -15,10 +15,10 @@ CFBundlePackageType BNDL CFBundleShortVersionString - 9.0.48 + 9.0.49 CFBundleSignature ???? CFBundleVersion - 9.0.48.0 + 9.0.49.1 diff --git a/ios/NotificationServiceExtension/Info.plist b/ios/NotificationServiceExtension/Info.plist index d8f422542d0f..7528abbc3bbf 100644 --- a/ios/NotificationServiceExtension/Info.plist +++ b/ios/NotificationServiceExtension/Info.plist @@ -11,9 +11,9 @@ CFBundleName $(PRODUCT_NAME) CFBundleShortVersionString - 9.0.48 + 9.0.49 CFBundleVersion - 9.0.48.0 + 9.0.49.1 NSExtension NSExtensionPointIdentifier diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 68266651661a..fa7bb6467ec1 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1606,16 +1606,29 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga - - react-native-config (1.5.0): - - react-native-config/App (= 1.5.0) - - react-native-config/App (1.5.0): - - RCT-Folly + - react-native-config (1.5.3): + - react-native-config/App (= 1.5.3) + - react-native-config/App (1.5.3): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) - RCTRequired - RCTTypeSafety - - React - - React-Codegen + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core + - Yoga - react-native-document-picker (9.3.1): - DoubleConversion - glog @@ -3173,7 +3186,7 @@ SPEC CHECKSUMS: react-native-airship: e10f6823d8da49bbcb2db4bdb16ff954188afccc react-native-blob-util: 221c61c98ae507b758472ac4d2d489119d1a6c44 react-native-cameraroll: 478a0c1fcdd39f08f6ac272b7ed06e92b2c7c129 - react-native-config: 5ce986133b07fc258828b20b9506de0e683efc1c + react-native-config: 742a9e0a378a78d0eaff1fb3477d8c0ae222eb51 react-native-document-picker: e9d83c149bdd72dc01cf8dcb8df0389c6bd5fddb react-native-geolocation: b9bd12beaf0ebca61a01514517ca8455bd26fa06 react-native-image-picker: f8a13ff106bcc7eb00c71ce11fdc36aac2a44440 diff --git a/package-lock.json b/package-lock.json index e08766b5e490..286f04eaf893 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "new.expensify", - "version": "9.0.48-0", + "version": "9.0.49-1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "new.expensify", - "version": "9.0.48-0", + "version": "9.0.49-1", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -78,7 +78,7 @@ "react-native-android-location-enabler": "^2.0.1", "react-native-blob-util": "0.19.4", "react-native-collapsible": "^1.6.2", - "react-native-config": "1.5.0", + "react-native-config": "1.5.3", "react-native-dev-menu": "^4.1.1", "react-native-device-info": "10.3.1", "react-native-document-picker": "^9.3.1", @@ -90,7 +90,7 @@ "react-native-image-picker": "^7.0.3", "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#cb392140db4953a283590d7cf93b4d0461baa2a9", "react-native-key-command": "^1.0.8", - "react-native-keyboard-controller": "1.14.0", + "react-native-keyboard-controller": "1.14.1", "react-native-launch-arguments": "^4.0.2", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", @@ -34469,11 +34469,10 @@ } }, "node_modules/react-native-config": { - "version": "1.5.0", - "license": "MIT", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/react-native-config/-/react-native-config-1.5.3.tgz", + "integrity": "sha512-3D05Abgk5DfDw9w258EzXvX5AkU7eqj3u9H0H0L4gUga4nYg/zuupcrpGbpF4QeXBcJ84jjs6g8JaEP6VBT7Pg==", "peerDependencies": { - "react": "*", - "react-native": "*", "react-native-windows": ">=0.61" }, "peerDependenciesMeta": { @@ -34622,9 +34621,9 @@ "license": "MIT" }, "node_modules/react-native-keyboard-controller": { - "version": "1.14.0", - "resolved": "https://registry.npmjs.org/react-native-keyboard-controller/-/react-native-keyboard-controller-1.14.0.tgz", - "integrity": "sha512-JW9k2fehFXOpvLWh1YcgyubLodg/HPi6bR11sCZB/BOawf1tnbGnqk967B8XkxDOKHH6mg+z82quCvv8ALh1rg==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/react-native-keyboard-controller/-/react-native-keyboard-controller-1.14.1.tgz", + "integrity": "sha512-HUrZTaaDPxm94EVXlguwJB2gm6mc+VRTTzR66luFGZJZnL2SJoxN+dwsNW3twkwUVDrCPPA3U21q9YWUKVmwvg==", "peerDependencies": { "react": "*", "react-native": "*", diff --git a/package.json b/package.json index b944cd941493..136131d411f6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "9.0.48-0", + "version": "9.0.49-1", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", @@ -133,7 +133,7 @@ "react-native-android-location-enabler": "^2.0.1", "react-native-blob-util": "0.19.4", "react-native-collapsible": "^1.6.2", - "react-native-config": "1.5.0", + "react-native-config": "1.5.3", "react-native-dev-menu": "^4.1.1", "react-native-device-info": "10.3.1", "react-native-document-picker": "^9.3.1", @@ -145,7 +145,7 @@ "react-native-image-picker": "^7.0.3", "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#cb392140db4953a283590d7cf93b4d0461baa2a9", "react-native-key-command": "^1.0.8", - "react-native-keyboard-controller": "1.14.0", + "react-native-keyboard-controller": "1.14.1", "react-native-launch-arguments": "^4.0.2", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", diff --git a/patches/react-native-config+1.5.0.patch b/patches/react-native-config+1.5.3.patch similarity index 71% rename from patches/react-native-config+1.5.0.patch rename to patches/react-native-config+1.5.3.patch index 4b5a597de4dd..d2c093705032 100644 --- a/patches/react-native-config+1.5.0.patch +++ b/patches/react-native-config+1.5.3.patch @@ -1,68 +1,11 @@ -diff --git a/node_modules/react-native-config/README.md b/node_modules/react-native-config/README.md -index 8424402..ca29e39 100644 ---- a/node_modules/react-native-config/README.md -+++ b/node_modules/react-native-config/README.md -@@ -78,13 +78,13 @@ if cocoapods are used in the project then pod has to be installed as well: - **MainApplication.java** - - ```diff -- + import com.lugg.ReactNativeConfig.ReactNativeConfigPackage; -+ + import com.lugg.RNCConfig.RNCConfigPackage; - - @Override - protected List getPackages() { - return Arrays.asList( - new MainReactPackage() -- + new ReactNativeConfigPackage() -+ + new RNCConfigPackage() - ); - } - ``` diff --git a/node_modules/react-native-config/android/build.gradle b/node_modules/react-native-config/android/build.gradle -index c8f7fd4..86b3e1a 100644 +index d3bdb07..1629423 100644 --- a/node_modules/react-native-config/android/build.gradle +++ b/node_modules/react-native-config/android/build.gradle -@@ -15,6 +15,55 @@ def safeExtGet(prop, fallback) { +@@ -15,6 +15,18 @@ def safeExtGet(prop, fallback) { rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback } -+def resolveReactNativeDirectory() { -+ def reactNativeLocation = safeExtGet("REACT_NATIVE_NODE_MODULES_DIR", null) -+ if (reactNativeLocation != null) { -+ return file(reactNativeLocation) -+ } -+ -+ // monorepo workaround -+ // react-native can be hoisted or in project's own node_modules -+ def reactNativeFromProjectNodeModules = file("${rootProject.projectDir}/../node_modules/react-native") -+ if (reactNativeFromProjectNodeModules.exists()) { -+ return reactNativeFromProjectNodeModules -+ } -+ -+ def reactNativeFromNodeModulesWithRNCConfig = file("${projectDir}/../../react-native") -+ if (reactNativeFromNodeModulesWithRNCConfig.exists()) { -+ return reactNativeFromNodeModulesWithRNCConfig -+ } -+ -+ throw new Exception( -+ "[react-native-config] Unable to resolve react-native location in " + -+ "node_modules. You should add project extension property (in app/build.gradle) " + -+ "`REACT_NATIVE_NODE_MODULES_DIR` with path to react-native." -+ ) -+} -+ -+def getReactNativeMinorVersion() { -+ def REACT_NATIVE_DIR = resolveReactNativeDirectory() -+ -+ def reactProperties = new Properties() -+ file("$REACT_NATIVE_DIR/ReactAndroid/gradle.properties").withInputStream { reactProperties.load(it) } -+ -+ def REACT_NATIVE_VERSION = reactProperties.getProperty("VERSION_NAME") -+ def REACT_NATIVE_MINOR_VERSION = REACT_NATIVE_VERSION.startsWith("0.0.0-") ? 1000 : REACT_NATIVE_VERSION.split("\\.")[1].toInteger() -+ -+ return REACT_NATIVE_MINOR_VERSION -+} -+ +def isNewArchitectureEnabled() { + // To opt-in for the New Architecture, you can either: + // - Set `newArchEnabled` to true inside the `gradle.properties` file @@ -75,10 +18,10 @@ index c8f7fd4..86b3e1a 100644 + apply plugin: "com.facebook.react" +} + - android { - compileSdkVersion rootProject.ext.compileSdkVersion - -@@ -23,10 +72,23 @@ android { + def supportsNamespace() { + def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.'); + def major = parsed[0].toInteger(); +@@ -44,10 +56,23 @@ android { targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" @@ -102,44 +45,45 @@ index c8f7fd4..86b3e1a 100644 } repositories { -@@ -34,5 +96,9 @@ repositories { +@@ -55,5 +80,5 @@ repositories { } dependencies { - implementation "com.facebook.react:react-native:${safeExtGet("reactNative", "+")}" // from node_modules -+ if (isNewArchitectureEnabled() && getReactNativeMinorVersion() < 71) { -+ implementation project(":ReactAndroid") -+ } else { -+ implementation 'com.facebook.react:react-native:+' -+ } ++ implementation 'com.facebook.react:react-native:+' } diff --git a/node_modules/react-native-config/android/src/main/java/com/lugg/RNCConfig/RNCConfigModule.java b/node_modules/react-native-config/android/src/main/java/com/lugg/RNCConfig/RNCConfigModule.java -index 0b52515..bef2834 100644 +index 55b853b..2784795 100644 --- a/node_modules/react-native-config/android/src/main/java/com/lugg/RNCConfig/RNCConfigModule.java +++ b/node_modules/react-native-config/android/src/main/java/com/lugg/RNCConfig/RNCConfigModule.java -@@ -13,20 +13,32 @@ import java.lang.reflect.Field; +@@ -11,41 +11,58 @@ import java.lang.reflect.Field; import java.util.Map; import java.util.HashMap; -public class RNCConfigModule extends ReactContextBaseJavaModule { +public class RNCConfigModule extends NativeConfigModuleSpec { + public static final String NAME = "RNCConfigModule"; -+ - public RNCConfigModule(ReactApplicationContext reactContext) { - super(reactContext); - } - @Override - public String getName() { -- return "RNCConfigModule"; -+ return NAME; - } +- public RNCConfigModule(ReactApplicationContext reactContext) { +- super(reactContext); +- } ++ public RNCConfigModule(ReactApplicationContext reactContext) { ++ super(reactContext); ++ } - @Override -- public Map getConstants() { +- @Override +- public String getName() { +- return "RNCConfigModule"; +- } ++ @Override ++ public String getName() { ++ return NAME; ++ } ++ ++ @Override + public Map getTypedExportedConstants() { - final Map constants = new HashMap<>(); - ++ final Map constants = new HashMap<>(); ++ + // Codegen ensures that the constants defined in the module spec and in the native module implementation + // are consistent, which is tad problematic in this case, as the constants are dependant on the `.env` + // file. The simple workaround is to define a `constants` object that will contain actual constants. @@ -149,33 +93,64 @@ index 0b52515..bef2834 100644 + // we export { constants: { constant1: "value1", constant2: "value2" } } + // because of type safety on the new arch + final Map realConstants = new HashMap<>(); -+ - try { - Context context = getReactApplicationContext(); - int resId = context.getResources().getIdentifier("build_config_package", "string", context.getPackageName()); -@@ -40,7 +52,7 @@ public class RNCConfigModule extends ReactContextBaseJavaModule { - Field[] fields = clazz.getDeclaredFields(); - for(Field f: fields) { + +- @Override +- public Map getConstants() { +- final Map constants = new HashMap<>(); ++ try { ++ Context context = getReactApplicationContext(); ++ int resId = context.getResources().getIdentifier("build_config_package", "string", context.getPackageName()); ++ String className; ++ try { ++ className = context.getString(resId); ++ } catch (Resources.NotFoundException e) { ++ className = getReactApplicationContext().getApplicationContext().getPackageName(); ++ } ++ Class clazz = Class.forName(className + ".BuildConfig"); ++ Field[] fields = clazz.getDeclaredFields(); ++ for(Field f: fields) { try { -- constants.put(f.getName(), f.get(null)); +- Context context = getReactApplicationContext(); +- int resId = context.getResources().getIdentifier("build_config_package", "string", context.getPackageName()); +- String className; +- try { +- className = context.getString(resId); +- } catch (Resources.NotFoundException e) { +- className = getReactApplicationContext().getApplicationContext().getPackageName(); +- } +- Class clazz = Class.forName(className + ".BuildConfig"); +- Field[] fields = clazz.getDeclaredFields(); +- for (Field f : fields) { +- try { +- constants.put(f.getName(), f.get(null)); +- } catch (IllegalAccessException e) { +- Log.d("ReactNative", "ReactConfig: Could not access BuildConfig field " + f.getName()); +- } +- } +- } catch (ClassNotFoundException e) { +- Log.d("ReactNative", "ReactConfig: Could not find BuildConfig class"); + realConstants.put(f.getName(), f.get(null)); } - catch (IllegalAccessException e) { - Log.d("ReactNative", "ReactConfig: Could not access BuildConfig field " + f.getName()); -@@ -51,6 +63,8 @@ public class RNCConfigModule extends ReactContextBaseJavaModule { - Log.d("ReactNative", "ReactConfig: Could not find BuildConfig class"); +- return constants; ++ catch (IllegalAccessException e) { ++ Log.d("ReactNative", "ReactConfig: Could not access BuildConfig field " + f.getName()); ++ } ++ } ++ } ++ catch (ClassNotFoundException e) { ++ Log.d("ReactNative", "ReactConfig: Could not find BuildConfig class"); } - ++ + constants.put("constants", realConstants); + - return constants; - } ++ return constants; ++ } } diff --git a/node_modules/react-native-config/android/src/main/java/com/lugg/RNCConfig/RNCConfigPackage.java b/node_modules/react-native-config/android/src/main/java/com/lugg/RNCConfig/RNCConfigPackage.java -index 9251c09..2edd797 100644 +index 599a81a..2edd797 100644 --- a/node_modules/react-native-config/android/src/main/java/com/lugg/RNCConfig/RNCConfigPackage.java +++ b/node_modules/react-native-config/android/src/main/java/com/lugg/RNCConfig/RNCConfigPackage.java -@@ -1,29 +1,42 @@ +@@ -1,27 +1,42 @@ package com.lugg.RNCConfig; -import com.facebook.react.ReactPackage; @@ -184,26 +159,24 @@ index 9251c09..2edd797 100644 import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; -import com.facebook.react.uimanager.ViewManager; -+import com.facebook.react.module.model.ReactModuleInfo; -+import com.facebook.react.module.model.ReactModuleInfoProvider; - -import java.util.Arrays; -import java.util.Collections; -import java.util.List; ++import com.facebook.react.module.model.ReactModuleInfo; ++import com.facebook.react.module.model.ReactModuleInfoProvider; + +-public class RNCConfigPackage implements ReactPackage { +import java.util.HashMap; +import java.util.Map; --public class RNCConfigPackage implements ReactPackage { - @Override - public List createNativeModules(ReactApplicationContext reactContext) { -- return Arrays.asList( -- new RNCConfigModule(reactContext) -- ); +- return Arrays.asList(new RNCConfigModule(reactContext)); - } +public class RNCConfigPackage extends TurboReactPackage { -- public List> createJSModules() { -- return Collections.emptyList(); +- public List> createJSModules() { +- return Collections.emptyList(); + @Override + public NativeModule getModule(String name, ReactApplicationContext reactContext) { + if (name.equals(RNCConfigModule.NAME)) { @@ -336,31 +309,29 @@ index 70866c4..a8f3624 100644 -export const Config = NativeModules.RNCConfigModule || {} export default Config; -diff --git a/node_modules/react-native-config/ios/ReactNativeConfig/GeneratedDotEnv.m b/node_modules/react-native-config/ios/ReactNativeConfig/GeneratedDotEnv.m -index 04a2f3d..59df625 100644 ---- a/node_modules/react-native-config/ios/ReactNativeConfig/GeneratedDotEnv.m -+++ b/node_modules/react-native-config/ios/ReactNativeConfig/GeneratedDotEnv.m -@@ -1 +1 @@ -- #define DOT_ENV @{ }; -+ #define DOT_ENV @{ @"ENV":@"dev",@"API_URL":@"http://localhost" }; diff --git a/node_modules/react-native-config/ios/ReactNativeConfig/RNCConfigModule.h b/node_modules/react-native-config/ios/ReactNativeConfig/RNCConfigModule.h -index 755d103..5341aca 100644 +index 755d103..4e4c564 100644 --- a/node_modules/react-native-config/ios/ReactNativeConfig/RNCConfigModule.h +++ b/node_modules/react-native-config/ios/ReactNativeConfig/RNCConfigModule.h -@@ -1,3 +1,9 @@ +@@ -1,12 +1,15 @@ +-#if __has_include() +-#import +-#elif __has_include("React/RCTBridgeModule.h") +-#import "React/RCTBridgeModule.h" +#ifdef RCT_NEW_ARCH_ENABLED +#import "RNCConfigSpec.h" -+ -+@interface RNCConfigModule : NSObject -+#else -+ - #if __has_include() - #import - #elif __has_include("React/RCTBridgeModule.h") -@@ -7,6 +13,7 @@ - #endif + #else +-#import "RCTBridgeModule.h" +-#endif ++#import ++#endif // RCT_NEW_ARCH_ENABLED - @interface RNCConfigModule : NSObject +-@interface RNCConfigModule : NSObject ++@interface RNCConfigModule : NSObject ++#ifdef RCT_NEW_ARCH_ENABLED ++ ++#else ++ +#endif // RCT_NEW_ARCH_ENABLED + (NSDictionary *)env; @@ -440,10 +411,10 @@ index 0000000..1cacb65 + +@end diff --git a/node_modules/react-native-config/package.json b/node_modules/react-native-config/package.json -index b4d1fba..0a018a7 100644 +index f758725..f338b41 100644 --- a/node_modules/react-native-config/package.json +++ b/node_modules/react-native-config/package.json -@@ -26,6 +26,7 @@ +@@ -27,6 +27,7 @@ "android/", "ios/", "windows/", @@ -451,8 +422,8 @@ index b4d1fba..0a018a7 100644 "index.js", "index.d.ts", "react-native-config.podspec", -@@ -38,11 +39,21 @@ - "semantic-release": "^17.0.4" +@@ -39,11 +40,21 @@ + "semantic-release": "^19.0.5" }, "peerDependencies": { + "react": "*", @@ -474,7 +445,7 @@ index b4d1fba..0a018a7 100644 } } diff --git a/node_modules/react-native-config/react-native-config.podspec b/node_modules/react-native-config/react-native-config.podspec -index 35313d4..56bce4a 100644 +index 449b970..88b14c5 100644 --- a/node_modules/react-native-config/react-native-config.podspec +++ b/node_modules/react-native-config/react-native-config.podspec @@ -4,6 +4,8 @@ require 'json' @@ -486,7 +457,7 @@ index 35313d4..56bce4a 100644 Pod::Spec.new do |s| s.name = 'react-native-config' s.version = package['version'] -@@ -33,8 +35,27 @@ HOST_PATH="$SRCROOT/../.." +@@ -35,8 +37,13 @@ HOST_PATH="$SRCROOT/../.." s.default_subspec = 'App' s.subspec 'App' do |app| @@ -495,21 +466,7 @@ index 35313d4..56bce4a 100644 + app.source_files = 'ios/**/*.{h,m,mm}' + + if fabric_enabled -+ folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32' -+ -+ app.pod_target_xcconfig = { -+ 'HEADER_SEARCH_PATHS' => '"$(PODS_ROOT)/boost" "$(PODS_ROOT)/boost-for-react-native" "$(PODS_ROOT)/RCT-Folly"', -+ 'CLANG_CXX_LANGUAGE_STANDARD' => 'c++17', -+ } -+ app.compiler_flags = folly_compiler_flags + ' -DRCT_NEW_ARCH_ENABLED' -+ -+ app.dependency "React" -+ app.dependency "React-RCTFabric" # This is for fabric component -+ app.dependency "React-Codegen" -+ app.dependency "RCT-Folly" -+ app.dependency "RCTRequired" -+ app.dependency "RCTTypeSafety" -+ app.dependency "ReactCommon/turbomodule/core" ++ install_modules_dependencies(app) + else + app.dependency 'React-Core' + end diff --git a/patches/react-native-keyboard-controller+1.14.0+001+disable-android.patch b/patches/react-native-keyboard-controller+1.14.1+001+disable-android.patch similarity index 100% rename from patches/react-native-keyboard-controller+1.14.0+001+disable-android.patch rename to patches/react-native-keyboard-controller+1.14.1+001+disable-android.patch diff --git a/src/CONST.ts b/src/CONST.ts index 51da86fbcb7f..2d04b386ce1c 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -205,6 +205,10 @@ const CONST = { IN: 'in', OUT: 'out', }, + POPOVER_ACCOUNT_SWITCHER_POSITION: { + horizontal: 12, + vertical: 80, + }, // Multiplier for gyroscope animation in order to make it a bit more subtle ANIMATION_GYROSCOPE_VALUE: 0.4, ANIMATION_PAID_DURATION: 200, @@ -741,6 +745,8 @@ const CONST = { HOW_TO_CONNECT_TO_SAGE_INTACCT: 'https://help.expensify.com/articles/expensify-classic/integrations/accounting-integrations/Sage-Intacct#how-to-connect-to-sage-intacct', PRICING: `https://www.expensify.com/pricing`, COMPANY_CARDS_HELP: 'https://help.expensify.com/articles/expensify-classic/connect-credit-cards/company-cards/Commercial-Card-Feeds', + COMPANY_CARDS_CONNECT_CREDIT_CARDS_HELP_URL: + 'https://help.expensify.com/articles/expensify-classic/connect-credit-cards/company-cards/Commercial-Card-Feeds#what-is-the-difference-between-commercial-card-feeds-and-your-direct-bank-connections', CUSTOM_REPORT_NAME_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates', CONFIGURE_REIMBURSEMENT_SETTINGS_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/workspaces/Configure-Reimbursement-Settings', COPILOT_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/copilots-and-delegates/Assign-or-remove-a-Copilot', @@ -1481,9 +1487,15 @@ const CONST = { QUICKBOOKS_ONLINE: 'quickbooksOnline', QUICKBOOKS_DESKTOP_CONFIG: { + EXPORT_DATE: 'exportDate', + EXPORTER: 'exporter', MARK_CHECKS_TO_BE_PRINTED: 'markChecksToBePrinted', REIMBURSABLE_ACCOUNT: 'reimbursableAccount', REIMBURSABLE: 'reimbursable', + ENABLE_NEW_CATEGORIES: 'enableNewCategories', + MAPPINGS: { + CLASSES: 'classes', + }, }, QUICKBOOKS_CONFIG: { @@ -2551,16 +2563,23 @@ const CONST = { CONNECTION_ERROR: 'connectionError', STEP: { SELECT_BANK: 'SelectBank', + SELECT_FEED_TYPE: 'SelectFeedType', CARD_TYPE: 'CardType', CARD_INSTRUCTIONS: 'CardInstructions', CARD_NAME: 'CardName', CARD_DETAILS: 'CardDetails', + BANK_CONNECTION: 'BankConnection', + AMEX_CUSTOM_FEED: 'AmexCustomFeed', }, CARD_TYPE: { AMEX: 'amex', VISA: 'visa', MASTERCARD: 'mastercard', }, + FEED_TYPE: { + CUSTOM: 'customFeed', + DIRECT: 'directFeed', + }, BANKS: { AMEX: 'American Express', BANK_OF_AMERICA: 'Bank of America', @@ -2572,6 +2591,10 @@ const CONST = { WELLS_FARGO: 'Wells Fargo', OTHER: 'Other', }, + AMEX_CUSTOM_FEED: { + CORPORATE: 'American Express Corporate Cards', + BUSINESS: 'American Express Business Cards', + }, DELETE_TRANSACTIONS: { RESTRICT: 'corporate', ALLOW: 'personal', @@ -5655,6 +5678,7 @@ const CONST = { KEYWORD: 'keyword', IN: 'in', }, + EMPTY_VALUE: 'none', }, REFERRER: { diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 5f7f6b1b7766..49572c14bdea 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -669,6 +669,14 @@ const ROUTES = { route: 'settings/workspaces/:policyID/accounting/quickbooks-online/export/date-select', getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-online/export/date-select` as const, }, + POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_EXPORT_DATE_SELECT: { + route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/export/date-select', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/export/date-select` as const, + }, + POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_PREFERRED_EXPORTER: { + route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/export/preferred-exporter', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/export/preferred-exporter` as const, + }, POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_EXPORT_OUT_OF_POCKET_EXPENSES: { route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/export/out-of-pocket-expense', getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/export/out-of-pocket-expense` as const, @@ -701,6 +709,18 @@ const ROUTES = { route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/import', getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/import` as const, }, + POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CHART_OF_ACCOUNTS: { + route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/import/accounts', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/import/accounts` as const, + }, + POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES: { + route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/import/classes', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/import/classes` as const, + }, + POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES_DISPLAYED_AS: { + route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/import/classes/displayed_as', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/import/classes/displayed_as` as const, + }, WORKSPACE_PROFILE_NAME: { route: 'settings/workspaces/:policyID/profile/name', getRoute: (policyID: string) => `settings/workspaces/${policyID}/profile/name` as const, @@ -1219,8 +1239,10 @@ const ROUTES = { TRANSACTION_RECEIPT: { route: 'r/:reportID/transaction/:transactionID/receipt', - getRoute: (reportID: string, transactionID: string, readonly = false) => `r/${reportID}/transaction/${transactionID}/receipt${readonly ? '?readonly=true' : ''}` as const, + getRoute: (reportID: string, transactionID: string, readonly = false, isFromReviewDuplicates = false) => + `r/${reportID}/transaction/${transactionID}/receipt?readonly=${readonly}${isFromReviewDuplicates ? '&isFromReviewDuplicates=true' : ''}` as const, }, + TRANSACTION_DUPLICATE_REVIEW_PAGE: { route: 'r/:threadReportID/duplicates/review', getRoute: (threadReportID: string, backTo?: string) => getUrlWithBackToParam(`r/${threadReportID}/duplicates/review` as const, backTo), diff --git a/src/SCREENS.ts b/src/SCREENS.ts index e199a69d92ee..d246eec31f66 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -316,6 +316,8 @@ const SCREENS = { QUICKBOOKS_ONLINE_ADVANCED: 'Policy_Accounting_Quickbooks_Online_Advanced', QUICKBOOKS_ONLINE_ACCOUNT_SELECTOR: 'Policy_Accounting_Quickbooks_Online_Account_Selector', QUICKBOOKS_ONLINE_INVOICE_ACCOUNT_SELECTOR: 'Policy_Accounting_Quickbooks_Online_Invoice_Account_Selector', + QUICKBOOKS_DESKTOP_EXPORT_DATE_SELECT: 'Workspace_Accounting_Quickbooks_Desktop_Export_Date_Select', + QUICKBOOKS_DESKTOP_EXPORT_PREFERRED_EXPORTER: 'Workspace_Accounting_Quickbooks_Desktop_Export_Preferred_Exporter', QUICKBOOKS_DESKTOP_EXPORT_OUT_OF_POCKET_EXPENSES: 'Workspace_Accounting_Quickbooks_Desktop_Export_Out_Of_Pocket_Expenses', QUICKBOOKS_DESKTOP_EXPORT_OUT_OF_POCKET_EXPENSES_SELECT: 'Workspace_Accounting_Quickbooks_Desktop_Export_Out_Of_Pocket_Expenses_Select', QUICKBOOKS_DESKTOP_EXPORT_OUT_OF_POCKET_EXPENSES_ACCOUNT_SELECT: 'Workspace_Accounting_Quickbooks_Desktop_Export_Out_Of_Pocket_Expenses_Account_Select', @@ -324,6 +326,9 @@ const SCREENS = { QUICKBOOKS_DESKTOP_SETUP_REQUIRED_DEVICE_MODAL: 'Policy_Accouting_Quickbooks_Desktop_Setup_Required_Device_Modal', QUICKBOOKS_DESKTOP_TRIGGER_FIRST_SYNC: 'Policy_Accouting_Quickbooks_Desktop_Trigger_First_Sync', QUICKBOOKS_DESKTOP_IMPORT: 'Policy_Accounting_Quickbooks_Desktop_Import', + QUICKBOOKS_DESKTOP_CHART_OF_ACCOUNTS: 'Policy_Accounting_Quickbooks_Desktop_Import_Chart_Of_Accounts', + QUICKBOOKS_DESKTOP_CLASSES: 'Policy_Accounting_Quickbooks_Desktop_Import_Classes', + QUICKBOOKS_DESKTOP_CLASSES_DISPLAYED_AS: 'Policy_Accounting_Quickbooks_Desktop_Import_Classes_Dipslayed_As', 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/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 9b5d21743bef..8ccab44a2cb9 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -9,6 +9,7 @@ import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate'; import * as ErrorUtils from '@libs/ErrorUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -22,10 +23,8 @@ import Avatar from './Avatar'; import ConfirmModal from './ConfirmModal'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import type {MenuItemProps} from './MenuItem'; -import MenuItemList from './MenuItemList'; -import type {MenuItemWithLink} from './MenuItemList'; -import Popover from './Popover'; +import type {PopoverMenuItem} from './PopoverMenu'; +import PopoverMenu from './PopoverMenu'; import {PressableWithFeedback} from './Pressable'; import Text from './Text'; @@ -41,6 +40,7 @@ function AccountSwitcher() { const [session] = useOnyx(ONYXKEYS.SESSION); const [user] = useOnyx(ONYXKEYS.USER); const buttonRef = useRef(null); + const {windowHeight} = useWindowDimensions(); const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false); const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false); @@ -49,10 +49,14 @@ function AccountSwitcher() { const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false; const canSwitchAccounts = canUseNewDotCopilot && (delegators.length > 0 || isActingAsDelegate); - const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, errors?: Errors, additionalProps: MenuItemWithLink = {}): MenuItemWithLink => { + const createBaseMenuItem = ( + personalDetails: PersonalDetails | undefined, + errors?: Errors, + additionalProps: Partial> = {}, + ): PopoverMenuItem => { const error = Object.values(errors ?? {}).at(0) ?? ''; return { - title: personalDetails?.displayName ?? personalDetails?.login, + text: personalDetails?.displayName ?? personalDetails?.login ?? '', description: Str.removeSMSDomain(personalDetails?.login ?? ''), avatarID: personalDetails?.accountID ?? -1, icon: personalDetails?.avatar ?? '', @@ -66,14 +70,12 @@ function AccountSwitcher() { }; }; - const menuItems = (): MenuItemProps[] => { + const menuItems = (): PopoverMenuItem[] => { const currentUserMenuItem = createBaseMenuItem(currentUserPersonalDetails, undefined, { - wrapperStyle: [styles.buttonDefaultBG], - focused: true, shouldShowRightIcon: true, iconRight: Expensicons.Checkmark, success: true, - key: `${currentUserPersonalDetails?.login}-current`, + isSelected: true, }); if (isActingAsDelegate) { @@ -89,34 +91,32 @@ function AccountSwitcher() { return [ createBaseMenuItem(delegatePersonalDetails, error, { - onPress: () => { + onSelected: () => { if (isOffline) { Modal.close(() => setShouldShowOfflineModal(true)); return; } disconnect(); }, - key: `${delegateEmail}-delegate`, }), currentUserMenuItem, ]; } - const delegatorMenuItems: MenuItemProps[] = delegators + const delegatorMenuItems: PopoverMenuItem[] = delegators .filter(({email}) => email !== currentUserPersonalDetails.login) - .map(({email, role, errorFields}, index) => { + .map(({email, role, errorFields}) => { const error = ErrorUtils.getLatestErrorField({errorFields}, 'connect'); const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email); return createBaseMenuItem(personalDetails, error, { badgeText: translate('delegate.role', {role}), - onPress: () => { + onSelected: () => { if (isOffline) { Modal.close(() => setShouldShowOfflineModal(true)); return; } connect(email); }, - key: `${email}-${index}`, }); }); @@ -181,23 +181,27 @@ function AccountSwitcher() { {canSwitchAccounts && ( - { setShouldShowDelegatorMenu(false); clearDelegatorErrors(); }} anchorRef={buttonRef} - anchorPosition={styles.accountSwitcherAnchorPosition} - > - - {translate('delegate.switchAccount')} - - - + anchorPosition={CONST.POPOVER_ACCOUNT_SWITCHER_POSITION} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + menuItems={menuItems()} + headerText={translate('delegate.switchAccount')} + containerStyles={[{maxHeight: windowHeight / 2}, styles.pb0, styles.mw100, shouldUseNarrowLayout ? {} : styles.wFitContent]} + headerStyles={styles.pt0} + innerContainerStyle={styles.pb0} + scrollContainerStyle={styles.pb4} + shouldUseScrollView + shouldUpdateFocusedIndex={false} + /> )} = []; const excludeReportMentionStyle: Array = ['mentionReport']; @@ -39,7 +38,6 @@ function Composer( selection, value, isGroupPolicyReport = false, - showSoftInputOnFocus = true, ...props }: ComposerProps, ref: ForwardedRef, @@ -52,11 +50,7 @@ function Composer( const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const [contextMenuHidden, setContextMenuHidden] = useState(true); - const {inputCallbackRef, inputRef: autoFocusInputRef} = useAutoFocusInput(); - const keyboardState = useKeyboardState(); - const isKeyboardShown = keyboardState?.isKeyboardShown ?? false; useEffect(() => { if (autoFocus === !!autoFocusInputRef.current) { @@ -116,13 +110,6 @@ function Composer( const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]); const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]); - useEffect(() => { - if (!showSoftInputOnFocus || !isKeyboardShown) { - return; - } - setContextMenuHidden(false); - }, [showSoftInputOnFocus, isKeyboardShown]); - return ( ); } diff --git a/src/components/Composer/implementation/index.tsx b/src/components/Composer/implementation/index.tsx new file mode 100755 index 000000000000..4431007793cb --- /dev/null +++ b/src/components/Composer/implementation/index.tsx @@ -0,0 +1,368 @@ +import type {MarkdownStyle} from '@expensify/react-native-live-markdown'; +import lodashDebounce from 'lodash/debounce'; +import type {BaseSyntheticEvent, ForwardedRef} from 'react'; +import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; +// eslint-disable-next-line no-restricted-imports +import type {NativeSyntheticEvent, TextInput, TextInputKeyPressEventData, TextInputSelectionChangeEventData} from 'react-native'; +import {DeviceEventEmitter, StyleSheet} from 'react-native'; +import type {ComposerProps} from '@components/Composer/types'; +import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; +import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; +import useHtmlPaste from '@hooks/useHtmlPaste'; +import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible'; +import useMarkdownStyle from '@hooks/useMarkdownStyle'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; +import * as Browser from '@libs/Browser'; +import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; +import * as EmojiUtils from '@libs/EmojiUtils'; +import * as FileUtils from '@libs/fileDownload/FileUtils'; +import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; +import CONST from '@src/CONST'; + +const excludeNoStyles: Array = []; +const excludeReportMentionStyle: Array = ['mentionReport']; +const imagePreviewAuthRequiredURLs = [CONST.EXPENSIFY_URL, CONST.STAGING_EXPENSIFY_URL]; + +// Enable Markdown parsing. +// On web we like to have the Text Input field always focused so the user can easily type a new chat +function Composer( + { + value, + defaultValue, + maxLines = -1, + onKeyPress = () => {}, + style, + autoFocus = false, + shouldCalculateCaretPosition = false, + isDisabled = false, + onClear = () => {}, + onPasteFile = () => {}, + onSelectionChange = () => {}, + setIsFullComposerAvailable = () => {}, + checkComposerVisibility = () => false, + selection: selectionProp = { + start: 0, + end: 0, + }, + isComposerFullSize = false, + shouldContainScroll = true, + isGroupPolicyReport = false, + ...props + }: ComposerProps, + ref: ForwardedRef, +) { + const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]); + const theme = useTheme(); + const styles = useThemeStyles(); + const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles); + const StyleUtils = useStyleUtils(); + const textInput = useRef(null); + const [selection, setSelection] = useState< + | { + start: number; + end?: number; + positionX?: number; + positionY?: number; + } + | undefined + >({ + start: selectionProp.start, + end: selectionProp.end, + }); + const [isRendered, setIsRendered] = useState(false); + const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? ''); + const [prevScroll, setPrevScroll] = useState(); + const isReportFlatListScrolling = useRef(false); + + useEffect(() => { + if (!!selection && selectionProp.start === selection.start && selectionProp.end === selection.end) { + return; + } + setSelection(selectionProp); + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, [selectionProp]); + + /** + * Adds the cursor position to the selection change event. + */ + const addCursorPositionToSelectionChange = (event: NativeSyntheticEvent) => { + const webEvent = event as BaseSyntheticEvent; + const sel = window.getSelection(); + if (shouldCalculateCaretPosition && isRendered && sel) { + const range = sel.getRangeAt(0).cloneRange(); + range.collapse(true); + const rect = range.getClientRects()[0] || range.startContainer.parentElement?.getClientRects()[0]; + const containerRect = textInput.current?.getBoundingClientRect(); + + let x = 0; + let y = 0; + if (rect && containerRect) { + x = rect.left - containerRect.left; + y = rect.top - containerRect.top + (textInput?.current?.scrollTop ?? 0) - rect.height / 2; + } + + const selectionValue = { + start: webEvent.nativeEvent.selection.start, + end: webEvent.nativeEvent.selection.end, + positionX: x - CONST.SPACE_CHARACTER_WIDTH, + positionY: y, + }; + + onSelectionChange({ + ...webEvent, + nativeEvent: { + ...webEvent.nativeEvent, + selection: selectionValue, + }, + }); + setSelection(selectionValue); + } else { + onSelectionChange(webEvent); + setSelection(webEvent.nativeEvent.selection); + } + }; + + /** + * Check the paste event for an attachment, parse the data and call onPasteFile from props with the selected file, + * Otherwise, convert pasted HTML to Markdown and set it on the composer. + */ + const handlePaste = useCallback( + (event: ClipboardEvent) => { + const isVisible = checkComposerVisibility(); + const isFocused = textInput.current?.isFocused(); + const isContenteditableDivFocused = document.activeElement?.nodeName === 'DIV' && document.activeElement?.hasAttribute('contenteditable'); + + if (!(isVisible || isFocused)) { + return true; + } + + if (textInput.current !== event.target && !(isContenteditableDivFocused && !event.clipboardData?.files.length)) { + const eventTarget = event.target as HTMLInputElement | HTMLTextAreaElement | null; + // To make sure the composer does not capture paste events from other inputs, we check where the event originated + // If it did originate in another input, we return early to prevent the composer from handling the paste + const isTargetInput = eventTarget?.nodeName === 'INPUT' || eventTarget?.nodeName === 'TEXTAREA' || eventTarget?.contentEditable === 'true'; + if (isTargetInput || (!isFocused && isContenteditableDivFocused && event.clipboardData?.files.length)) { + return true; + } + + textInput.current?.focus(); + } + + event.preventDefault(); + + const TEXT_HTML = 'text/html'; + + const clipboardDataHtml = event.clipboardData?.getData(TEXT_HTML) ?? ''; + + // If paste contains files, then trigger file management + if (event.clipboardData?.files.length && event.clipboardData.files.length > 0) { + // Prevent the default so we do not post the file name into the text box + onPasteFile(event.clipboardData.files[0]); + return true; + } + + // If paste contains base64 image + if (clipboardDataHtml?.includes(CONST.IMAGE_BASE64_MATCH)) { + const domparser = new DOMParser(); + const pastedHTML = clipboardDataHtml; + const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML)?.images; + + if (embeddedImages.length > 0 && embeddedImages[0].src) { + const src = embeddedImages[0].src; + const file = FileUtils.base64ToFile(src, 'image.png'); + onPasteFile(file); + return true; + } + } + + // If paste contains image from Google Workspaces ex: Sheets, Docs, Slide, etc + if (clipboardDataHtml?.includes(CONST.GOOGLE_DOC_IMAGE_LINK_MATCH)) { + const domparser = new DOMParser(); + const pastedHTML = clipboardDataHtml; + const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images; + + if (embeddedImages.length > 0 && embeddedImages[0]?.src) { + const src = embeddedImages[0].src; + if (src.includes(CONST.GOOGLE_DOC_IMAGE_LINK_MATCH)) { + fetch(src) + .then((response) => response.blob()) + .then((blob) => { + const file = new File([blob], 'image.jpg', {type: 'image/jpeg'}); + onPasteFile(file); + }); + return true; + } + } + } + return false; + }, + [onPasteFile, checkComposerVisibility], + ); + + useEffect(() => { + if (!textInput.current) { + return; + } + const debouncedSetPrevScroll = lodashDebounce(() => { + if (!textInput.current) { + return; + } + setPrevScroll(textInput.current.scrollTop); + }, 100); + + textInput.current.addEventListener('scroll', debouncedSetPrevScroll); + return () => { + textInput.current?.removeEventListener('scroll', debouncedSetPrevScroll); + }; + }, []); + + useEffect(() => { + const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling: boolean) => { + isReportFlatListScrolling.current = scrolling; + }); + + return () => scrollingListener.remove(); + }, []); + + useEffect(() => { + const handleWheel = (e: MouseEvent) => { + if (isReportFlatListScrolling.current) { + e.preventDefault(); + return; + } + e.stopPropagation(); + }; + textInput.current?.addEventListener('wheel', handleWheel, {passive: false}); + + return () => { + textInput.current?.removeEventListener('wheel', handleWheel); + }; + }, []); + + useEffect(() => { + if (!textInput.current || prevScroll === undefined) { + return; + } + // eslint-disable-next-line react-compiler/react-compiler + textInput.current.scrollTop = prevScroll; + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, [isComposerFullSize]); + + useHtmlPaste(textInput, handlePaste, true); + + useEffect(() => { + setIsRendered(true); + }, []); + + const clear = useCallback(() => { + if (!textInput.current) { + return; + } + + const currentText = textInput.current.value; + textInput.current.clear(); + + // We need to reset the selection to 0,0 manually after clearing the text input on web + const selectionEvent = { + nativeEvent: { + selection: { + start: 0, + end: 0, + }, + }, + } as NativeSyntheticEvent; + onSelectionChange(selectionEvent); + setSelection({start: 0, end: 0}); + + onClear(currentText); + }, [onClear, onSelectionChange]); + + useImperativeHandle( + ref, + () => { + const textInputRef = textInput.current; + if (!textInputRef) { + throw new Error('textInputRef is not available. This should never happen and indicates a developer error.'); + } + + return { + ...textInputRef, + // Overwrite clear with our custom implementation, which mimics how the native TextInput's clear method works + clear, + // We have to redefine these methods as they are inherited by prototype chain and are not accessible directly + blur: () => textInputRef.blur(), + focus: () => textInputRef.focus(), + get scrollTop() { + return textInputRef.scrollTop; + }, + }; + }, + [clear], + ); + + const handleKeyPress = useCallback( + (e: NativeSyntheticEvent) => { + // Prevent onKeyPress from being triggered if the Enter key is pressed while text is being composed + if (!onKeyPress || isEnterWhileComposition(e as unknown as KeyboardEvent)) { + return; + } + + onKeyPress(e); + }, + [onKeyPress], + ); + + const scrollStyleMemo = useMemo(() => { + if (shouldContainScroll) { + return isScrollBarVisible ? [styles.overflowScroll, styles.overscrollBehaviorContain] : styles.overflowHidden; + } + return styles.overflowAuto; + }, [shouldContainScroll, styles.overflowAuto, styles.overflowScroll, styles.overscrollBehaviorContain, styles.overflowHidden, isScrollBarVisible]); + + const inputStyleMemo = useMemo( + () => [ + StyleSheet.flatten([style, {outline: 'none'}]), + StyleUtils.getComposeTextAreaPadding(isComposerFullSize), + Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {}, + scrollStyleMemo, + StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), + isComposerFullSize ? {height: '100%', maxHeight: 'none'} : undefined, + textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}, + ], + + [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis], + ); + + return ( + (textInput.current = el)} + selection={selection} + style={[inputStyleMemo]} + markdownStyle={markdownStyle} + value={value} + defaultValue={defaultValue} + autoFocus={autoFocus} + /* eslint-disable-next-line react/jsx-props-no-spreading */ + {...props} + onSelectionChange={addCursorPositionToSelectionChange} + onContentSizeChange={(e) => { + updateIsFullComposerAvailable({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles); + }} + disabled={isDisabled} + onKeyPress={handleKeyPress} + addAuthTokenToImageURLCallback={addEncryptedAuthTokenToURL} + imagePreviewAuthRequiredURLs={imagePreviewAuthRequiredURLs} + /> + ); +} + +Composer.displayName = 'Composer'; + +export default React.forwardRef(Composer); diff --git a/src/components/Composer/index.e2e.tsx b/src/components/Composer/index.e2e.tsx new file mode 100644 index 000000000000..38cf065f7b8e --- /dev/null +++ b/src/components/Composer/index.e2e.tsx @@ -0,0 +1,19 @@ +import type {ForwardedRef} from 'react'; +import React from 'react'; +import type {TextInput} from 'react-native'; +import Composer from './implementation'; +import type {ComposerProps} from './types'; + +function ComposerE2E(props: ComposerProps, ref: ForwardedRef) { + return ( + + ); +} + +export default React.forwardRef(ComposerE2E); diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx old mode 100755 new mode 100644 index 26eb0f960c61..d9474effa478 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -1,370 +1,3 @@ -import type {MarkdownStyle} from '@expensify/react-native-live-markdown'; -import lodashDebounce from 'lodash/debounce'; -import type {BaseSyntheticEvent, ForwardedRef} from 'react'; -import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; -// eslint-disable-next-line no-restricted-imports -import type {NativeSyntheticEvent, TextInput, TextInputKeyPressEventData, TextInputSelectionChangeEventData} from 'react-native'; -import {DeviceEventEmitter, StyleSheet} from 'react-native'; -import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; -import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; -import useHtmlPaste from '@hooks/useHtmlPaste'; -import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible'; -import useMarkdownStyle from '@hooks/useMarkdownStyle'; -import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; -import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; -import * as Browser from '@libs/Browser'; -import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; -import * as EmojiUtils from '@libs/EmojiUtils'; -import * as FileUtils from '@libs/fileDownload/FileUtils'; -import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; -import CONST from '@src/CONST'; -import type {ComposerProps} from './types'; +import Composer from './implementation'; -const excludeNoStyles: Array = []; -const excludeReportMentionStyle: Array = ['mentionReport']; -const imagePreviewAuthRequiredURLs = [CONST.EXPENSIFY_URL, CONST.STAGING_EXPENSIFY_URL]; - -// Enable Markdown parsing. -// On web we like to have the Text Input field always focused so the user can easily type a new chat -function Composer( - { - value, - defaultValue, - maxLines = -1, - onKeyPress = () => {}, - style, - autoFocus = false, - shouldCalculateCaretPosition = false, - isDisabled = false, - onClear = () => {}, - onPasteFile = () => {}, - onSelectionChange = () => {}, - setIsFullComposerAvailable = () => {}, - checkComposerVisibility = () => false, - selection: selectionProp = { - start: 0, - end: 0, - }, - isComposerFullSize = false, - shouldContainScroll = true, - isGroupPolicyReport = false, - showSoftInputOnFocus = true, - ...props - }: ComposerProps, - ref: ForwardedRef, -) { - const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]); - const theme = useTheme(); - const styles = useThemeStyles(); - const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles); - const StyleUtils = useStyleUtils(); - const textInput = useRef(null); - const [selection, setSelection] = useState< - | { - start: number; - end?: number; - positionX?: number; - positionY?: number; - } - | undefined - >({ - start: selectionProp.start, - end: selectionProp.end, - }); - const [isRendered, setIsRendered] = useState(false); - const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? ''); - const [prevScroll, setPrevScroll] = useState(); - const isReportFlatListScrolling = useRef(false); - - useEffect(() => { - if (!!selection && selectionProp.start === selection.start && selectionProp.end === selection.end) { - return; - } - setSelection(selectionProp); - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, [selectionProp]); - - /** - * Adds the cursor position to the selection change event. - */ - const addCursorPositionToSelectionChange = (event: NativeSyntheticEvent) => { - const webEvent = event as BaseSyntheticEvent; - const sel = window.getSelection(); - if (shouldCalculateCaretPosition && isRendered && sel) { - const range = sel.getRangeAt(0).cloneRange(); - range.collapse(true); - const rect = range.getClientRects()[0] || range.startContainer.parentElement?.getClientRects()[0]; - const containerRect = textInput.current?.getBoundingClientRect(); - - let x = 0; - let y = 0; - if (rect && containerRect) { - x = rect.left - containerRect.left; - y = rect.top - containerRect.top + (textInput?.current?.scrollTop ?? 0) - rect.height / 2; - } - - const selectionValue = { - start: webEvent.nativeEvent.selection.start, - end: webEvent.nativeEvent.selection.end, - positionX: x - CONST.SPACE_CHARACTER_WIDTH, - positionY: y, - }; - - onSelectionChange({ - ...webEvent, - nativeEvent: { - ...webEvent.nativeEvent, - selection: selectionValue, - }, - }); - setSelection(selectionValue); - } else { - onSelectionChange(webEvent); - setSelection(webEvent.nativeEvent.selection); - } - }; - - /** - * Check the paste event for an attachment, parse the data and call onPasteFile from props with the selected file, - * Otherwise, convert pasted HTML to Markdown and set it on the composer. - */ - const handlePaste = useCallback( - (event: ClipboardEvent) => { - const isVisible = checkComposerVisibility(); - const isFocused = textInput.current?.isFocused(); - const isContenteditableDivFocused = document.activeElement?.nodeName === 'DIV' && document.activeElement?.hasAttribute('contenteditable'); - - if (!(isVisible || isFocused)) { - return true; - } - - if (textInput.current !== event.target && !(isContenteditableDivFocused && !event.clipboardData?.files.length)) { - const eventTarget = event.target as HTMLInputElement | HTMLTextAreaElement | null; - // To make sure the composer does not capture paste events from other inputs, we check where the event originated - // If it did originate in another input, we return early to prevent the composer from handling the paste - const isTargetInput = eventTarget?.nodeName === 'INPUT' || eventTarget?.nodeName === 'TEXTAREA' || eventTarget?.contentEditable === 'true'; - if (isTargetInput || (!isFocused && isContenteditableDivFocused && event.clipboardData?.files.length)) { - return true; - } - - textInput.current?.focus(); - } - - event.preventDefault(); - - const TEXT_HTML = 'text/html'; - - const clipboardDataHtml = event.clipboardData?.getData(TEXT_HTML) ?? ''; - - // If paste contains files, then trigger file management - if (event.clipboardData?.files.length && event.clipboardData.files.length > 0) { - // Prevent the default so we do not post the file name into the text box - onPasteFile(event.clipboardData.files[0]); - return true; - } - - // If paste contains base64 image - if (clipboardDataHtml?.includes(CONST.IMAGE_BASE64_MATCH)) { - const domparser = new DOMParser(); - const pastedHTML = clipboardDataHtml; - const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML)?.images; - - if (embeddedImages.length > 0 && embeddedImages[0].src) { - const src = embeddedImages[0].src; - const file = FileUtils.base64ToFile(src, 'image.png'); - onPasteFile(file); - return true; - } - } - - // If paste contains image from Google Workspaces ex: Sheets, Docs, Slide, etc - if (clipboardDataHtml?.includes(CONST.GOOGLE_DOC_IMAGE_LINK_MATCH)) { - const domparser = new DOMParser(); - const pastedHTML = clipboardDataHtml; - const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images; - - if (embeddedImages.length > 0 && embeddedImages[0]?.src) { - const src = embeddedImages[0].src; - if (src.includes(CONST.GOOGLE_DOC_IMAGE_LINK_MATCH)) { - fetch(src) - .then((response) => response.blob()) - .then((blob) => { - const file = new File([blob], 'image.jpg', {type: 'image/jpeg'}); - onPasteFile(file); - }); - return true; - } - } - } - return false; - }, - [onPasteFile, checkComposerVisibility], - ); - - useEffect(() => { - if (!textInput.current) { - return; - } - const debouncedSetPrevScroll = lodashDebounce(() => { - if (!textInput.current) { - return; - } - setPrevScroll(textInput.current.scrollTop); - }, 100); - - textInput.current.addEventListener('scroll', debouncedSetPrevScroll); - return () => { - textInput.current?.removeEventListener('scroll', debouncedSetPrevScroll); - }; - }, []); - - useEffect(() => { - const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling: boolean) => { - isReportFlatListScrolling.current = scrolling; - }); - - return () => scrollingListener.remove(); - }, []); - - useEffect(() => { - const handleWheel = (e: MouseEvent) => { - if (isReportFlatListScrolling.current) { - e.preventDefault(); - return; - } - e.stopPropagation(); - }; - textInput.current?.addEventListener('wheel', handleWheel, {passive: false}); - - return () => { - textInput.current?.removeEventListener('wheel', handleWheel); - }; - }, []); - - useEffect(() => { - if (!textInput.current || prevScroll === undefined) { - return; - } - // eslint-disable-next-line react-compiler/react-compiler - textInput.current.scrollTop = prevScroll; - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, [isComposerFullSize]); - - useHtmlPaste(textInput, handlePaste, true); - - useEffect(() => { - setIsRendered(true); - }, []); - - const clear = useCallback(() => { - if (!textInput.current) { - return; - } - - const currentText = textInput.current.value; - textInput.current.clear(); - - // We need to reset the selection to 0,0 manually after clearing the text input on web - const selectionEvent = { - nativeEvent: { - selection: { - start: 0, - end: 0, - }, - }, - } as NativeSyntheticEvent; - onSelectionChange(selectionEvent); - setSelection({start: 0, end: 0}); - - onClear(currentText); - }, [onClear, onSelectionChange]); - - useImperativeHandle( - ref, - () => { - const textInputRef = textInput.current; - if (!textInputRef) { - throw new Error('textInputRef is not available. This should never happen and indicates a developer error.'); - } - - return { - ...textInputRef, - // Overwrite clear with our custom implementation, which mimics how the native TextInput's clear method works - clear, - // We have to redefine these methods as they are inherited by prototype chain and are not accessible directly - blur: () => textInputRef.blur(), - focus: () => textInputRef.focus(), - get scrollTop() { - return textInputRef.scrollTop; - }, - }; - }, - [clear], - ); - - const handleKeyPress = useCallback( - (e: NativeSyntheticEvent) => { - // Prevent onKeyPress from being triggered if the Enter key is pressed while text is being composed - if (!onKeyPress || isEnterWhileComposition(e as unknown as KeyboardEvent)) { - return; - } - - onKeyPress(e); - }, - [onKeyPress], - ); - - const scrollStyleMemo = useMemo(() => { - if (shouldContainScroll) { - return isScrollBarVisible ? [styles.overflowScroll, styles.overscrollBehaviorContain] : styles.overflowHidden; - } - return styles.overflowAuto; - }, [shouldContainScroll, styles.overflowAuto, styles.overflowScroll, styles.overscrollBehaviorContain, styles.overflowHidden, isScrollBarVisible]); - - const inputStyleMemo = useMemo( - () => [ - StyleSheet.flatten([style, {outline: 'none'}]), - StyleUtils.getComposeTextAreaPadding(isComposerFullSize), - Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {}, - scrollStyleMemo, - StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), - isComposerFullSize ? {height: '100%', maxHeight: 'none'} : undefined, - textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}, - ], - - [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis], - ); - - return ( - (textInput.current = el)} - selection={selection} - style={[inputStyleMemo]} - markdownStyle={markdownStyle} - value={value} - defaultValue={defaultValue} - autoFocus={autoFocus} - inputMode={showSoftInputOnFocus ? 'text' : 'none'} - /* eslint-disable-next-line react/jsx-props-no-spreading */ - {...props} - onSelectionChange={addCursorPositionToSelectionChange} - onContentSizeChange={(e) => { - updateIsFullComposerAvailable({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles); - }} - disabled={isDisabled} - onKeyPress={handleKeyPress} - addAuthTokenToImageURLCallback={addEncryptedAuthTokenToURL} - imagePreviewAuthRequiredURLs={imagePreviewAuthRequiredURLs} - /> - ); -} - -Composer.displayName = 'Composer'; - -export default React.forwardRef(Composer); +export default Composer; diff --git a/src/components/Composer/types.ts b/src/components/Composer/types.ts index 7f54c7486e8d..ef497dd52e47 100644 --- a/src/components/Composer/types.ts +++ b/src/components/Composer/types.ts @@ -74,9 +74,6 @@ type ComposerProps = Omit & { /** Indicates whether the composer is in a group policy report. Used for disabling report mentioning style in markdown input */ isGroupPolicyReport?: boolean; - - /** Whether the soft keyboard is open */ - showSoftInputOnFocus?: boolean; }; export type {TextSelection, ComposerProps, CustomSelectionChangeEvent}; diff --git a/src/components/DelegateNoAccessModal.tsx b/src/components/DelegateNoAccessModal.tsx index 8b708459c122..442c3ec9c4e2 100644 --- a/src/components/DelegateNoAccessModal.tsx +++ b/src/components/DelegateNoAccessModal.tsx @@ -15,13 +15,11 @@ export default function DelegateNoAccessModal({isNoDelegateAccessMenuVisible = f const {translate} = useLocalize(); const noDelegateAccessPromptStart = translate('delegate.notAllowedMessageStart', {accountOwnerEmail: delegatorEmail}); const noDelegateAccessHyperLinked = translate('delegate.notAllowedMessageHyperLinked'); - const noDelegateAccessPromptEnd = translate('delegate.notAllowedMessageEnd'); const delegateNoAccessPrompt = ( {noDelegateAccessPromptStart} - {noDelegateAccessHyperLinked} - {noDelegateAccessPromptEnd} + {noDelegateAccessHyperLinked}. ); diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx index 89b9fc9a9e16..ce4f3380a9b7 100644 --- a/src/components/MagicCodeInput.tsx +++ b/src/components/MagicCodeInput.tsx @@ -277,8 +277,10 @@ function MagicCodeInput( const indexBeforeLastEditIndex = editIndex === 0 ? editIndex : editIndex - 1; const indexToFocus = numbers.at(editIndex) === CONST.MAGIC_CODE_EMPTY_CHAR ? indexBeforeLastEditIndex : editIndex; - const formElement = inputRefs.current as HTMLFormElement | null; - (formElement?.[indexToFocus] as HTMLInputElement)?.focus(); + if (indexToFocus !== undefined) { + lastFocusedIndex.current = indexToFocus; + inputRefs.current?.focus(); + } onChangeTextProp(value.substring(0, indexToFocus)); return; @@ -314,6 +316,7 @@ function MagicCodeInput( onChangeTextProp(composeToString(numbers)); if (newFocusedIndex !== undefined) { + lastFocusedIndex.current = newFocusedIndex; inputRefs.current?.focus(); } } diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 42ac08f567b6..b1aa2fc28338 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -1,8 +1,9 @@ +/* eslint-disable react/jsx-props-no-spreading */ import lodashIsEqual from 'lodash/isEqual'; import type {RefObject} from 'react'; -import React, {useLayoutEffect, useState} from 'react'; -import {StyleSheet} from 'react-native'; -import type {View} from 'react-native'; +import React, {Fragment, useLayoutEffect, useState} from 'react'; +import {StyleSheet, View} from 'react-native'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {ModalProps} from 'react-native-modal'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; @@ -67,7 +68,7 @@ type PopoverMenuProps = Partial & { isVisible: boolean; /** Callback to fire when a CreateMenu item is selected */ - onItemSelected: (selectedItem: PopoverMenuItem, index: number) => void; + onItemSelected?: (selectedItem: PopoverMenuItem, index: number) => void; /** Menu items to be rendered on the list */ menuItems: PopoverMenuItem[]; @@ -107,6 +108,24 @@ type PopoverMenuProps = Partial & { /** Whether to show the selected option checkmark */ shouldShowSelectedItemCheck?: boolean; + + /** The style of content container which wraps all child views */ + containerStyles?: StyleProp; + + /** Used to apply styles specifically to the header text */ + headerStyles?: StyleProp; + + /** Modal container styles */ + innerContainerStyle?: ViewStyle; + + /** These styles will be applied to the scroll view content container which wraps all of the child views */ + scrollContainerStyle?: StyleProp; + + /** Whether we should wrap the list item in a scroll view */ + shouldUseScrollView?: boolean; + + /** Whether to update the focused index on a row select */ + shouldUpdateFocusedIndex?: boolean; }; function PopoverMenu({ @@ -132,6 +151,12 @@ function PopoverMenu({ shouldEnableNewFocusManagement, restoreFocusType, shouldShowSelectedItemCheck = false, + containerStyles, + headerStyles, + innerContainerStyle, + scrollContainerStyle, + shouldUseScrollView = false, + shouldUpdateFocusedIndex = true, }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -143,6 +168,7 @@ function PopoverMenu({ const {windowHeight} = useWindowDimensions(); const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible}); + const WrapComponent = shouldUseScrollView ? ScrollView : Fragment; const selectItem = (index: number) => { const selectedItem = currentMenuItems.at(index); @@ -155,7 +181,7 @@ function PopoverMenu({ const selectedSubMenuItemIndex = selectedItem?.subMenuItems.findIndex((option) => option.isSelected); setFocusedIndex(selectedSubMenuItemIndex); } else if (selectedItem.shouldCallAfterModalHide && !Browser.isSafari()) { - onItemSelected(selectedItem, index); + onItemSelected?.(selectedItem, index); Modal.close( () => { selectedItem.onSelected?.(); @@ -164,7 +190,7 @@ function PopoverMenu({ selectedItem.shouldCloseAllModals, ); } else { - onItemSelected(selectedItem, index); + onItemSelected?.(selectedItem, index); selectedItem.onSelected?.(); } }; @@ -210,7 +236,7 @@ function PopoverMenu({ if (!headerText || enteredSubMenuIndexes.length !== 0) { return; } - return {headerText}; + return {headerText}; }; useKeyboardShortcut( @@ -263,61 +289,46 @@ function PopoverMenu({ shouldEnableNewFocusManagement={shouldEnableNewFocusManagement} useNativeDriver restoreFocusType={restoreFocusType} + innerContainerStyle={innerContainerStyle} > - + {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} - {currentMenuItems.map((item, menuIndex) => ( - - selectItem(menuIndex)} - focused={focusedIndex === menuIndex} - displayInDefaultIconColor={item.displayInDefaultIconColor} - shouldShowRightIcon={item.shouldShowRightIcon} - shouldShowRightComponent={item.shouldShowRightComponent} - iconRight={item.iconRight} - rightComponent={item.rightComponent} - shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon} - label={item.label} - style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} - isLabelHoverable={item.isLabelHoverable} - floatRightAvatars={item.floatRightAvatars} - floatRightAvatarSize={item.floatRightAvatarSize} - shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar} - disabled={item.disabled} - onFocus={() => setFocusedIndex(menuIndex)} - success={item.success} - containerStyle={item.containerStyle} - shouldRenderTooltip={item.shouldRenderTooltip} - tooltipAnchorAlignment={item.tooltipAnchorAlignment} - tooltipShiftHorizontal={item.tooltipShiftHorizontal} - tooltipShiftVertical={item.tooltipShiftVertical} - tooltipWrapperStyle={item.tooltipWrapperStyle} - renderTooltipContent={item.renderTooltipContent} - numberOfLinesTitle={item.numberOfLinesTitle} - interactive={item.interactive} - isSelected={item.isSelected} - badgeText={item.badgeText} - /> - - ))} - + {/** eslint-disable-next-line react/jsx-props-no-spreading */} + + {currentMenuItems.map((item, menuIndex) => { + const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; + return ( + + selectItem(menuIndex)} + focused={focusedIndex === menuIndex} + shouldShowSelectedItemCheck={shouldShowSelectedItemCheck} + shouldCheckActionAllowedOnPress={false} + onFocus={() => { + if (!shouldUpdateFocusedIndex) { + return; + } + setFocusedIndex(menuIndex); + }} + style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} + titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} + // eslint-disable-next-line react/jsx-props-no-spreading + {...menuItemProps} + /> + + ); + })} + + ); @@ -328,7 +339,7 @@ PopoverMenu.displayName = 'PopoverMenu'; export default React.memo( PopoverMenu, (prevProps, nextProps) => - prevProps.menuItems.length === nextProps.menuItems.length && + lodashIsEqual(prevProps.menuItems, nextProps.menuItems) && prevProps.isVisible === nextProps.isVisible && lodashIsEqual(prevProps.anchorPosition, nextProps.anchorPosition) && prevProps.anchorRef === nextProps.anchorRef && diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx index 2d18ccb480b8..0bf7e370e480 100644 --- a/src/components/RadioButton.tsx +++ b/src/components/RadioButton.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import {View} from 'react-native'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; @@ -36,17 +35,16 @@ function RadioButton({isChecked, onPress, accessibilityLabel, hasError = false, pressDimmingValue={1} accessibilityLabel={accessibilityLabel} role={CONST.ROLE.RADIO} + style={[styles.radioButtonContainer, hasError && styles.borderColorDanger, disabled && styles.cursorDisabled]} > - - {isChecked && ( - - )} - + {isChecked && ( + + )} ); } diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 9a0861962637..5dc56caa0ff6 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -56,6 +56,9 @@ type MoneyRequestViewProps = { /** Whether we should show Money Request with disabled all fields */ readonly?: boolean; + /** whether or not this report is from review duplicates */ + isFromReviewDuplicates?: boolean; + /** Updated transaction to show in duplicate transaction flow */ updatedTransaction?: OnyxEntry; }; @@ -75,7 +78,7 @@ const getTransactionID = (report: OnyxEntry, parentReportActio return originalMessage?.IOUTransactionID ?? -1; }; -function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = false, updatedTransaction}: MoneyRequestViewProps) { +function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = false, updatedTransaction, isFromReviewDuplicates = false}: MoneyRequestViewProps) { const theme = useTheme(); const styles = useThemeStyles(); const session = useSession(); @@ -508,6 +511,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals transaction={updatedTransaction ?? transaction} enablePreviewModal readonly={readonly || !canEditReceipt} + isFromReviewDuplicates={isFromReviewDuplicates} /> )} diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index d967a914c9f9..668338440f73 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -55,6 +55,9 @@ type ReportActionItemImageProps = { /** Whether the receipt is not editable */ readonly?: boolean; + + /** whether or not this report is from review duplicates */ + isFromReviewDuplicates?: boolean; }; /** @@ -75,6 +78,7 @@ function ReportActionItemImage({ isSingleImage = true, readonly = false, shouldMapHaveBorderRadius, + isFromReviewDuplicates = false, }: ReportActionItemImageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -135,7 +139,12 @@ function ReportActionItemImage({ style={[styles.w100, styles.h100, styles.noOutline as ViewStyle]} onPress={() => Navigation.navigate( - ROUTES.TRANSACTION_RECEIPT.getRoute(transactionThreadReport?.reportID ?? report?.reportID ?? '-1', transaction?.transactionID ?? '-1', readonly), + ROUTES.TRANSACTION_RECEIPT.getRoute( + transactionThreadReport?.reportID ?? report?.reportID ?? '-1', + transaction?.transactionID ?? '-1', + readonly, + isFromReviewDuplicates, + ), ) } accessibilityLabel={translate('accessibilityHints.viewAttachment')} diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index f10951f2b1a0..4cd0341a2718 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -134,16 +134,9 @@ function ReportPreview({ const iouSettled = ReportUtils.isSettled(iouReportID) || action?.childStatusNum === CONST.REPORT.STATUS_NUM.REIMBURSED; const previewMessageOpacity = useSharedValue(1); const previewMessageStyle = useAnimatedStyle(() => ({ - ...styles.flex1, - ...styles.flexRow, - ...styles.alignItemsCenter, opacity: previewMessageOpacity.value, })); const checkMarkScale = useSharedValue(iouSettled ? 1 : 0); - const checkMarkStyle = useAnimatedStyle(() => ({ - ...styles.defaultCheckmarkWrapper, - transform: [{scale: checkMarkScale.value}], - })); const moneyRequestComment = action?.childLastMoneyRequestComment ?? ''; const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport); @@ -471,7 +464,7 @@ function ReportPreview({ - + {previewMessage} {shouldShowRBR && ( @@ -493,7 +486,7 @@ function ReportPreview({ {getDisplayAmount()} {iouSettled && ( - + {hasAssignee && ( - + + + + + )} {taskTitle} 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 ec43c9762239..4c383021645f 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -373,7 +373,6 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) {