diff --git a/android/app/build.gradle b/android/app/build.gradle index a18e1ddf7efa..db251e681e64 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -90,8 +90,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1001038105 - versionName "1.3.81-5" + versionCode 1001038107 + versionName "1.3.81-7" } flavorDimensions "default" diff --git a/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md b/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md index 842fa711ba15..f4f591d10e8e 100644 --- a/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md +++ b/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md @@ -43,7 +43,7 @@ Example: For the test case steps we're asking to be created by the contributor whose PR solved the bug, it'll fall into a category known as bug fix verification. As such, the steps that should be proposed should contain the action element `Verify` and should be tied to the expected behavior in question. The steps should be broken out by individual actions taking place with the written style of communicating exact steps someone will replicate. As such, simplicity and succinctness is key. -Here are some below examples to illustrate the writing style that covers this: +Below are some examples to illustrate the writing style that covers this: - Bug: White space appears under compose box when scrolling up in any conversation - Proposed Test Steps: - Go to URL https://staging.new.expensify.com/ diff --git a/desktop/ELECTRON_EVENTS.js b/desktop/ELECTRON_EVENTS.js index 6a808bdb99aa..ee8c0521892e 100644 --- a/desktop/ELECTRON_EVENTS.js +++ b/desktop/ELECTRON_EVENTS.js @@ -6,7 +6,7 @@ const ELECTRON_EVENTS = { REQUEST_FOCUS_APP: 'requestFocusApp', REQUEST_UPDATE_BADGE_COUNT: 'requestUpdateBadgeCount', REQUEST_VISIBILITY: 'requestVisibility', - SHOW_KEYBOARD_SHORTCUTS_MODAL: 'show-keyboard-shortcuts-modal', + KEYBOARD_SHORTCUTS_PAGE: 'keyboard-shortcuts-page', START_UPDATE: 'start-update', UPDATE_DOWNLOADED: 'update-downloaded', }; diff --git a/desktop/contextBridge.js b/desktop/contextBridge.js index 3f2748ef05b5..a8b89cdc0b64 100644 --- a/desktop/contextBridge.js +++ b/desktop/contextBridge.js @@ -11,7 +11,7 @@ const WHITELIST_CHANNELS_RENDERER_TO_MAIN = [ ELECTRON_EVENTS.LOCALE_UPDATED, ]; -const WHITELIST_CHANNELS_MAIN_TO_RENDERER = [ELECTRON_EVENTS.SHOW_KEYBOARD_SHORTCUTS_MODAL, ELECTRON_EVENTS.UPDATE_DOWNLOADED, ELECTRON_EVENTS.FOCUS, ELECTRON_EVENTS.BLUR]; +const WHITELIST_CHANNELS_MAIN_TO_RENDERER = [ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE, ELECTRON_EVENTS.UPDATE_DOWNLOADED, ELECTRON_EVENTS.FOCUS, ELECTRON_EVENTS.BLUR]; const getErrorMessage = (channel) => `Electron context bridge cannot be used with channel '${channel}'`; diff --git a/desktop/main.js b/desktop/main.js index 36b70b37afc5..f2c11e73e513 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -174,11 +174,11 @@ const manuallyCheckForUpdates = (menuItem, browserWindow) => { * Trigger event to show keyboard shortcuts * @param {BrowserWindow} browserWindow */ -const showKeyboardShortcutsModal = (browserWindow) => { +const showKeyboardShortcutsPage = (browserWindow) => { if (!browserWindow.isVisible()) { return; } - browserWindow.webContents.send(ELECTRON_EVENTS.SHOW_KEYBOARD_SHORTCUTS_MODAL); + browserWindow.webContents.send(ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE); }; // Actual auto-update listeners @@ -330,9 +330,9 @@ const mainWindow = () => { { id: 'viewShortcuts', label: Localize.translate(preferredLocale, `desktopApplicationMenu.viewShortcuts`), - accelerator: 'CmdOrCtrl+I', + accelerator: 'CmdOrCtrl+J', click: () => { - showKeyboardShortcutsModal(browserWindow); + showKeyboardShortcutsPage(browserWindow); }, }, {type: 'separator'}, diff --git a/docs/articles/expensify-classic/account-settings/Merge-Accounts.md b/docs/articles/expensify-classic/account-settings/Merge-Accounts.md index 073c74346d75..7fc355b30bd9 100644 --- a/docs/articles/expensify-classic/account-settings/Merge-Accounts.md +++ b/docs/articles/expensify-classic/account-settings/Merge-Accounts.md @@ -1,5 +1,33 @@ --- title: Merge Accounts -description: Merge Accounts +description: How to merge two Expensify accounts and why this is useful. --- -## Resource Coming Soon! + +# Overview + +Merging accounts allows you to combine two accounts. When you combine two accounts, all receipts, expenses, expense reports, invoices, bills, imported cards, secondary logins, co-pilots, and group policy settings will be combined into one account. +This can be useful if you start off with an account of your own but your organization creates a separate account for you. You can then track both personal and business expenses via one account. + +# How to merge accounts +Merging two accounts together is fairly straightforward. Let’s go over how to do that below: +1. Navigate to [expensify.com](https://www.expensify.com) +2. Log into the account you want to set as the Primary account +3. Navigate to Settings > Account > Account Details +4. Scroll down to the Merge Accounts section and fill in the fields. Once you click Merge, a magic code link will be sent to you via email and you'll be prompted to enter the magic code +5. Copy the magic code, switch back to the expensify.com page, and paste the code into the required field +6. Click Merge Accounts +If you have any questions about this process, feel free to reach out to Concierge for some assistance! + +# FAQ +## Can you merge accounts from the mobile app? +No, accounts can only be merged from the full website at expensify.com. +## Can I administratively merge two accounts together? +No, only the account holder (user) can perform account merging. +## Is merging accounts reversible? +No, merging accounts is not reversible. It is a permanent action that cannot be undone. +## Are there any restrictions on account merging? +Yes! Please see below: +* If your email address belongs to a verified domain (verified in Expensify), you must start the process from the email account under the verified domain. You cannot merge a verified company email account into a personal account. +* If you have two accounts with two different verified domains, you cannot merge them together. +## What happens to my “personal” Individual policy when merging accounts? +The old “personal” Individual policy will be deleted. If you plan to submit reports under a different policy in the future, ensure that any reports on the Individual policy in the old account are marked as Open before merging the accounts. You can typically do this by selecting “Undo Submit” on any submitted reports. diff --git a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Commercial-Card-Feeds.md b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Commercial-Card-Feeds.md index 25d11561755d..741def35581e 100644 --- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Commercial-Card-Feeds.md +++ b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Commercial-Card-Feeds.md @@ -2,4 +2,117 @@ title: Commercial Card Feeds description: Commercial Card Feeds --- -## Resource Coming Soon! +# Overview +A Commercial Card Feed is a connection that’s established directly between Expensify and your bank. This type of connection is considered the most reliable way to import company card expenses. Commercial Card Feeds cannot be interrupted by common changes on the bank’s side such as updating login credentials or a change in the bank’s UI. + +The easiest way to confirm if your company card program is eligible for a commercial bank feed is to ask your bank directly. If your company uses a commercial card program that isn’t with one of our Approved! Banking Partners (which supports connecting the feed via login credentials), the best way to import your company cards is by setting up a direct Commercial Card Feed between Expensify and your bank. + +# How to set up a Commercial Card Feed +Before setting up a Commercial Card Feed, you’ll want to set up your domain in Expensify. You can do this by going to Settings > Domains > New Domain. + +After the domain is set up in Expensify, you can follow the instructions that correspond with your company’s card program. + +# How to set up a MasterCard Commercial Feed +Your bank will need to access MasterCard's SmartData portal to complete the process. Expensify is a registered vendor in the portal, so neither you, your bank, nor Expensify need to complete any MasterCard forms. (Your bank may have its own form between you and the bank, though.) + +These are the steps you'll need to follow for a MasterCard feed: +- Contact your banking relationship manager and request that your CDF (Common Data File) feed be sent directly to Expensify in the MasterCard SmartData Portal (file type: CDF version 3 Release 11.01). Please also specify the date of the earliest transactions you require in the feed. +- The bank will initiate feed delivery by finding Expensify in MasterCard's online portal. Once this is done, the bank will email you the distribution ID. +- While you're waiting for your bank, make sure to set up a domain in Expensify -- it's required for us to be able to add the card feed to your account! +- Once you have the distribution ID, send it to us using the submission form here. +- We will connect the feed once we receive the file details and notify you when the feed is enabled. + +# How to set up a Visa Commercial Feed +These are the steps you'll need to follow for a Visa feed: +- Contact your banking relationship manager and request that your VCF (Variant Call Format) feed be sent directly to Expensify. Feel free to share this information with them: "There is a check box in your bank's Visa Subscription Management portal that they, or their BPS team, can select to enable the feed. This means there is no need for a test file because Visa already has agreements with 3rd parties who receive the files." +- Ask your bank to send you the "feed filename" OR the raw file information. You'll need the Processor, Financial Institution (Bank), and Company IDs; these are available in Visa Subscription Management if your relationship manager is still looking for them. +- Once you have the file information, send it to us using the submission form here. +- While you're waiting for your bank, make sure to set up a domain -- it's required for us to be able to add the feed to your account! +- We will connect the feed once we receive these details and notify you when the feed is enabled. + +# How to set up an American Express corporate feed +To begin the process, you'll need to fill out Amex's required forms and send them to Amex so they can start processing your feed. You can download the forms here. + +Below are instructions for filling out each page of the Amex form: +- PAGE 1 + - Corporation Name = the legal name of your company on file with American Express + - Corporation Address = the legal address of your company + - Requested Feed Start Date = the date you want transactional data to start feeding into Expensify. If you'd like historical data, be sure to date back as far as you'd prefer. You must put this date in an international date format (i.e., DD/MM/YY or spelled out January 1, 1900) to ensure the correct date. + - Requestor Contact = the name of the individual party completing the request + - Email address = the email address of the individual party completing the request + - Control Account Number = the master or basic control account number corresponding to the cards you'd like to be on the feed. Please note this will not be a credit card number. If you need help with the correct control account number, please contact Amex. +- PAGE 2 + - No information required +- PAGE 3 + - Client Registered Name = the legal name of your company on file with American Express + - Master Control Account or Basic Control Account = same as from page 1; the master or basic control account number corresponding to the cards you'd like to be on the feed. Please note this will not be a credit card number. If you need help with the correct control account number, please contact Amex. +- PAGE 4 + - Country List = the name of the country in which the account for which you're requesting a feed originates + - Client Authorization = please complete your full first and last name, job title, and date (note, put this date in an international date format--i.e., DD/MM/YY). Sign in the area provided. + +Once you've completed the forms, send them to electronictransmissionsteam@aexp.com and indicate you want to set up a Commercial Card feed for your company. You should receive a confirmation message from them within a day or two with contact and tracking information. + +While you're waiting for Amex, make sure to set up a domain -- it's required for us to be able to add the feed to your account. + +Once the feed is complete, Amex will send you a Production Letter. This will have the feed information in it, which will look something like this: +R123456_B123456789_GL1025_001_$DATE$$TIME$_$SEQ$ + +Once you have the filename, send it to us using the submission form here. + +# How to assign company cards +After connecting your company cards with Expensify, you can assign each card to its respective cardholder. +To assign cards go to Settings > Domains > [Your domain] > Company Cards. +If you have more than one card feed, select the correct feed in the drop-down list in the Company Card section. +Once you’ve selected the appropriate feed, click the `Assign New Cards` button to populate the emails and last four digits of the cardholder. +Select the cardholder +You can search the populated list for all employees' email addresses. Please note that the employee will need to have an email address under this Domain in order to assign a card to them. +Select the card +You can search the list using the last 4 digits of the card number. If no transactions have posted on the card then the card number will not appear in the list. You can instead assign the card by typing in the full card number in the field. +Note: if you're assigning a card by typing in the full PAN (the full card number), press the ENTER key on your keyboard after. The field may clear itself after pressing ENTER, but click Assign anyway and then verify that the assignment shows up in the cardholder table. + +## Set the transaction start date (optional) +Any transactions that were posted prior to this date will not be imported into Expensify. If you do not make a selection, it will default to the earliest available transactions from the card. Note: We can only import data for the time period the bank is releasing to us. It's not possible to override the start date the bank has provided via this tool. + +Click the Assign button +Once assigned, you will see each cardholder associated with their card as well as the start date listed. + +If you're using a connected accounting system such as NetSuite, Xero, Intacct, Quickbooks Desktop, or QuickBooks Online, you can also connect the card to export to a specific credit card GL account. + +Go to Settings > Domains > [Domain name] > Company Cards +Click Edit Exports on the right-hand side of the card table and select the GL account you want to export expenses to. +You're all done. After the account is set, exported expenses will be mapped to the specific account selected when exported by a Domain Admin. + +# How to unassign company cards +Before you begin the unassigning process, please note that unassigning a company card will delete any unsubmitted (Open or Unreported) expenses in the cardholder's account. + +If you need to unassign a certain card, click the Actions button associated with the card in question and then click "Unassign." + +To completely remove the card connection, unassign every card from the list and then refresh the page. + +Note: If expenses are Processing and then rejected, they will also be deleted when they're returned to an Open state as the card they're linked to no longer exists. + +# FAQ + +## My Commercial Card feed is set up. Why is a specific card not coming up when I try to assign it to an employee? +Cards will appear in the drop-down when activated and have at least one posted transaction. If the card is activated and has been used for a while and you're still not seeing it, please reach out to your Account Manager or message concierge@expensify.com for further assistance. + +## Is there a fee for utilizing Commercial Card Feeds? +Nope! Commercial Card Feed setup comes at no extra cost and is a part of the Corporate Workspace pricing. + +## What is the difference between Commercial Card feeds and your direct bank connections? +The direct bank connection is a connection set up with your login credentials for that account, while the Commercial Card feed is set up by your bank requesting that Visa/MasterCard/Amex send a daily transaction feed to Expensify. The former can be done without the assistance of your bank or Expensify, but the latter requires effort from your bank and Expensify to get set up. + +## I have a Small Business Amex account. Am I eligible to set up a Commercial Card feed? +If you have a Small Business or Triumph account, you may not be eligible for a Commercial Card feed and will need to use the direct bank connection for American Express Business. + +## What if my bank uses a Commercial Card program that isn't with one of Expensify's Approved! Banking partners? +If your company uses a Commercial Card program that isn’t with one of our Approved! Banking Partners (which supports connecting the feed via login credentials), the best way to import your company cards is by setting up a direct Commercial Card feed between Expensify and your bank. Note the Approved! Banking Partners include: +- Bank of America +- Citibank +- Capital One +- Chase +- Wells Fargo +- Amex +- Stripe +- Brex + diff --git a/docs/articles/expensify-classic/billing-and-subscriptions/Change-Plan-Or-Subscription.md b/docs/articles/expensify-classic/billing-and-subscriptions/Change-Plan-Or-Subscription.md index 8ce4283dd17d..f01bb963bacf 100644 --- a/docs/articles/expensify-classic/billing-and-subscriptions/Change-Plan-Or-Subscription.md +++ b/docs/articles/expensify-classic/billing-and-subscriptions/Change-Plan-Or-Subscription.md @@ -1,5 +1,84 @@ --- -title: Change Plan or Subscription -description: Change Plan or Subscription +title: Changing your workspace plan +description: How to change your plan or subscription --- -## Resource Coming Soon! +# Overview +Expensify offers various plans depending on your needs: Track, Submit, Collect, Control, and Free. Your choice of plan depends on whether you want to manage your expenses individually or for a group or company. You may need to upgrade from an individual plan to a group plan if you recently hired additional employees that need should be added to a Group Workspace, or you need access to Expensify's features that are only available on a paid plan. + +# How to change a subscription on an Individual Plan +## Change Individual Plan +### Web +1. Go to **Settings > Workspaces > Individual > [Your Individual Workspace]** +1. Click on **Plan** and select **Switch** under the plan you want to switch to +### Mobile +Open the Expensify app and: +1. Tap the hamburger icon (three lines) on the top left +1. Tap **Settings** +1. Tap **View All** under your Workspace +1. Select the Workspace you want to change under the "Individual" tab +1. Tap **Current Plan** under **Plan** +1. Find the **Switch** option under the plan you're not currently using +## Upgrade to a Group Plan +To upgrade to a group plan, you will need to create a Group Workspace by heading to **Settings > Workspaces > Group** and choosing a Collect or Control plan. + +# How to change a subscription on a Group Plan +## Change Group Plan +## Web +1. Go to **Settings > Workspaces > Group > [Your Group Workspace]** +1. Click on **Plan** and select **Switch** under the plan you want to switch to. + +## Mobile +1. In the Expensify mobile app, navigate to **Settings > Workspaces > [Your Workspace] > Current Plan > Switch**. + +## Adjust subscription size +When you first create a subscription, you can manually set your size by entering a number in the Subscription Size field of your subscription settings by heading to **Settings > Workspaces > Group > Subscription**. + +If you choose not to set a size yourself, it will be calculated automatically for your first bill based on your depending on which scenario below fits your use case: +- If you’ve never had activity in Expensify, your subscription size is set automatically to match the number of active users you had your first month of using Expensify on your Annual Subscription. This means you’ll see the number update automatically after your first billing. +- For existing Workspaces switching to an annual subscription, the subscription size is set to the number of active users on your last month’s billing history. + +## Auto increase subscription size +This feature manages your subscription by automatically increasing the count whenever there is activity that exceeds your subscription size. Whenever your subscription size is increased, you will start a new 12-month commitment for the new subscription size in full. + +To enable automatically increasing your subscription size, head to **Settings > Workspaces > Group > Subscription** and toggle this feature on. + +## Auto renew +By default, your subscription is set to automatically renew after a year. To disable this, head to **Settings > Workspaces > Subscription** and use the toggle to turn this feature off before your current subscription ends. + +If Auto Renew is disabled then the last bill at the annual rate will be issued on the date listed under the Auto Renew settings. + +# How to downgrade to a free account from an Individual Plan +## Web +1. Log in to your account through a web browser. +1. Go to **Settings > Policies > Individual > Subscription**. +1. Click "Cancel Subscription" to end your Monthly Subscription. + +Note: Your subscription is a pre-purchase for 30 days of unlimited SmartScanning. This means that when you cancel, you do not get a refund and instead get to use the remainder of the month of unlimited SmartScanning you purchased. + +## App Store +If you subscribed via iOS, you must cancel your monthly subscription through the App Store by heading to App Store > click on your ID > Subscriptions. You can't cancel it directly in Expensify. + +# How to downgrade to a free account from a Group Plan +## Pay-per-use +If you have a Group Workspace and use Pay-Per-Use billing, you can downgrade by going to **Settings > Workspaces > Group** and clicking the cog button next to your Workspace name, then choosing **Delete**. + +Note: Deleting a Workspace removes its configurations and Workspace members but not their Expensify accounts. + +When deleting your final paid Workspace, if any Workspace members have been active that month (this means anybody who created, edited, submitted, approved, exported, or deleted a report) you will be billed for their activity as part of the downgrade flow. + +## Annual subscription +If you recently started an annual subscription, you can downgrade for a full refund before the second bill. If you meet the criteria below, you can request a refund by going to **Settings > Your Account > Billing** in the web app: +- Own Collect or Control Group Workspaces +- Have only been billed for a single month +- Have not cleared a balance in the past + +Note: Refunds apply to Collect or Control Group Workspaces with one month of billing and no previous balance. + +Once you’ve successfully downgraded to a free Expensify account, your Workspace will be deleted and you will see a refund line item added to your Billing History. + +# FAQ +## Will I be charged for a monthly subscription even if I don't use SmartScans? +Yes, the Monthly Subscription is prepaid and not based on activity, so you'll be charged regardless of usage. + +## I'm on a group policy; do I need the monthly subscription too? +Probably not. Group policy members already have unlimited SmartScans, so there's usually no need to buy the subscription. However, you can use it for personal use if you leave your company's Workspace. diff --git a/docs/articles/expensify-classic/expense-and-report-features/The-Reports-Page.md b/docs/articles/expensify-classic/expense-and-report-features/The-Reports-Page.md index e72abfcad51a..ff9e2105ffac 100644 --- a/docs/articles/expensify-classic/expense-and-report-features/The-Reports-Page.md +++ b/docs/articles/expensify-classic/expense-and-report-features/The-Reports-Page.md @@ -1,5 +1,43 @@ --- title: The Reports Page -description: The Reports Page +description: Details about the Reports Page filters and CSV export options --- -## Resource Coming Soon! + +## How to use the Reports Page +The Reports page is your central hub for a high-level view of a Reports' status. You can see the Reports page on a web browser when you sign into your Expensify account. +Here, you can quickly see which reports need submission (referred to as **Open**), which are currently awaiting approval (referred to as **Processing**), and which reports have successfully been **Approved** or **Reimbursed**. +To streamline your experience, we've incorporated user-friendly filters on the Reports page. These filters allow you to refine your report search by specific criteria, such as dates, submitters, or their association with a workspace. + +## Report filters +- **Reset Filters/Show Filters:** You can reset or display your filters at the top of the Reports page. +- **From & To:** Use these fields to refine your search to a specific date range. +- **Report ID, Name, or Email:** Narrow your search by entering a Report ID, Report Name, or the submitter's email. +- **Report Types:** If you're specifically looking for Bills or Invoices, you can select this option. +- **Submitters:** Choose between "All Submitters" or enter a specific employee's email to view their reports. +- **Policies:** Select "All Policies" or specify a particular policy associated with the reports you're interested in. + +## Report status +- **Open icon:** These reports are still "In Progress" and must be submitted by the creator. If they contain company card expenses, a domain admin can submit them. If labeled as “Rejected," an Approver has rejected it, typically requiring some adjustments. Click into the report and review the History for any comments from your Approver. +- **Processing icon:** These reports have been submitted for Approval but have not received the final approval. +- **Approved icon:** Reports in this category have been Approved but have yet to be Reimbursed. For non-reimbursable reports, this is the final status. +- **Reimbursed icon:** These reports have been successfully Reimbursed. If you see "Withdrawing," it means the ACH (Automated Clearing House) process is initiated. "Confirmed" indicates the ACH process is in progress or complete. No additional status means your Admin is handling reimbursement outside of Expensify. +- **Closed icon:** This status represents an officially closed report. + + +## How to Export a report to a CSV +To export a report to a CSV file, follow these steps on the Reports page: + +1. Click the checkbox on the far left of the report row you want to export. +2. Navigate to the upper right corner of the page and click the "Export to" button. +3. From the drop-down options that appear, select your preferred export format. + +# FAQ +## What does it mean if the integration icon for a report is grayed out? +If the integration icon for a report appears grayed out, the report has yet to be fully exported. +To address this, consider these options: +- Go to **Settings > Policies > Group > Connections** within the workspace associated with the report to check for any errors with the accounting integration (i.e., The connection to NetSuite, QuickBooks Online, Xero, Sage Intacct shows an error). +- Alternatively, click the “Sync Now" button on the Connections page to see if any error prevents the export. + +## How can I see a specific expense on a report? +To locate a specific expense within a report, click on the Report from the Reports page and then click on an expense to view the expense details. + diff --git a/docs/articles/expensify-classic/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md b/docs/articles/expensify-classic/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md deleted file mode 100644 index 507d24503af8..000000000000 --- a/docs/articles/expensify-classic/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Enable Location Access on Web -description: How to enable location access for Expensify websites on your browser -redirect_from: articles/other/Enable-Location-Access-on-Web/ ---- - - -# About - -If you'd like to use features that rely on your current location you will need to enable location permissions for Expensify. You can find instructions for how to enable location settings on the three most common web browsers below. If your browser is not in the list then please do a web search for your browser and "enable location settings". - -# How-to - - -### Chrome -1. Open Chrome -2. At the top right, click the three-dot Menu > Settings -3. Click "Privacy and Security" and then "Site Settings" -4. Click Location -5. Check the "Not allowed to see your location" list to make sure expensify.com and new.expensify.com are not listed. If they are, click the delete icon next to them to allow location access - -[Chrome help page](https://support.google.com/chrome/answer/142065) - -### Firefox - -1. Open Firefox -2. In the URL bar enter "about:preferences" -3. On the left hand side select "Privacy & Security" -4. Scroll down to Permissions -5. Click on Settings next to Location -6. If location access is blocked for expensify.com or new.expensify.com, you can update it here to allow access - -[Firefox help page](https://support.mozilla.org/en-US/kb/permissions-manager-give-ability-store-passwords-set-cookies-more) - -### Safari -1. In the top menu bar click Safari -2. Then select Settings > Websites -3. Click Location on the left hand side -4. If expensify.com or new.expensify.com have "Deny" set as their access, update it to "Ask" or "Allow" - -Ask: The site must ask if it can use your location. -Deny: The site can’t use your location. -Allow: The site can always use your location. - -[Safari help page](https://support.apple.com/guide/safari/websites-ibrwe2159f50/mac) \ No newline at end of file diff --git a/docs/articles/expensify-classic/integrations/HR-integrations/ADP.md b/docs/articles/expensify-classic/integrations/HR-integrations/ADP.md index 3ee1c8656b4b..65b276796c2a 100644 --- a/docs/articles/expensify-classic/integrations/HR-integrations/ADP.md +++ b/docs/articles/expensify-classic/integrations/HR-integrations/ADP.md @@ -1,5 +1,81 @@ --- -title: Coming Soon -description: Coming Soon +title: How to use the ADP integration +description: Expensify’s ADP integration lets you pay out expense reports outside of the Expensify platform. Expensify creates a Custom Export Format that can be uploaded to ADP directly. --- -## Resource Coming Soon! +# Overview +Expensify’s ADP integration lets you pay out expense reports outside of the Expensify platform. Expensify creates a Custom Export Format that can be uploaded to ADP directly. + +You’ll need to be on the Control Plan to create a Custom Export Format. + +Your employee list in ADP can also be imported into Expensify via Expensify’s People table in CSV format, which will speed up the process of importing the correct values to sync up your employee’s reports with ADP. This feature is available on all plans. + +# How to use the ADP integration + +## Step 1: Set up the ADP import file + +A basic setup for an ADP import file includes five columns. In order (from left to right), these columns are: + +- **Company Code** - See “Edit Company” page in ADP +- **Batch ID** - Found in “Edit Company” +- **File #** - Employee number in ADP +- **Earnings 3 Code** - See “Edit Profit Center Group” page +- **Earnings 3 Amount** - Found in “Edit Profit Center Group” + +There is a **File #** for each employee that you’re tracking in **Expensify** located under “**RUN Powered by ADP**” - navigate to **Reports tab > Tax Reports > Wage > Tax Register**. + +In **Expensify**, the **File #** is entered in the **Custom Field 1 or 2** column in the **Members table**. +The **Earnings 3 Code** is the ADP code that corresponds to a payroll account you’re tracking in **Expensify**. The **Earnings 3 Amount** is the total of a given expense you’re sending to payroll. + +In **Expensify**, you can enter the **Earnings 3 Code** at **Settings > Workspaces > [Group Workspace Name] > Categories > Categories [Category Name] > Edit Rules > Add under Payroll Code**. + +## Step 2:Create your ADP Export Format + +For a basic setup, visit **Settings > Workspaces > [Group Workspace Name] > Export Formats** and add these column headings and corresponding formulas: + +- **Name:** Company Code + - **Formula:** [From Step 1.] + +- **Name:** BatchID + - **Formula:** [From Step 1.] + +- **Name:** File # + - **Formula:** {report:submit.from:customfield1} + +- **Name:** Earnings 3 Code + - **Formula:** {expense:category:payrollcode} + +- **Name:** Earnings 3 Amount + - **Formula:** {expense:amount} + +The Company Code column is hardcoded with your company’s code in ADP. Similarly, the Batch ID is hard coded with whatever Batch ID your company is using in ADP. + +## Step 3.:Export to CSV or XLS + +To export the file, do the following: + +1. Go to your "Reports" page in Expensify +2. Select the reports you want to export +3. Click "Export to..." and choose your custom ADP format +4. Your download will begin automatically and be delivered in CSV or XLS format + +## Step 4: Upload to ADP + +You should be able to upload your ADP file directly to ADP without any changes. + +# Deep Dive + +## Using the ADP integration + +You can set Custom Fields and Payroll Codes in bulk using a CSV upload in Expensify’s settings pages. + +If you have additional requirements for your ADP upload, for example, additional headings or datasets, reach out to your Expensify Account Manager who will assist you in customizing your ADP export. Expensify Account Managers are trained to accommodate your data requests and help you retrieve them from the system. + +# FAQ + +- Do I need to convert my employee list into new column headings so I can upload it to Expensify? + +Yes, you’ll need to convert your ADP employee data to the same headings as the spreadsheet that can be downloaded from the Members table in Expensify. + +- Can I add special fields/items to my ADP Payroll Custom Export Format? + +Yes! You can ask your Expensify Account Manager to help you prepare your ADP Payroll export so that it meets your specific requirements. Just reach out to them via the Chat option in Expensify and they’ll help you get set up. diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/Accelo.md b/docs/articles/expensify-classic/integrations/accounting-integrations/Accelo.md new file mode 100644 index 000000000000..fffe0abb43aa --- /dev/null +++ b/docs/articles/expensify-classic/integrations/accounting-integrations/Accelo.md @@ -0,0 +1,74 @@ +--- +title: Accelo +description: Help doc for Accelo integration +--- + + +# Overview +Accelo is a cloud-based business management software platform tailored for professional service companies, offering streamlined operations. It enables seamless integration with Expensify, allowing users to effortlessly import expense details from Expensify into Accelo, associating them with the corresponding project, ticket, or retainer within the system. + +# How to Connect Expensify to Accelo +To connect Expensify to Accelo, follow these clear steps: + +## Prerequisites +Ensure you have administrator access to Accelo. +Have a Workspace Admin role in Expensify. + +## Connecting Expensify to Accelo +1. Access the Expensify Integration Server: +- Open the Expensify Integration Server. +2. Retrieve Your Partner User ID and Partner User Secret: +- Important: These credentials are distinct from your regular Expensify username and password. +- If you haven't previously set up the integration server, click where it indicates "click here." +3. Regenerating Partner User Secret (If Necessary): +- Note: If you've previously configured the integration server, you must regenerate your Partner User Secret. Do this by clicking "click here" to regenerate your partnerUserSecret. +- If you currently use the Integration Server/API for another integration, remember to update that integration to use the new Secret. +4. Configure Accelo: +- Return to your Accelo account. +- Navigate to your Integrations page and select the Expensify tab. +5. Enter Expensify Integration Server Credentials: +- Provide your Expensify Integration Server's Partner User ID and Partner User Secret. +- Click "Save" to complete the setup. +6. Connection Established: +- Congratulations! Your Expensify account is now successfully connected to Accelo. + +With this connection in place, all Expensify users can effortlessly synchronize their expenses with Accelo, streamlining their workflow and improving efficiency. + +## How to upload your Accelo Project Codes as Tags in Expensify +Once you have connected Accelo to Expensify, the next step is to upload your Accelo Project Codes as Tags in Expensify. Simply go to Go to **Settings** > **Workspaces** > **Group** > _[Workspace Name]_ > **Tags** and upload your CSV. +If you directly integrate with Xero or QuickBooks Online, you must upload your Project Codes by appending your tags. Go to **Settings** > **Workspaces** > **Group** > _[Workspace Name]_ > **Tags** and click on “Append a custom tag list from a CSV” to upload your Project Codes via a CSV. + +# Deep Dive +## Information sync between Expensify and Accelo +The Accelo integration does a one-way sync, which means it brings expenses from Expensify into Accelo. When this happens, it transfers specific information from Expensify expenses to Accelo: + +| Expensify | Accelo | +|---------------------|-----------------------| +| Comment | Title | +| Date | Date Incurred | +| Category | Type | +| Tags | Against (relevant Project, Ticket or Retainer) | +| Distance (mileage) | Quantity | +| Hours (time expenses) | Quantity | +| Amount | Purchase Price and Sale Price | +| Reimbursable? | Reimbursable? | +| Billable? | Billable? | +| Receipt | Attachment | +| Tax Rate | Tax Code | +| Attendees | Submitted By | + +## Expense Status +The status of your expense report in Expensify is also synced in Accelo. + +| Expensify Report Status | Accelo Expense Status | +|-------------------------|-----------------------| +| Open | Submitted | +| Submitted | Submitted | +| Approved | Approved | +| Reimbursed | Approved | +| Rejected | Declined | +| Archived | Approved | +| Closed | Approved | + +## Importing expenses from Expensify to Accelo +Accelo regularly checks Expensify for new expenses once every hour. It automatically brings in expenses that have been created or changed since the last sync. diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/NetSuite.md b/docs/articles/expensify-classic/integrations/accounting-integrations/NetSuite.md index 3ee1c8656b4b..8092ed9c6dd6 100644 --- a/docs/articles/expensify-classic/integrations/accounting-integrations/NetSuite.md +++ b/docs/articles/expensify-classic/integrations/accounting-integrations/NetSuite.md @@ -1,5 +1,575 @@ --- -title: Coming Soon -description: Coming Soon +title: NetSuite +description: Connect and configure NetSuite directly to Expensify. --- -## Resource Coming Soon! +# Overview +Expensify's seamless integration with NetSuite enables you to streamline your expense reporting process. This integration allows you to automate the export of reports, tailor your coding preferences, and tap into NetSuite's array of advanced features. By correctly configuring your NetSuite settings in Expensify, you can leverage the connection's settings to automate most of the tasks, making your workflow more efficient. + +Before getting started with connecting NetSuite to Expensify, there are a few things to note: +- Token-based authentication works by ensuring that each request to NetSuite is accompanied by a signed token which is verified for authenticity +- You must be able to login to NetSuite as an administrator to initiate the connection +- You must have a Control Plan in Expensify to integrate with NetSuite +- Employees don’t need NetSuite access or a NetSuite license to submit expense reports since the connection is managed by the Workspace Admin +- Each NetSuite subsidiary will need its own Expensify Group Workspace +- Ensure that your workspace's report output currency setting matches the NetSuite Subsidiary default currency +- Make sure your page size is set to 1000 for importing your customers and vendors. Go to Setup > Integration > Web Services Preferences > 'Search Page Size' + +# How to Connect to NetSuite + +## Step 1: Install the Expensify Bundle in NetSuite + +1. While logged into NetSuite as an administrator, go to Customization > SuiteBundler > Search & Install Bundles, then search for "Expensify" +2. Click on the Expensify Connect bundle (Bundle ID 283395) +3. Click Install +4. If you already have the Expensify Connect bundle installed, head to _Customization > SuiteBundler > Search & Install Bundles > List_ and update it to the latest version +5. Select **Show on Existing Custom Forms** for all available fields + +## Step 2: Enable Token-Based Authentication + +1. Head to _Setup > Company > Enable Features > SuiteCloud > Manage Authentication_ +2. Make sure “Token Based Authentication” is enabled +3. Click **Save** + +## Step 3: Add Expensify Integration Role to a User + +The user you select must have access to at least the permissions included in the Expensify Integration Role, but they're not required to be an Admin. +1. In NetSuite, head to Lists > Employees, and find the user you want to add the Expensify Integration role to +2. Click _Edit > Access_, then find the Expensify Integration role in the dropdown and add it to the user +3. Click **Save** + +Remember that Tokens are linked to a User and a Role, not solely to a User. It's important to note that you cannot establish a connection with tokens using one role and then switch to another role afterward. Once you've initiated a connection with tokens, you must continue using the same token/user/role combination for all subsequent sync or export actions. + +## Step 4: Create Access Tokens + +1. Using Global Search in NetSuite, enter “page: tokens” +2. Click **New Access Token** +3. Select Expensify as the application (this must be the original Expensify integration from the bundle) +4. Select the role Expensify Integration +5. Press **Save** +6. Copy and Paste the token and token ID to a saved location on your computer (this is the only time you will see these details) + +## Step 5: Confirm Expense Reports are Enabled in NetSuite. + +Enabling Expense Reports is required as part of Expensify's integration with NetSuite: +1. Logged into NetSuite as an administrator, go to Setup > Company > Enable Features > Employees +2. Confirm the checkbox next to Expense Reports is checked +3. If not, click the checkbox and then Save to enable Expense Reports + +## Step 6: Confirm Expense Categories are set up in NetSuite. + +Once Expense Reports are enabled, Expense Categories can be set up in NetSuite. Expense Categories are an alias for General Ledger accounts for coding expenses. + +1. Logged into NetSuite as an administrator, go to Setup > Accounting > Expense Categories (a list of Expense Categories should show) +2. If no Expense Categories are visible, click **New** to create new ones + +## Step 7: Confirm Journal Entry Transaction Forms are Configured Properly + +1. Logged into NetSuite as an administrator, go to _Customization > Forms > Transaction Forms_ +2. Click **Customize** or **Edit** next to the Standard Journal Entry form +3. Then, click Screen Fields > Main. Please verify the "Created From" label has "Show" checked and the Display Type is set to Normal +4. Click the sub-header Lines and verify that the "Show" column for "Receipt URL" is checked +5. Go to _Customization > Forms > Transaction Forms_ and ensure all other transaction forms with the journal type have this same configuration + +## Step 8: Confirm Expense Report Transaction Forms are Configured Properly + +1. Logged into NetSuite as an administrator, go to _Customization > Forms > Transaction Forms_ +2. Click **Customize** or **Edit** next to the Standard Expense Report form, then click **Screen Fields > Main** +3. Verify the "Created From" label has "Show" checked and the Display Type is set to Normal +4. Click the second sub-header, Expenses, and verify that the 'Show' column for 'Receipt URL' is checked +5. Go to _Customization > Forms > Transaction Forms_ and ensure all other transaction forms with the expense report type have this same configuration + +## Step 9: Confirm Vendor Bill Transactions Forms are Configured Properly + +1. Logged into NetSuite as an administrator, go to _Customization > Forms > Transaction Forms_ +2. Click **Customize** or **Edit** next to your preferred Vendor Bill form +3. Then, click _Screen Fields > Main_ and verify that the "Created From" label has "Show" checked and that Departments, Classes, and Locations have the "Show" label unchecked +4. Under the Expenses sub-header (make sure to click the "Expenses" sub-header at the very bottom and not "Expenses & Items"), ensure "Show" is checked for Receipt URL, Department, Location, and Class +5. Go to _Customization > Forms > Transaction Forms_ and provide all other transaction forms with the vendor bill type have this same configuration + +## Step 10: Confirm Vendor Credit Transactions Forms are Configured Properly + +1. While logged in as an administrator, go to _Customization > Forms > Transaction Forms_ +2. Click **Customize** or **Edit** next to your preferred Vendor Credit form, then click _Screen Fields > Main_ and verify that the "Created From" label has "Show" checked and that Departments, Classes, and Locations have the "Show" label unchecked +3. Under the Expenses sub-header (make sure to click the "Expenses" sub-header at the very bottom and not "Expenses & Items"), ensure "Show" is checked for Receipt URL, Department, Location, and Class +4. Go to _Customization > Forms > Transaction Forms_ and ensure all other transaction forms with the vendor credit type have this same configuration + +## Step 11: Set up Tax Groups (only applicable if tracking taxes) + +Expensify imports NetSuite Tax Groups (not Tax Codes), which you can find in NetSuite under _Setup > Accounting > Tax Groups_. + +Tax Groups are an alias for Tax Codes in NetSuite and can contain one or more Tax Codes (Please note: for UK and Ireland subsidiaries, please ensure your Tax Groups do not have more than one Tax Code). We recommend naming Tax Groups so your employees can easily understand them, as the name and rate will be displayed in Expensify. + +Before importing NetSuite Tax Groups into Expensify: +1. Create your Tax Groups in NetSuite by going to _Setup > Accounting > Tax Groups_ +2. Click **New** +3. Select the country for your Tax Group +4. Enter the Tax Name (this is what employees will see in Expensify) +5. Select the subsidiary for this Tax Group +6. Select the Tax Code from the table you wish to include in this Tax Group +7. Click **Add** +8. Click **Save** +9. Create one NetSuite Tax Group for each tax rate you want to show in Expensify + +Ensure Tax Groups can be applied to expenses by going to _Setup > Accounting > Set Up Taxes_ and setting the Tax Code Lists Include preference to "Tax Groups And Tax Codes" or "Tax Groups Only." + +If this field does not display, it’s not needed for that specific country. + +## Step 12: Connect Expensify and NetSuite + +1. Log into Expensify as a Policy Admin and go to **Settings > Workspaces > _[Workspace Name]_ > Connections > NetSuite** +2. Click **Connect to NetSuite** +3. Enter your Account ID (Account ID can be found in NetSuite by going to _Setup > Integration > Web Services Preferences_) +4. Then, enter the token and token secret +5. Click **Connect to NetSuite** + +From there, the NetSuite connection will sync, and the configuration dialogue box will appear. + +Please note that you must create the connection using a NetSuite account with the Expensify Integration role + +Once connected, all reports exported from Expensify will be generated in NetSuite using SOAP Web Services (the term NetSuite employs when records are created through the integration). + +# How to Configure Export Settings + +There are numerous options for exporting Expensify reports to NetSuite. Let's explore how to configure these settings to align with your business needs. +To access these settings, head to **Settings > Workspace > Group > Connections** and select the **Configure** button. + +## Export Options + +### Subsidiary + +The subsidiary selection will only appear if you use NetSuite OneWorld and have multiple subsidiaries active. If you add a new subsidiary to NetSuite, sync the workspace connection, and the new subsidiary should appear in the dropdown list under **Settings > Workspaces > _[Workspace Name]_ > Connections**. + +### Preferred Exporter + +This option allows any admin to export, but the preferred exporter will receive notifications in Expensify regarding the status of exports. + +### Date + +The three options for the date your report will export with are: +- Date of last expense: This will use the date of the previous expense on the report +- Submitted date: The date the employee submitted the report +- Exported date: The date you export the report to NetSuite + +## Reimbursable Expenses + +### Expense Reports + +Expensify transactions will export reimbursable expenses as expense reports by default, which will be posted to the payables account designated in NetSuite. + +### Vendor Bills + +Expensify transactions export as vendor bills in NetSuite and will be mapped to the subsidiary associated with the corresponding policy. Each report will be posted as payable to the vendor associated with the employee who submitted the report. +You can also set an approval level in NetSuite for vendor bills. + +### Journal Entries + +Expensify transactions that are set to export as journal entries in NetSuite will be mapped to the subsidiary associated with this policy. All the transactions will be posted to the payable account specified in the policy. + +You can also set an approval level in NetSuite for the journal entries. + +**Important Notes:** +- Journal entry forms by default do not contain a customer column, so it is not possible to export customers or projects with this export option +- The credit line and header level classifications are pulled from the employee record + +## Non-Reimbursable Expenses + +### Vendor Bills + +Non-reimbursable expenses will be posted as a vendor bill payable to the default vendor specified in your policy's connection settings. If you centrally manage your company cards through Domains, you can export expenses from each card to a specific vendor in NetSuite. You can also set an approval level in NetSuite for the bills. + +### Journal Entries + +Non-reimbursable expenses will be posted to the Journal Entries posting account selected in your policy's connection settings. If you centrally manage your company cards through Domains, you can export expenses from each card to a specific account in NetSuite. + +**Important Notes:** +- Expensify Card expenses will always export as Journal Entries, even if you have Expense Reports or Vendor Bills configured for non-reimbursable expenses on the Export tab +- Journal entry forms do not contain a customer column, so it is not possible to export customers or projects with this export option +- The credit line and header level classifications are pulled from the employee record + +### Expense Reports + +To use the expense report option for your corporate card expenses, you will need to set up your default corporate cards in NetSuite. + +To use a default corporate card for non-reimbursable expenses, you must select the correct card on the employee records (for individual accounts) or the subsidiary record (If you use a non-one world account, the default is found in your accounting preferences). + +Add the corporate card option and corporate card main field to your expense report transaction form in NetSuite by: +1. Heading to _Customization > Forms > Transaction Forms > Preferred expense report form > Screen Fields_ +2. Under the Main tab, check “Show” for Account for Corporate Card Expenses +3. On the Expenses tab, check “Show” for Corporate Card + +You can select the default account on your employee record to use individual corporate cards for each employee. Make sure you add this field to your employee entity form in NetSuite. +If you have multiple cards assigned to a single employee, you cannot export to each account. You can only have a single default per employee record. + +### Export Invoices + +Select the Accounts Receivable account you want your Invoice Reports to export. In NetSuite, the Invoices are linked to the customer, corresponding to the email address where the Invoice was sent. + +### Default Vendor Bills + +The list of vendors will be available in the dropdown when selecting the option to export non-reimbursable expenses as vendor bills. + +# How to Configure Coding Settings + +The Coding tab is where NetSuite information is configured in Expensify, which allows employees to code expenses and reports accurately. There are several coding options in NetSuite. Let’s go over each of those below. + +## Expense Categories + +Expensify's integration with NetSuite automatically imports NetSuite Expense Categories as Categories in Expensify. + +Please note that each expense must have a Category selected to export to NetSuite. The category chosen must be imported from NetSuite and cannot be manually created in Expensify. + +If you want to delete Categories, you must do this in NetSuite. Categories are added and modified on the integration’s side and then synced with Expensify. +Once imported, you can turn specific Categories on or off under **Settings > Workspaces > _[Workspace Name]_ > Categories**. + +## Tags + +The NetSuite integration allows you to configure Customers, Projects, Departments, Classes, and Locations as line-item expense classifications. These are called Tags in Expensify. + +Suppose a default Customer, Project, Department, Class, or Location ties to the employee record in NetSuite. In that case, Expensify will create a rule that automatically applies that tag to all expenses made by that employee (the Tag is still editable if necessary). + +If you want to delete Tags, you must do this in NetSuite. Tags are added and modified on the integration’s side and then synced with Expensify. + +Once imported, you can turn specific Tags on or off under **Settings > Workspaces > _[Workspace Name]_ > Tags**. + +## Report Fields + +The NetSuite integration allows you to configure Customers, Projects, Departments, Classes, and Locations as report-level classifications. These are called Report Fields in Expensify. + +## NetSuite Employee Default + +The NetSuite integration allows you to set Departments, Classes, and Locations according to the NetSuite Employee Default for expenses exported as both Expense Reports and Journal Entries. + +These fields must be set in NetSuite's employee(s) record(s) to be successfully applied to expenses upon export. + +You cannot use the employee default setting with a vendor bill export if you have both a vendor and an employee set up for the user under the same email address and subsidiary. + +## Tax + +The NetSuite integration allows users to apply a tax rate and amount to each expense. To do this, import Tax Groups from NetSuite: +1. In NetSuite, head to _Setup > Accounting > Tax Groups_ +2. Once imported, go to the NetSuite connection configuration page in Expensify (under **Settings > Workspaces > Group > _[Workspace Name]_ > Connection > NetSuite > Coding**), refresh the subsidiary list, and the Tax option will appear +3. From there, enable Tax +4. Click **Save** +5. Sync the connection +6. All Tax Groups for the connected NetSuite subsidiary will be imported to Expensify as taxes. +7. After syncing, go to **Settings > Workspace > Group > _[Workspace Name]_ > Tax** to see the tax groups imported from NetSuite +8. Use the turn on/off button to choose which taxes to make available to your employees +9. Select a default tax to apply to the workspace (that tax rate will automatically apply to all new expenses) + +## Custom Segments + +To add a Custom Segment to your workspace, you’ll need to locate three fields in NetSuite: +- Segment Name +- Internal ID +- Script/Field ID + +**To find the Segment Name:** +1. Log in as an administrator in NetSuite +2. Head to _Customization > Lists, Records, & Fields > Custom Segments_ +3. You’ll see the Segment Name on the Custom Segments page + +**To find the Internal ID:** +1. Ensure you have internal IDs enabled in NetSuite under _Home > Set Preferences_ +2. Navigate back to the Custom Segment page +3. Click the **Custom Record Type** hyperlink +4. You’ll see the Internal ID on the Custom Record Type page + +**To find the Script/Field ID:** + +If configuring Custom Segments as Report Fields, use the Field ID on the Transactions tab (under _Custom Segments > Transactions_). + +If configuring Custom Segments as Tags, use the Field ID on the Transaction Columns tab (under _Custom Segments > Transaction Columns_). + +Lastly, head over to Expensify and do the following: +1. Navigate to **Settings > Workspace > Group > _[Workspace Name]_ > Connections > Configure > Coding tab** +2. Choose how to import Custom Segments (Report Fields or Tags) +3. Fill out the three fields (Segment Name, Internal ID, Script ID) +4. Click **Submit** + +From there, you should see the values for the Custom Segment under the Tag or Report Field settings in Expensify. + +Don’t use the "Filtered by" feature available for Custom Segments. Expensify can’t make these dependent on other fields. If you do have a filter selected, we suggest switching that filter in NetSuite to "Subsidiary" and enabling all subsidiaries to ensure you don't receive any errors upon exporting reports. + +### Custom Records + +Custom Records are added through the Custom Segments feature. + +To add a Custom Record to your workspace, you’ll need to locate three fields in NetSuite: +- The name of the record +- Internal ID +- Transaction Column ID + +**To find the Internal ID:** +1. Make sure you have Internal IDs enabled in NetSuite under Home > Set Preferences +2. Navigate back to the Custom Segment page +3. Click the Custom Record Type hyperlink +4. You’ll see the Internal ID on the Custom Record Type page + +**To find the Transaction Column ID:** +If configuring Custom Segments as Report Fields, use the Field ID on the Transactions tab (under _Custom Segments > Transactions_). + +If configuring Custom Segments as Tags, use the Field ID on the Transaction Columns tab (under _Custom Segments > Transaction Columns_). + +Lastly, head over to Expensify and do the following: +1. Navigate to **Settings > Workspace > Group > [Workspace Name]_ > Connections > Configure > Coding tab** +2. Choose how to import Custom Records (Report Fields or Tags) +3. Fill out the three fields (the name or label of the record, Internal ID, Transaction Column ID) +4. Click **Submit** + +From there, you should see the values for the Custom Records under the Tag or Report Field settings in Expensify. + +### Custom Lists + +To add Custom Lists to your workspace, you’ll need to locate two fields in NetSuite: +- The name of the record +- The ID of the Transaction Line Field that holds the record + +**To find the record:** +1. Log into Expensify +2. Head to **Settings > Workspace > Group > _[Workspace Name]_ > Connections > Configure > Coding tab** +3. The name of the record will be populated in a dropdown list + +The name of the record will populate in a dropdown list. If you don't see the one you are looking for, click **Refresh Custom List Options**. + +**To find the Transaction Line Field ID:** +1. Log into NetSuite +2. Search "Transaction Line Fields" in the global search +3. Open the option that is holding the record to get the ID + +Lastly, head over to Expensify, and do the following: +1. Navigate to **Settings > Workspaces > Group > _[Workspace Name]_ > Connections > Configure > Coding tab** +2. Choose how to import Custom Lists (Report Fields or Tags) +3. Enter the ID in Expensify in the configuration screen +4. Click **Submit** + +From there, you should see the values for the Custom Lists under the Tag or Report Field settings in Expensify. + +# How to Configure Advanced Settings + +The NetSuite integration’s advanced configuration settings are accessed under **Settings > Workspaces > Group > _[Workspace Name]_ > Connections > NetSuite > Configure > Advanced tab**. + +Let’s review the different advanced settings and how they interact with the integration. + +## Auto Sync + +Enabling Auto Sync ensures that the information in NetSuite and Expensify is always in sync through automating exports, tracking direct deposits, and communicating export errors. + +**Automatic Export:** +- When you turn on the Auto Sync feature in Expensify, any final report you approve will automatically be sent to NetSuite. +- This happens every day at approximately the same time. + +**Direct Deposit Alert:** +- If you use Expensify's Direct Deposit ACH and have Auto Sync, getting reimbursed for an Expensify report will automatically create a Bill Payment in NetSuite. + +**Tracking Exports and Errors:** +- In the comments section of an Expensify report, you can find extra details about the report. +- The comments section will tell you when the report was sent to NetSuite, and if there were any problems during the export, it will show the error. + +## Newly Imported Categories + +With this enabled, all submitters can add any newly imported Categories to an Expense. + +## Invite Employees & Set Approval Workflow + +### Invite Employees + +Use this option in Expensify to bring your employees from a specific NetSuite subsidiary into Expensify. +Once imported, Expensify will send them an email letting them know they've been added to a workspace. + +### Set Approval Workflow + +Besides inviting employees, you can also establish an approval process in NetSuite. + +By doing this, the Approval Workflow in Expensify will automatically follow the same rules as NetSuite, typically starting with Manager Approval. + +- **Basic Approval:** A single level of approval, where all users submit directly to a Final Approver. The Final Approver defaults to the workspace owner but can be edited on the people page. +- **Manager Approval (default):** Two levels of approval route reports first to an employee's NetSuite expense approver or supervisor, and second to a workspace-wide Final Approver. By NetSuite convention, Expensify will map to the supervisor if no expense approver exists. The Final Approver defaults to the workspace owner but can be edited on the people page. +- **Configure Manually:** Employees will be imported, but all levels of approval must be manually configured on the workspace's People settings page. If you enable this setting, it’s recommended you review the newly imported employees and managers on the **Settings > Workspaces > Group > _[Workspace Name]_ > People page**. You can set a user role for each new employee and enforce an approval workflow. + +## Automatically Create Employees/Vendors + +With this feature enabled, Expensify will automatically create a new employee or vendor (if one doesn’t already exist) from the email of the report submitter in NetSuite. + +## Export Foreign Currency Amount + +Using this feature allows you to send the original amount of the expense rather than the converted total when exporting to NetSuite. This option is available if you are exporting reimbursable expenses as Expense Reports. + +## Cross-Subsidiary Customers/Projects + +This allows you to import Customers and Projects across all subsidiaries to a single group workspace. For this functionality, you must enable "Intercompany Time and Expense" in NetSuite. + +That feature is found in NetSuite under _Setup > Company > Setup Tasks: Enable Features > Advanced Features_. + +## Sync Reimbursed Reports + +If you're using Expensify's Direct Deposit ACH feature and you want to export reimbursable expenses as either Expense Reports or Vendor Bills in NetSuite, here's what to do: +1. In Expensify, go to the Advanced Settings tab +2. Look for a toggle or switch related to this feature +3. Turn it on by clicking the toggle +4. Select the correct account for the Bill Payment in NetSuite +5. Ensure the account you choose matches the default account for Bill Payments in NetSuite + +That's it! When Expensify reimburses an expense report, it will automatically create a corresponding Bill Payment in NetSuite. + +Alternatively, if reimbursing outside of Expensify, this feature will automatically update the expense report status in Expensify from Approved to Reimbursed when the respective report is paid in NetSuite and the corresponding workspace syncs via Auto-Sync or when the integration connection is manually synced. + +## Setting Approval Levels + +With this setting enabled, you can set approval levels based on your export type. + +- **Expense Reports:** These options correspond to the default preferences in NetSuite – “Supervisor approval only,” “Accounting approval only,” or “Supervisor and Accounting approved.” +- **Vendor Bills or Journal Entries:** These options correspond to the default preferences in NetSuite – “Pending Approval” or “Approved for Posting.” + +If you have Approval Routing selected in your accounting preference, this will override the selections in Expensify. + +If you do not wish to use Approval Routing in NetSuite, go to _Setup > Accounting > Accounting Preferences > Approval Routing_ and ensure Vendor Bills and Journal Entries are not selected. + +### Collection Account + +When exporting invoices, once marked as Paid, the payment is marked against the account selected after enabling the Collection Account setting. + +# Deep Dive + +## Categories + +You can use the Auto-Categorization feature so that expenses are automatically categorized. + +To set Category Rules (e.g., receipt requirements or comments), go to the categories page in the workspace under **Settings > Workspaces > _[Workspace Name]_ > Categories**. + +With this setting enabled, when an Expense Category updates in NetSuite, it will update in Expensify automatically. + +## Company Cards + +NetSuite's company card feature simplifies exporting reimbursable and non-reimbursable transactions to your General Ledger (GL). This approach is recommended for several reasons: + +1. **Separate Employees from Vendors:** NetSuite allows you to maintain separate employee and vendor records. This feature proves especially valuable when integrating with Expensify. By utilizing employee defaults for classifications, your employees won't need to apply tags to all their expenses manually. +2. **Default Accounts Payable (A/P) Account:** Expense reports enable you to set a default A/P account for export on your subsidiary record. Unlike vendor bills, where the A/P account defaults to the last selected account, the expense report export option allows you to establish a default A/P account. +3. **Mix Reimbursable and Non-Reimbursable Expenses:** You can freely mix reimbursable and non-reimbursable expenses without categorizing them in NetSuite after export. NetSuite's corporate card feature automatically categorizes expenses into the correct GL accounts, ensuring a neat and organized GL impact. + +#### Let’s go over an example! + +Consider an expense report with one reimbursable and one non-reimbursable expense. Each needs to be exported to different accounts and expense categories. + +In NetSuite, you can quickly identify the non-reimbursable expense marked as a corporate card expense. Reviewing the GL impact, you'll notice that the reimbursable expense is posted to the default A/P account set on the subsidiary record. On the other hand, the company card expense is assigned to the Credit Card account, which can either be set as a default on the subsidiary record (for a single account) or the employee record (for individual credit card accounts in NetSuite). + +Furthermore, each expense is categorized according to your selected expense category. + +You'll need to set up default corporate cards in NetSuite to use the expense report option for your corporate card expenses. + +For non-reimbursable expenses, choose the appropriate card on the subsidiary record. You can find the default in your accounting preferences if you're not using a OneWorld account. + +Add the corporate card option and the corporate card main field to configure your expense report transaction form in NetSuite: +1. Go to _Customization > Forms > Transaction Forms > Preferred expense report form > Screen Fields_ +2. Under the Main tab, check "Show for Account for Corporate Card Expenses" +3. On the Expenses tab, check "Show for Corporate Card" + +If you prefer individual corporate cards for each employee, you can select the default account on the employee record. Add this field to your employee entity form in NetSuite (under _Customize > Customize Form_ from any employee record). Note that each employee can have only one corporate card account default. + +### Exporting Company Cards to GL Accounts in NetSuite + +If you need to export company card transactions to individual GL accounts, you can set that up at the domain level. + +Let’s go over how to do that: +1. Go to **Settings > Domain > _[Domain name]_ > Company Cards** +2. Click the Export Settings cog on the right-hand side of the card and select the GL account where you want the expenses to export + +After setting the account, exported expenses will be mapped to that designated account. + +## Tax + +You’ll want to set up Tax Groups in Expensify if you're keeping track of taxes. + +Expensify can import "NetSuite Tax Groups" (not Tax Codes) from NetSuite. Tax Groups can contain one or more Tax Codes. If you have subsidiaries in the UK or Ireland, ensure your Tax Groups have only one Tax Code. + +You can locate these in NetSuite by setting up> Accounting > Tax Groups. + +You’ll want to name Tax Groups something that makes sense to your employees since both the name and the tax rate will appear in Expensify. + +To bring NetSuite Tax Groups into Expensify, here's what you need to do: +1. Create your Tax Groups in NetSuite by going to _Setup > Accounting > Tax Groups_ +2. Click **New** +3. Pick the country for your Tax Group +4. Enter the Tax Name (this will be visible to your employees in Expensify) +5. Next, select the subsidiary for this Tax Group +6. Finally, from the table, choose the Tax Code you want to include in this Tax Group +7. Click **Add**, then click **Save** + +Repeat those steps for each tax rate you want to use in Expensify. + +Next, ensure that Tax Groups can be applied to expenses: +1. In NetSuite, head to _Setup > Accounting > Set Up Taxes_ +2. Set the preference for "Tax Code Lists Include" to either "Tax Groups And Tax Codes" or "Tax Groups Only." If you don't see this field, don't worry; it means you don't need to set it for that specific country + +NetSuite has a pre-made list of tax groups for specific locations, but you can also create your own. We'll import both your custom tax groups and the default ones. It's important not to deactivate the default NetSuite tax groups because we rely on them for exporting specific types of expenses. + +For example, there's a default Canadian tax group called CA-Zero, which we use when exporting mileage and per diem expenses that don't have any taxes applied in + +Expensify. If you deactivate this group in NetSuite, it will lead to export errors. + +Additionally, some tax nexuses in NetSuite have specific settings that need to be configured in a certain way to work seamlessly with the Expensify integration: +- ​​In the Tax Code Lists Include field, choose "Tax Groups" or "Tax Groups and Tax Codes." This setting determines how tax information is handled. +- In the Tax Rounding Method field, select "Round Off." Although it won't cause connection errors, not using this setting can result in exported amounts differing from what NetSuite expects. + +If your tax groups are importing into Expensify but not exporting to NetSuite, check that each tax group has the right subsidiaries enabled. That is crucial for proper data exchange. + +## Multi-Currency + +When using multi-currency features with NetSuite, remember these points: + +**Matching Currencies:** The currency set for a vendor or employee record must match the currency chosen for the subsidiary in your Expensify configuration. This alignment is crucial for proper handling. + +**Foreign Currency Conversion:** If you create expenses in one currency and then convert them to another currency within Expensify before exporting, you can include both the original and converted amounts in the exported expense reports. This option, called "Export foreign currency amount," can be found in the Advanced tab of your configuration. Note that Expensify sends only the amounts; the actual currency conversion is performed in NetSuite. + +**Bank Account Currency:** When synchronizing bill payments, make sure your bank account's currency matches the subsidiary's currency. Failure to do so will result in an "Invalid Account" error. This alignment is necessary to prevent issues during payment processing. + +## Exporting Invoices + +When you mark an invoice as paid in Expensify, the paid status syncs with NetSuite and vice versa! + +Let's dive right in: +1. Access Configuration Settings: Go to **Settings > Workspace > Group > _[Workspace Name]_ > Connections > Configuration** +2. Choose Your Accounts Receivable Account: Scroll down to "Export Expenses to" and select the appropriate Accounts Receivable account from the dropdown list. If you don't see any options, try syncing your NetSuite connection by returning to the Connections page and clicking **Sync Now** + +### Exporting an Invoice to NetSuite + +Invoices will be automatically sent to NetSuite when they are in the "Processing" or "Paid" status. This ensures you always have an up-to-date record of unpaid and paid invoices. + +If you have Auto Sync disabled, you'll need to export your invoices, along with your expense reports, manually. Follow these three simple steps: +1. Filter Invoices: From your Reports page, use filters to find the invoices you want to export. +2. Select Invoices: Pick the invoices ready for export. +3. Export to NetSuite: Click **Export to NetSuite** in the top right-hand corner. + +When exporting to NetSuite, we match the recipient's email address on the invoice to a customer record in NetSuite, meaning each customer in NetSuite must have an email address in their profile. If we can't find a match, we'll create a new customer in NetSuite. + +Once exported, the invoice will appear in the Accounts Receivable account you selected during your NetSuite Export configuration. + +### Updating an Invoice to paid + +When you mark an invoice as "Paid" in Expensify, this status will automatically update in NetSuite. Similarly, if the invoice is marked as "Paid" in NetSuite, it will sync with Expensify. The payment will be reflected in the Collection account specified in your Advanced Settings Configuration. + +## Download NetSuite Logs + +Sometimes, we might need more details from you to troubleshoot issues with your NetSuite connection. Providing the NetSuite web services usage logs is incredibly useful. + +Here's how you can send them to us: +1. **Generate the Logs:** Start by trying to export a report from your system. This action will create the most recent logs that we require. +2. **Access Web Services Usage Logs:** You can locate these logs in your NetSuite account. Just use the global search bar at the top of the page and type in "Web Services Usage Log." +3. **Identify the Logs:** Look for the most recent log entry. It should have "FAILED" under the STATUS column. Click on the two blue "view" links under the REQUEST and RESPONSE columns. These are the two .xml files we need to examine. + +Send these two files to your Account Manager or Concierge so we can continue troubleshooting! + +# FAQ + +## What type of Expensify plan is required for connecting to NetSuite? + +You need a group workspace on a Control Plan to integrate with NetSuite. + +## How does Auto Sync work with reimbursed reports? + +If a report is reimbursed via ACH or marked as reimbursed in Expensify and then exported to NetSuite, the report is automatically marked as paid in NetSuite during the next sync. + +If a report is exported to NetSuite and then marked as paid in NetSuite, the report is automatically marked as reimbursed in Expensify during the next sync. + +## If I enable Auto Sync, what happens to existing approved and reimbursed reports? + +If you previously had Auto Sync disabled but want to allow that feature to be used going forward, you can safely turn on Auto Sync without affecting existing reports. Auto Sync will only take effect for reports created after enabling that feature. diff --git a/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md b/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md index 3ee1c8656b4b..9fd745838caf 100644 --- a/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md +++ b/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md @@ -1,5 +1,34 @@ --- -title: Coming Soon -description: Coming Soon +title: Google Apps SSO +description: Expensify integrates with Google Apps SSO to easily invite users to your workspace. --- -## Resource Coming Soon! +Google Apps SSO Integration +# Overview +Expensify offers a Single Sign-on (SSO) integration with [Google Apps](https://cloud.google.com/architecture/identity/single-sign-on) for one-click Workspace invites. + +To set this up for users, you must: + +- Be an admin for a **Group Workspace** using a Collect or Control Workspace. +- Have Administrator access to the Google Apps Admin console. + +Google Apps SSO differs from using Google as your Identity Provider for SAML SSO, which limits domain access. To complete the Google SAML setup, follow the Google guide to [Set up SSO via SAML for Expensify](https://support.google.com/a/answer/7371682). You can enable both at the same time. +# How to Enable the Expensify App on Google Apps +To enable Expensify for your Google Apps domain and add an “Expenses” link to your universal navigation bar, please run through the following: +1. Sign in to your Google Apps Admin console as an administrator. +2. Navigate to the [Expensify App Listing on Google Apps](https://workspace.google.com/marketplace/app/expensify/452047858523). +3. Click **Admin Install** to start installing the app. +4. Click **Continue**. +5. Ensure the correct domain is selected if you have access to multiple. +6. Click **Finish**. You can configure access for specific Organizational Units later if needed. +7. All account holders on your domain can now access Expensify from the Google Apps directory by clicking **More** and choosing **Expensify**. +8. Now, follow the steps below to sync your users with Expensify automatically. +# How to Sync Users from Google Apps to Expensify +To sync your Google Apps users to your Expensify Workspace, follow these steps: +1. Follow the above steps to install Expensify in your Google Apps directory. +2. Log in to [Expensify](https://www.expensify.com/). +3. Click [Settings>Workspaces>Group](https://www.expensify.com/admin_policies?param={"section":"group"}). +4. Select the Workspace you wish to invite users to. +5. Select **People** from the admin menu. +6. Click **Sync G Suite Now** to identify anyone on your domain not yet on the Workspace and add them to it. + +The connection does not automatically refresh, you will need to click **Sync G Suite Now** whenever you’re ready to add new users. diff --git a/docs/articles/expensify-classic/integrations/travel-integrations/Egencia.md b/docs/articles/expensify-classic/integrations/travel-integrations/Egencia.md index 3ee1c8656b4b..178621a62d90 100644 --- a/docs/articles/expensify-classic/integrations/travel-integrations/Egencia.md +++ b/docs/articles/expensify-classic/integrations/travel-integrations/Egencia.md @@ -1,5 +1,30 @@ --- -title: Coming Soon -description: Coming Soon +title: Egencia Integration +description: Expensify-Egencia integration automatically adds Egencia booking receipts to Expensify. --- -## Resource Coming Soon! +# Overview +[Egencia](https://www.egencia.com/en/) is a platform used to book and manage business travel. Integrating Expensify and Egencia ensures any bookings made using Egencia will automatically import as expenses to Expensify. +## Requirements: +- You'll need to have a Control Workspace +- A verified Domain + +# How to use Egencia with Expensify +When an employee makes a booking in Egencia: +- The receipt itinerary will automatically be imported to the traveler's Expensify account along with the expense details without needing to submit the information manually. +- When the traveler uses their company credit card to make a purchase via Egencia, the Egencia receipt will automatically merge with the credit card transaction. + +The travel information will also be available in the Trips section of the mobile app of the recipient's Expensify account. +# How to Enable the Egencia Feed +A file feed is an automated transfer of data files from Egencia to Expensify. + +Egencia controls the feed, so to connect Expensify you will need to: +1. Contact your Egencia account manager. +2. Request that they enable your Expensify feed. + +# How to Connect to a Central Purchasing Account +Once your Egencia account manager has established the feed, you can automatically forward all Egencia booking receipts to a single Expensify account. To do this: +1. Open a chat with Concierge. +2. Tell Concierge “Please enable Central Purchasing Account for our Egencia feed. The account email is: xxx@yourdomain.com”. + +The receipt the traveler receives is a "reservation expense." Reservation expenses are non-reimbursable and won’t be included in any integrated accounting system exports. The reservation sent to the traveler's account is added to their mobile app Trips feature so that the traveler can easily keep tabs on upcoming travel and receive trip notifications. + diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/SAML-SSO.md b/docs/articles/expensify-classic/policy-and-domain-settings/SAML-SSO.md new file mode 100644 index 000000000000..758cb70067e1 --- /dev/null +++ b/docs/articles/expensify-classic/policy-and-domain-settings/SAML-SSO.md @@ -0,0 +1,89 @@ +--- +title: Managing Single Sign-On (SSO) and User Authentication in Expensify +description: Learn how to effectively manage Single Sign-On (SSO) and user authentication in Expensify alongside your preferred SSO provider. Our comprehensive guide covers SSO setup, domain verification, and specific instructions for popular providers like AWS, Okta, and Microsoft Azure. Streamline user access and enhance security with Expensify's SAML-based SSO integration. +--- +# Overview +This article provides a comprehensive guide on managing Single Sign-On (SSO) and user authentication in Expensify alongside your preferred SSO provider. Expensify uses SAML to enable and manage SSO between Expensify and your SSO provider. + +# How to Use SSO in Expensify +Before setting up Single Sign-On with Expensify you will need to make sure your domain has been verified. Once the domain is verified, you can access the SSO settings by navigating to Settings > Domains > [Domain Name] > SAML. +On this page, you can: +- Get Expensify's Service Provider MetaData. You will need to give this to your identity provider. +- Enter your Identity Provider MetaData. Please contact your SAML SSO provider if you are unsure how to get this. +- Choose whether you want to make SAML SSO required for login. If you choose this option, members will only be able to log in to Expensify via SAML SSO. +Instructions for setting up Expensify for specific SSO providers can be found below. If you do not see your provider listed below, please contact them and request instructions. +- [Amazon Web Services (AWS SSO)](https://static.global.sso.amazonaws.com/app-202a715cb67cddd9/instructions/index.htm) +- [Bitium](https://support.bitium.com/administration/saml-expensify/) +- [Google SAML](https://support.google.com/a/answer/7371682) (for GSuite, not Google SSO) +- [Microsoft Azure Active Directory](https://azure.microsoft.com/en-us/documentation/articles/active-directory-saas-expensify-tutorial/) +- [Okta](https://saml-doc.okta.com/SAML_Docs/How-to-Configure-SAML-2.0-for-Expensify.html) +- [OneLogin](https://onelogin.service-now.com/support?id=kb_article&sys_id=e44c9e52db187410fe39dde7489619ba) +- [Oracle Identity Cloud Service](https://docs.oracle.com/en/cloud/paas/identity-cloud/idcsc/expensify.html#Expensify) +- [SAASPASS](https://saaspass.com/saaspass/expensify-two-factor-authentication-2fa-single-sign-on-sso-saml.html) +- Microsoft Active Directory Federation Services (see instructions in the FAQ section below) + +When SSO is enabled, employees will be prompted to sign in through Single Sign-On when using their company email (private domain email) and also a public email (e.g. gmail.com) linked as a secondary login. + +## How can I update the Microsoft Azure SSO Certificate? +Expensify's SAML configuration doesn't support multiple active certificates. This means that if you create the new certification ahead of time without first removing the old one, the respective IdP will include two unique x509 certificates instead of one and the connection will break. Should you need to access Expensify, switching back to the old certificate will continue to allow access while that certificate is still valid. + +To transfer from one Microsoft Azure certificate to another, please follow the below steps: +1. In Azure Directory , create your new certificate. +2. In Azure Director, remove the old, expiring certificate. +3. In Azure Directory, activate the remaining certificate, and get a new IdP for Expensify from it. +4. In Expensify, replace the previous IdP with the new IdP. +5. Log in via SSO. If login continues to fails, write into Concierge for assistance. + +## How can I enable deactivating users with the Okta SSO integration? +Companies using Okta can deactivate users in Expensify using the Okta SCIM API. This means that when a user is deactivated in Okta their access to Expensify will expire and they will be logged out of both the web and mobile apps. Deactivating a user through Okta will not close their account in Expensify, if you are offboarding this employee, you will still want to close the account. You will need have a verified domain and SAML fully setup before completing setting up the deactivation feature. + +To enable deactivating users in Okta, follow these steps: +1. In Expensify, head to *Settings > Domains > _[Domain Name]_ > SAML* +2. Ensure that the toggle is set to Enabled for *SAML Login* and *Required for login* +3. In Okta, go to *Admin > Applications > Add Application* +4. Search for Expensify and click on Add. +5. On the next screen, enter your company domain (e.g. yourcompany.com). +6. In the tab Sign-On Options, click *Next* (leaving default settings). +7. In the tab Assign to People, click *Next* and then click Done. +8. Next, in Okta, go to *Admin > Applications > Expensify > Sign On > View Setup Instructions* and follow the steps listed. +9. Then, go to *Directory > Profile Editor > Okta user > Profile* +10. Click the information bubble to the right of the *First name* and *Last name* attributes +11. Uncheck *Yes* under *Attribute required* field and press *Save Attribute*. +12. Email concierge@expensify.com providing your domain and request that Okta SCIM be enabled. You will receive a response when this step has been completed. +13. In Expensify, go to *Domains > _[Domain Name]_ > SAML > Show Token* and copy the Okta SCIM Token you received. +14. In Okta, go to *Admin > Applications > Expensify > Provisioning > API Integration > Configure API Integration* +15. Select Enable API Integration and paste the Okta SCIM Token in API Token field and then click Save. +15. Go to To App, click Edit Provisioning Users, select Enable Deactivate Users and then Save. (You may also need to set up the Expensify Attribute Mappings if you have not previously in steps 9-11). + +Successful activation of this function will be indicated by the green Push User Deactivation icon being enabled at the top of the app page. + +## How can I set up SAML authentication with Microsoft ADFS? +Before getting started, you will need to have a verified domain and Control plan in order to set up SSO with Microsoft ADFS. + +To enable SSO with Microsoft ADFS follow these steps: +1. Open the ADFS management console, and click the *Add Relying Party Trust* link on the right. +2. Check the option to *Import data about the relying party from a file*, then click the *Browse* button. You will input the XML file of Expensify’s metadata which can be found on the Expensify SAML setup page. +3. The metadata file will provide the critical information that ADFS needs to set up the trust. In ADFS, give it a name, and click Next. +4. Select the option to permit all users, then click Next. +5. The next step will give you an overview of what is being configured. Click Next. +6. The new trust is now created. Highlight the trust, then click *Edit claim rules* on the right. +7. Click *Add a Rule*. +8. The default option should be *Send LDAP Attributes as Claims*. Click Next. +9. Depending upon how your Active Directory is set up, you may or may not have a useful email address associated with each user, or you may have a policy to use the UPN as the user attribute for authentication. If so, using the UPN user attribute may be appropriate for you. If not, you can use the emailaddress attribute. +10. Give the rule a name like *Get email address from AD*. Choose Active Directory as the attribute store from the dropdown list. Choose your source user attribute to pass to Expensify that has users’ email address info in it, usually either *E-Mail-Address* or *User-Principal-Name*. Select the outgoing claim type as “E-Mail Address”. Click OK. +11. Add another rule; this time, we want to *Transform an Incoming Claim*. Click Next. +12. Name the rule *Send email address*. The Incoming claim type should be *E-Mail Address*. The outgoing claim type should be *Name ID*, and the outgoing name ID format should be *Email*. Click OK. +13. You should now have two claim rules. + +Assuming you’ve also set up Expensify SAML configuration with your metadata, SAML logins on Expensify.com should now work. For reference, ADFS’ default metadata path is: https://yourservicename.yourdomainname.com/FederationMetadata/2007-06/FederationMetadata.xml. + +# FAQ +## What should I do if I’m getting an error when trying to set up SSO? +You can double check your configuration data for errors using samltool.com. If you’re still having issues, you can reach out to your Account Manager or contact Concierge for assistance. + +## What is the EntityID for Expensify? +The entityID for Expensify is https://expensify.com. Remember not to copy and paste any extra slashes or spaces. If you've enabled the Multi-Domain support (see below) then your entityID will be https://expensify.com/mydomainname.com. + +## Can you have multiple domains with only one entityID? +Yes. Please send a message to Concierge or your account manager and we will enable the ability to use the same entityID with multiple domains. + diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/SAML.md b/docs/articles/expensify-classic/policy-and-domain-settings/SAML.md deleted file mode 100644 index 3ee1c8656b4b..000000000000 --- a/docs/articles/expensify-classic/policy-and-domain-settings/SAML.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Coming Soon -description: Coming Soon ---- -## Resource Coming Soon! diff --git a/docs/articles/expensify-classic/send-payments/Reimbursing-Reports.md b/docs/articles/expensify-classic/send-payments/Reimbursing-Reports.md index 834d0b159931..e55d99d70827 100644 --- a/docs/articles/expensify-classic/send-payments/Reimbursing-Reports.md +++ b/docs/articles/expensify-classic/send-payments/Reimbursing-Reports.md @@ -1,5 +1,75 @@ --- title: Reimbursing Reports -description: Reimbursing Reports +description: How to reimburse employee expense reports --- -## Resource Coming Soon! +# Overview + +One essential aspect of the Expensify workflow is the ability to reimburse reports. This process allows for the reimbursement of expenses that have been submitted for review to the person who made the request. Detailed explanations of the various methods for reimbursing reports within Expensify are provided below. + +# How to reimburse reports + +Reports can be reimbursed directly within Expensify by clicking the **Reimburse** button at the top of the report to reveal the available reimbursement options. + +## Direct Deposit + +To reimburse directly in Expensify, the following needs to be already configured: +- The employee that's receiving reimbursement needs to add a deposit bank account to their Expensify account (under **Settings > Account > Payments > Add a Deposit-only Bank Account**) +- The reimburser needs to add a business bank account to Expensify (under **Settings > Account > Payments > Add a Verified Business Bank Account**) +- The reimburser needs to ensure Expensify is whitelisted to withdraw funds from the bank account + +If all of those settings are in place, to reimburse a report, you will click **Reimburse** on the report and then select **Via Direct Deposit (ACH)**. + +## Indirect or Manual Reimbursement + +If you don't have the option to utilize direct reimbursement, you can choose to mark a report as reimbursed by clicking the **Reimburse** button at the top of the report and then selecting **I’ll do it manually – just mark as reimbursed**. + +This will effectively mark the report as reimbursed within Expensify, but you'll handle the payment elsewhere, outside of the platform. + +# Best Practices +- Plan ahead! Consider sharing a business bank account with multiple workspace admins so they can reimburse employee reports if you're unavailable. We recommend having at least two workspace admins with reimbursement permissions. + +- Understand there is a verification process when sharing a business bank account. The new reimburser will need access to the business bank account’s transaction history (or access to someone who has access to it) to verify the set of test transactions sent from Expensify. + +- Get into the routine of having every new employee connect a deposit-only bank account to their Expensify account. This will ensure reimbursements happen in a timely manner. + +- Employees can see the expected date of their reimbursement at the top of and in the comments section of their report. + +# How to cancel a reimbursement + +Reimbursed a report by mistake? No worries! Any workspace admin with access to the same Verified Bank Account can cancel the reimbursement from within the report until it is withdrawn from the payment account. + +**Steps to Cancel an ACH Reimbursement:** +1. On your web account, navigate to the Reports page +2. Open the report +3. Click **Cancel Reimbursement** +4. After the prompt, "Are you sure you want to cancel the reimbursement?" click **Cancel Reimbursement**. + +It's important to note that there is a small window of time (roughly less than 24 hours) when a reimbursement can be canceled. If you don't see the **Cancel Reimbursement** button on a report, this means your bank has already begun withdrawing the funds from the reimbursement account and the withdrawal cannot be canceled. + +In that case, you’ll want to contact your bank directly to see if they can cancel the reimbursement on their end - or manage the return of funds directly with your employee, outside of Expensify. + +If you cancel a reimbursement after the withdrawal has started, it will be automatically returned to your Verified Bank Account within 3-5 business days. + +# Deep Dive + +## Rapid Reimbursement +If your company uses Expensify's ACH reimbursement, we'll first check to see if the report is eligible for Rapid Reimbursement (next business day). For a report to be eligible for Rapid Reimbursement, it must fall under two limits: +- $100 per deposit only bank account per day for the individuals being reimbursed or businesses receiving payments for bills +- $10,000 per verified bank account for the company paying bills and reimbursing + +If neither limit is met, you can expect to see funds deposited into your bank account on the next business day. + +If either limit has been reached, you can expect funds deposited within your bank account within the typical ACH time frame of four to five business days. + +Rapid Reimbursement is not available for non-US-based reimbursement. If you are receiving a reimbursement to a non-US-based deposit account, you should expect to see the funds deposited in your bank account within four business days. + +# FAQ + +## Who can reimburse reports? +Only a workspace admin who has added a verified business bank account to their Expensify account can reimburse employees. + +## Why can’t I trigger direct ACH reimbursements in bulk? + +Instead of a bulk reimbursement option, you can set up automatic reimbursement. With this configured, reports below a certain threshold (defined by you) will be automatically reimbursed via ACH as soon as they're "final approved." + +To set your manual reimbursement threshold, head to **Settings > Workspace > Group > _[Workspace Name]_ > Reimbursement > Manual Reimbursement**. diff --git a/docs/assets/images/ExpensifyHelp_CreateExpense.png b/docs/assets/images/ExpensifyHelp_CreateExpense.png new file mode 100644 index 000000000000..bed2d508dfd7 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_CreateExpense.png differ diff --git a/docs/assets/images/ExpensifyHelp_CreateExpense_Mobile.png b/docs/assets/images/ExpensifyHelp_CreateExpense_Mobile.png new file mode 100644 index 000000000000..aebee5d1a86e Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_CreateExpense_Mobile.png differ diff --git a/docs/assets/images/ExpensifyHelp_ManualDistance.png b/docs/assets/images/ExpensifyHelp_ManualDistance.png new file mode 100644 index 000000000000..607025ed1765 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ManualDistance.png differ diff --git a/docs/assets/images/ExpensifyHelp_ManualDistanceConfirm.png b/docs/assets/images/ExpensifyHelp_ManualDistanceConfirm.png new file mode 100644 index 000000000000..2bc61196531a Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ManualDistanceConfirm.png differ diff --git a/docs/assets/images/ExpensifyHelp_ManualDistanceMap.png b/docs/assets/images/ExpensifyHelp_ManualDistanceMap.png new file mode 100644 index 000000000000..78f2a722a7ca Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ManualDistanceMap.png differ diff --git a/docs/assets/images/ExpensifyHelp_ManualDistance_Mobile.png b/docs/assets/images/ExpensifyHelp_ManualDistance_Mobile.png new file mode 100644 index 000000000000..327f5de00129 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ManualDistance_Mobile.png differ diff --git a/docs/assets/images/ExpensifyHelp_Odometer_Mobile.png b/docs/assets/images/ExpensifyHelp_Odometer_Mobile.png new file mode 100644 index 000000000000..519f541b85c9 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_Odometer_Mobile.png differ diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index a5b4d2cb085e..e797b5055dee 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -40,7 +40,7 @@ CFBundleVersion - 1.3.81.5 + 1.3.81.7 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index 865ab824b9b4..dce89fb2b19a 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -19,6 +19,6 @@ CFBundleSignature ???? CFBundleVersion - 1.3.81.5 + 1.3.81.7 diff --git a/ios/Podfile.lock b/ios/Podfile.lock index a4a8089c9c05..54d0525fd3c9 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -722,7 +722,7 @@ PODS: - React-Core - RNCAsyncStorage (1.17.11): - React-Core - - RNCClipboard (1.5.1): + - RNCClipboard (1.12.1): - React-Core - RNCPicker (2.4.4): - React-Core @@ -915,7 +915,7 @@ DEPENDENCIES: - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - "RNAppleAuthentication (from `../node_modules/@invertase/react-native-apple-authentication`)" - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" - - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)" + - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)" - "RNCPicker (from `../node_modules/@react-native-picker/picker`)" - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)" - RNDeviceInfo (from `../node_modules/react-native-device-info`) @@ -1115,7 +1115,7 @@ EXTERNAL SOURCES: RNCAsyncStorage: :path: "../node_modules/@react-native-async-storage/async-storage" RNCClipboard: - :path: "../node_modules/@react-native-community/clipboard" + :path: "../node_modules/@react-native-clipboard/clipboard" RNCPicker: :path: "../node_modules/@react-native-picker/picker" RNDateTimePicker: @@ -1263,7 +1263,7 @@ SPEC CHECKSUMS: ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d RNAppleAuthentication: 0571c08da8c327ae2afc0261b48b4a515b0286a6 RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60 - RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495 + RNCClipboard: d77213bfa269013bf4b857b7a9ca37ee062d8ef1 RNCPicker: 0b65be85fe7954fbb2062ef079e3d1cde252d888 RNDateTimePicker: 7658208086d86d09e1627b5c34ba0cf237c60140 RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7 diff --git a/jest/setup.js b/jest/setup.js index f03c53540359..4def7d1efad5 100644 --- a/jest/setup.js +++ b/jest/setup.js @@ -1,6 +1,7 @@ import 'setimmediate'; import 'react-native-gesture-handler/jestSetup'; import * as reanimatedJestUtils from 'react-native-reanimated/src/reanimated2/jestUtils'; +import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock'; import setupMockImages from './setupMockImages'; setupMockImages(); @@ -10,6 +11,10 @@ reanimatedJestUtils.setUpTests(); // https://reactnavigation.org/docs/testing/#mocking-native-modules jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); +// Clipboard requires mocking as NativeEmitter will be undefined with jest-runner. +// https://github.com/react-native-clipboard/clipboard#mocking-clipboard +jest.mock('@react-native-clipboard/clipboard', () => mockClipboard); + // Mock react-native-onyx storage layer because the SQLite storage layer doesn't work in jest. // Mocking this file in __mocks__ does not work because jest doesn't support mocking files that are not directly used in the testing project, // and we only want to mock the storage layer, not the whole Onyx module. diff --git a/package-lock.json b/package-lock.json index 2bf6554bef53..f92b6853a718 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "new.expensify", - "version": "1.3.81-5", + "version": "1.3.81-7", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "new.expensify", - "version": "1.3.81-5", + "version": "1.3.81-7", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -25,7 +25,7 @@ "@onfido/react-native-sdk": "7.4.0", "@react-native-async-storage/async-storage": "^1.17.10", "@react-native-camera-roll/camera-roll": "5.4.0", - "@react-native-community/clipboard": "^1.5.1", + "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/datetimepicker": "^3.5.2", "@react-native-community/geolocation": "^3.0.6", "@react-native-community/netinfo": "^9.3.10", @@ -118,6 +118,7 @@ "react-pdf": "^6.2.2", "react-plaid-link": "3.3.2", "react-web-config": "^1.0.0", + "react-webcam": "^7.1.1", "react-window": "^1.8.9", "save": "^2.4.0", "semver": "^7.5.2", @@ -7008,6 +7009,15 @@ "react-native": ">=0.59" } }, + "node_modules/@react-native-clipboard/clipboard": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.12.1.tgz", + "integrity": "sha512-+PNk8kflpGte0W1Nz61/Dp8gHTxyuRjkVyRYBawymSIGTDHCC/zOJSbig6kGIkD8MeaGHC2vGYQJyUyCrgVPBQ==", + "peerDependencies": { + "react": ">=16.0", + "react-native": ">=0.57.0" + } + }, "node_modules/@react-native-community/cli": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.6.tgz", @@ -8624,16 +8634,6 @@ "node": ">= 4.0.0" } }, - "node_modules/@react-native-community/clipboard": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@react-native-community/clipboard/-/clipboard-1.5.1.tgz", - "integrity": "sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==", - "license": "MIT", - "peerDependencies": { - "react": ">=16.0", - "react-native": ">=0.57.0" - } - }, "node_modules/@react-native-community/datetimepicker": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz", @@ -57942,6 +57942,12 @@ "integrity": "sha512-SMEhc+2hQWubwzxR6Zac0CmrJ2rdoHHBo0ibG2iNMsxR0dnU5AdRGnYF/tyK9i20/i7ZNxn+qsEJ69shpkd6gg==", "requires": {} }, + "@react-native-clipboard/clipboard": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.12.1.tgz", + "integrity": "sha512-+PNk8kflpGte0W1Nz61/Dp8gHTxyuRjkVyRYBawymSIGTDHCC/zOJSbig6kGIkD8MeaGHC2vGYQJyUyCrgVPBQ==", + "requires": {} + }, "@react-native-community/cli": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.6.tgz", @@ -59162,12 +59168,6 @@ "joi": "^17.2.1" } }, - "@react-native-community/clipboard": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@react-native-community/clipboard/-/clipboard-1.5.1.tgz", - "integrity": "sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==", - "requires": {} - }, "@react-native-community/datetimepicker": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz", diff --git a/package.json b/package.json index 6837880578b4..77a0bb1e1664 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.3.81-5", + "version": "1.3.81-7", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", @@ -68,7 +68,7 @@ "@onfido/react-native-sdk": "7.4.0", "@react-native-async-storage/async-storage": "^1.17.10", "@react-native-camera-roll/camera-roll": "5.4.0", - "@react-native-community/clipboard": "^1.5.1", + "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/datetimepicker": "^3.5.2", "@react-native-community/geolocation": "^3.0.6", "@react-native-community/netinfo": "^9.3.10", @@ -161,6 +161,7 @@ "react-pdf": "^6.2.2", "react-plaid-link": "3.3.2", "react-web-config": "^1.0.0", + "react-webcam": "^7.1.1", "react-window": "^1.8.9", "save": "^2.4.0", "semver": "^7.5.2", diff --git a/src/CONST.ts b/src/CONST.ts index cbfe07ae5aab..911452d996a8 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -304,7 +304,7 @@ const CONST = { }, type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE, }, - SHORTCUT_MODAL: { + SHORTCUTS: { descriptionKey: 'openShortcutDialog', shortcutKey: 'J', modifiers: ['CTRL'], diff --git a/src/Expensify.js b/src/Expensify.js index 9e6ae1ff27b4..642b8ceb456c 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -26,7 +26,6 @@ import Navigation from './libs/Navigation/Navigation'; import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/PopoverReportActionContextMenu'; import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu'; import SplashScreenHider from './components/SplashScreenHider'; -import KeyboardShortcutsModal from './components/KeyboardShortcutsModal'; import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper'; import EmojiPicker from './components/EmojiPicker/EmojiPicker'; import * as EmojiPickerAction from './libs/actions/EmojiPickerAction'; @@ -194,7 +193,6 @@ function Expensify(props) { {shouldInit && ( <> - diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index e01319cc2f66..bd1c387ca49a 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -169,9 +169,6 @@ const ONYXKEYS = { /** Is report data loading? */ IS_LOADING_APP: 'isLoadingApp', - /** Is Keyboard shortcuts modal open? */ - IS_SHORTCUTS_MODAL_OPEN: 'isShortcutsModalOpen', - /** Is the test tools modal open? */ IS_TEST_TOOLS_MODAL_OPEN: 'isTestToolsModalOpen', @@ -353,7 +350,6 @@ type OnyxValues = { [ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID]: string; [ONYXKEYS.IS_LOADING_PAYMENT_METHODS]: boolean; [ONYXKEYS.IS_LOADING_REPORT_DATA]: boolean; - [ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN]: boolean; [ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN]: boolean; [ONYXKEYS.WALLET_TRANSFER]: OnyxTypes.WalletTransfer; [ONYXKEYS.LAST_ACCESSED_WORKSPACE_POLICY_ID]: string; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 2069f773075b..3ef5ce44c4da 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -112,6 +112,8 @@ export default { SETTINGS_STATUS: 'settings/profile/status', SETTINGS_STATUS_SET: 'settings/profile/status/set', + KEYBOARD_SHORTCUTS: 'keyboard-shortcuts', + NEW: 'new', NEW_CHAT: 'new/chat', NEW_ROOM: 'new/room', @@ -294,6 +296,10 @@ export default { route: 'workspace/:policyID/settings', getRoute: (policyID: string) => `workspace/${policyID}/settings`, }, + WORKSPACE_SETTINGS_CURRENCY: { + route: 'workspace/:policyID/settings/currency', + getRoute: (policyID: string) => `workspace/${policyID}/settings/currency`, + }, WORKSPACE_CARD: { route: 'workspace/:policyID/card', getRoute: (policyID: string) => `workspace/${policyID}/card`, diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js index 034d14eb508b..dd1a0864b0cf 100644 --- a/src/components/AnonymousReportFooter.js +++ b/src/components/AnonymousReportFooter.js @@ -6,9 +6,9 @@ import AvatarWithDisplayName from './AvatarWithDisplayName'; import ExpensifyWordmark from './ExpensifyWordmark'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import reportPropTypes from '../pages/reportPropTypes'; -import CONST from '../CONST'; import styles from '../styles/styles'; import * as Session from '../libs/actions/Session'; +import participantPropTypes from './participantPropTypes'; const propTypes = { /** The report currently being looked at */ @@ -16,12 +16,16 @@ const propTypes = { isSmallSizeLayout: PropTypes.bool, + /** Personal details of all the users */ + personalDetails: PropTypes.objectOf(participantPropTypes), + ...withLocalizePropTypes, }; const defaultProps = { report: {}, isSmallSizeLayout: false, + personalDetails: {}, }; function AnonymousReportFooter(props) { @@ -30,7 +34,7 @@ function AnonymousReportFooter(props) { diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 1cc12fca24ae..b8bfb4c36122 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -31,11 +31,14 @@ import useWindowDimensions from '../hooks/useWindowDimensions'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import useNativeDriver from '../libs/useNativeDriver'; -import * as ReportUtils from '../libs/ReportUtils'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; +import * as ReportUtils from '../libs/ReportUtils'; import ONYXKEYS from '../ONYXKEYS'; import * as Policy from '../libs/actions/Policy'; import useNetwork from '../hooks/useNetwork'; +import * as IOU from '../libs/actions/IOU'; +import transactionPropTypes from './transactionPropTypes'; +import * as TransactionUtils from '../libs/TransactionUtils'; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -79,6 +82,9 @@ const propTypes = { /** The report that has this attachment */ report: reportPropTypes, + /** The transaction associated with the receipt attachment, if any */ + transaction: transactionPropTypes, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -97,6 +103,7 @@ const defaultProps = { allowDownload: false, headerTitle: null, report: {}, + transaction: {}, onModalShow: () => {}, onModalHide: () => {}, onCarouselAttachmentChange: () => {}, @@ -108,6 +115,7 @@ function AttachmentModal(props) { const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen); const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false); const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false); + const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false); const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired); const [isAttachmentReceipt, setIsAttachmentReceipt] = useState(false); const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(''); @@ -205,12 +213,22 @@ function AttachmentModal(props) { }, [isModalOpen, isConfirmButtonDisabled, props.onConfirm, file, source]); /** - * Close the confirm modal. + * Close the confirm modals. */ const closeConfirmModal = useCallback(() => { setIsAttachmentInvalid(false); + setIsDeleteReceiptConfirmModalVisible(false); }, []); + /** + * Detach the receipt and close the modal. + */ + const deleteAndCloseModal = useCallback(() => { + IOU.detachReceipt(props.transaction.transactionID, props.report.reportID); + setIsDeleteReceiptConfirmModalVisible(false); + Navigation.dismissModal(props.report.reportID); + }, [props.transaction, props.report]); + /** * @param {Object} _file * @returns {Boolean} @@ -358,9 +376,18 @@ function AttachmentModal(props) { text: props.translate('common.download'), onSelected: () => downloadAttachment(source), }); + if (TransactionUtils.hasReceipt(props.transaction) && !TransactionUtils.isReceiptBeingScanned(props.transaction)) { + menuItems.push({ + icon: Expensicons.Trashcan, + text: props.translate('receipt.deleteReceipt'), + onSelected: () => { + setIsDeleteReceiptConfirmModalVisible(true); + }, + }); + } return menuItems; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isAttachmentReceipt, props.parentReport, props.parentReportActions, props.policy]); + }, [isAttachmentReceipt, props.parentReport, props.parentReportActions, props.policy, props.transaction]); return ( <> @@ -442,18 +469,30 @@ function AttachmentModal(props) { )} )} + {isAttachmentReceipt ? ( + + ) : ( + + )} - - {props.children && props.children({ displayFileInModal: validateAndDisplayFileToUpload, @@ -470,6 +509,16 @@ export default compose( withWindowDimensions, withLocalize, withOnyx({ + transaction: { + key: ({report}) => { + if (!report) { + return undefined; + } + const parentReportAction = ReportActionsUtils.getReportAction(report.parentReportID, report.parentReportActionID); + const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], 0); + return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; + }, + }, parentReport: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '0'}`, }, diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js index 8b1bb54da920..063314a4268c 100644 --- a/src/components/AttachmentPicker/index.native.js +++ b/src/components/AttachmentPicker/index.native.js @@ -1,10 +1,12 @@ import _ from 'underscore'; import React, {useState, useRef, useCallback, useMemo} from 'react'; -import {View, Alert, Linking} from 'react-native'; +import PropTypes from 'prop-types'; +import {View, Alert} from 'react-native'; import RNDocumentPicker from 'react-native-document-picker'; import RNFetchBlob from 'react-native-blob-util'; +import lodashCompact from 'lodash/compact'; import {launchImageLibrary} from 'react-native-image-picker'; -import {propTypes as basePropTypes, defaultProps} from './attachmentPickerPropTypes'; +import {propTypes as basePropTypes, defaultProps as baseDefaultProps} from './attachmentPickerPropTypes'; import CONST from '../../CONST'; import * as FileUtils from '../../libs/fileDownload/FileUtils'; import * as Expensicons from '../Icon/Expensicons'; @@ -19,6 +21,14 @@ import useArrowKeyFocusManager from '../../hooks/useArrowKeyFocusManager'; const propTypes = { ...basePropTypes, + + /** If this value is true, then we exclude Camera option. */ + shouldHideCameraOption: PropTypes.bool, +}; + +const defaultProps = { + ...baseDefaultProps, + shouldHideCameraOption: false, }; /** @@ -90,7 +100,7 @@ const getDataForUpload = (fileData) => { * @param {propTypes} props * @returns {JSX.Element} */ -function AttachmentPicker({type, children}) { +function AttachmentPicker({type, children, shouldHideCameraOption}) { const [isVisible, setIsVisible] = useState(false); const completeAttachmentSelection = useRef(); @@ -100,27 +110,6 @@ function AttachmentPicker({type, children}) { const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); - /** - * Inform the users when they need to grant camera access and guide them to settings - */ - const showPermissionsAlert = useCallback(() => { - Alert.alert( - translate('attachmentPicker.cameraPermissionRequired'), - translate('attachmentPicker.expensifyDoesntHaveAccessToCamera'), - [ - { - text: translate('common.cancel'), - style: 'cancel', - }, - { - text: translate('common.settings'), - onPress: () => Linking.openSettings(), - }, - ], - {cancelable: false}, - ); - }, [translate]); - /** * A generic handling when we don't know the exact reason for an error */ @@ -145,7 +134,7 @@ function AttachmentPicker({type, children}) { if (response.errorCode) { switch (response.errorCode) { case 'permission': - showPermissionsAlert(); + FileUtils.showCameraPermissionsAlert(); return resolve(); default: showGeneralAlert(); @@ -158,7 +147,7 @@ function AttachmentPicker({type, children}) { return resolve(response.assets); }); }), - [showGeneralAlert, showPermissionsAlert, type], + [showGeneralAlert, type], ); /** @@ -180,8 +169,8 @@ function AttachmentPicker({type, children}) { ); const menuItemData = useMemo(() => { - const data = [ - { + const data = lodashCompact([ + !shouldHideCameraOption && { icon: Expensicons.Camera, textTranslationKey: 'attachmentPicker.takePhoto', pickAttachment: () => showImagePicker(launchCamera), @@ -191,18 +180,15 @@ function AttachmentPicker({type, children}) { textTranslationKey: 'attachmentPicker.chooseFromGallery', pickAttachment: () => showImagePicker(launchImageLibrary), }, - ]; - - if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE) { - data.push({ + type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE && { icon: Expensicons.Paperclip, textTranslationKey: 'attachmentPicker.chooseDocument', pickAttachment: showDocumentPicker, - }); - } + }, + ]); return data; - }, [showDocumentPicker, showImagePicker, type]); + }, [showDocumentPicker, showImagePicker, type, shouldHideCameraOption]); const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: menuItemData.length - 1, isActive: isVisible}); diff --git a/src/components/Form.js b/src/components/Form.js index 9836bd818536..b4e639dcf964 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -76,6 +76,10 @@ const propTypes = { /** Container styles */ style: stylePropTypes, + /** Submit button container styles */ + // eslint-disable-next-line react/forbid-prop-types + submitButtonStyles: PropTypes.arrayOf(PropTypes.object), + /** Custom content to display in the footer after submit button */ footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), @@ -98,6 +102,7 @@ const defaultProps = { shouldValidateOnBlur: true, footerContent: null, style: [], + submitButtonStyles: [], validate: () => ({}), }; @@ -447,7 +452,7 @@ function Form(props) { focusInput.focus(); } }} - containerStyles={[styles.mh0, styles.mt5, styles.flex1]} + containerStyles={[styles.mh0, styles.mt5, styles.flex1, ...props.submitButtonStyles]} enabledWhenOffline={props.enabledWhenOffline} isSubmitActionDangerous={props.isSubmitActionDangerous} disablePressOnEnter @@ -472,6 +477,7 @@ function Form(props) { props.isSubmitActionDangerous, props.isSubmitButtonVisible, props.submitButtonText, + props.submitButtonStyles, ], ); diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 5261d1258ad0..76471aeab51a 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -106,7 +106,7 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c const onValidate = useCallback( (values) => { - const validateErrors = validate(values); + const validateErrors = validate(values) || {}; setErrors(validateErrors); return validateErrors; }, diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js deleted file mode 100644 index 6ca3cce6412c..000000000000 --- a/src/components/KeyboardShortcutsModal.js +++ /dev/null @@ -1,196 +0,0 @@ -import React, {useEffect, useRef, useState} from 'react'; -import PropTypes from 'prop-types'; -import {View, ScrollView} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; -import HeaderWithBackButton from './HeaderWithBackButton'; -import Text from './Text'; -import Modal from './Modal'; -import CONST from '../CONST'; -import styles from '../styles/styles'; -import * as StyleUtils from '../styles/StyleUtils'; -import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import compose from '../libs/compose'; -import KeyboardShortcut from '../libs/KeyboardShortcut'; -import * as KeyboardShortcutsActions from '../libs/actions/KeyboardShortcuts'; -import * as ModalActions from '../libs/actions/Modal'; -import ONYXKEYS from '../ONYXKEYS'; - -const propTypes = { - /** prop to set shortcuts modal visibility */ - isShortcutsModalOpen: PropTypes.bool, - - /** prop to fetch screen width */ - ...windowDimensionsPropTypes, - - /** props to fetch translation functions */ - ...withLocalizePropTypes, -}; - -const defaultProps = { - isShortcutsModalOpen: false, -}; - -const closeShortcutEscapeModalConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; -const closeShortcutEnterModalConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; -const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP; -const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN; -const openShortcutModalConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUT_MODAL; - -function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidth, translate}) { - const subscribedOpenModalShortcuts = useRef([]); - const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE; - const [shortcuts, setShortcurts] = useState([]); - - /* - * Subscribe shortcuts that only are used when the modal is open - */ - const subscribeOpenModalShortcuts = () => { - // Allow closing the modal with the both Enter and Escape keys - // Both callbacks have the lowest priority (0) to ensure that they are called before any other callbacks - // and configured so that event propagation is stopped after the callback is called (only when the modal is open) - - subscribedOpenModalShortcuts.current = [ - KeyboardShortcut.subscribe( - closeShortcutEscapeModalConfig.shortcutKey, - () => { - ModalActions.close(); - KeyboardShortcutsActions.hideKeyboardShortcutModal(); - }, - closeShortcutEscapeModalConfig.descriptionKey, - closeShortcutEscapeModalConfig.modifiers, - true, - true, - ), - - KeyboardShortcut.subscribe( - closeShortcutEnterModalConfig.shortcutKey, - () => { - ModalActions.close(); - KeyboardShortcutsActions.hideKeyboardShortcutModal(); - }, - closeShortcutEnterModalConfig.descriptionKey, - closeShortcutEnterModalConfig.modifiers, - true, - ), - - // Intercept arrow up and down keys to prevent scrolling ArrowKeyFocusManager while this modal is open - KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => {}, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true), - KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => {}, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true), - ]; - setShortcurts(KeyboardShortcut.getDocumentedShortcuts()); - }; - - /* - * Unsubscribe all shortcuts that were subscribed when the modal opened - */ - const unsubscribeOpenModalShortcuts = () => { - _.each(subscribedOpenModalShortcuts.current, (unsubscribe) => unsubscribe()); - subscribedOpenModalShortcuts.current = []; - }; - - /** - * Render single row for the Keyboard shortcuts with description - * @param {Object} shortcut - * @param {Boolean} isFirstRow - * @returns {*} - */ - const renderRow = (shortcut, isFirstRow) => ( - - - {shortcut.displayName} - - - {translate(`keyboardShortcutModal.shortcuts.${shortcut.descriptionKey}`)} - - - ); - - useEffect(() => { - const unsubscribeShortcutModal = KeyboardShortcut.subscribe( - openShortcutModalConfig.shortcutKey, - () => { - if (isShortcutsModalOpen) { - return; - } - - ModalActions.close(); - KeyboardShortcutsActions.showKeyboardShortcutModal(); - }, - openShortcutModalConfig.descriptionKey, - openShortcutModalConfig.modifiers, - true, - ); - - if (isShortcutsModalOpen) { - // The modal started open, which can happen if you reload the page when the modal is open. - subscribeOpenModalShortcuts(); - } - - return () => { - if (unsubscribeShortcutModal) { - unsubscribeShortcutModal(); - } - unsubscribeOpenModalShortcuts(); - }; - // We only want this to run on mount - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - useEffect(() => { - if (isShortcutsModalOpen) { - subscribeOpenModalShortcuts(); - } else { - // Modal is closing, remove keyboard shortcuts - unsubscribeOpenModalShortcuts(); - } - // subscribeOpenModalShortcuts and unsubscribeOpenModalShortcuts functions are not added as dependencies since they don't change between renders - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isShortcutsModalOpen]); - - return ( - - - - {translate('keyboardShortcutModal.subtitle')} - - - {_.map(shortcuts, (shortcut, index) => { - const isFirstRow = index === 0; - return renderRow(shortcut, isFirstRow); - })} - - - - - ); -} - -KeyboardShortcutsModal.propTypes = propTypes; -KeyboardShortcutsModal.defaultProps = defaultProps; -KeyboardShortcutsModal.displayName = 'KeyboardShortcutsModal'; - -export default compose( - withWindowDimensions, - withLocalize, - withOnyx({ - isShortcutsModalOpen: { - key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN, - initWithStoredValues: false, - }, - }), -)(KeyboardShortcutsModal); diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 27a697fc458c..8866d61d3870 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -85,31 +85,8 @@ const avatarSizeToStylesMap = { secondAvatarStyles: styles.secondAvatar, }, }; - -function getContainerStyles(size, isInReportAction) { - let containerStyles; - - switch (size) { - case CONST.AVATAR_SIZE.SMALL: - containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall]; - break; - case CONST.AVATAR_SIZE.SMALLER: - containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller]; - break; - case CONST.AVATAR_SIZE.MEDIUM: - containerStyles = [styles.emptyAvatarMedium, styles.emptyAvatarMargin]; - break; - case CONST.AVATAR_SIZE.LARGE: - containerStyles = [styles.emptyAvatarLarge, styles.mb2, styles.mr2]; - break; - default: - containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin]; - } - - return containerStyles; -} function MultipleAvatars(props) { - let avatarContainerStyles = getContainerStyles(props.size, props.isInReportAction); + let avatarContainerStyles = StyleUtils.getContainerStyles(props.size, props.isInReportAction); const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[props.size] || avatarSizeToStylesMap.default, [props.size]); const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : ['']; diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index 98a1a1ce7edf..3201388790c9 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -1,14 +1,16 @@ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import moment from 'moment'; import PropTypes from 'prop-types'; +import _ from 'lodash'; import TextInput from '../TextInput'; import CONST from '../../CONST'; import styles from '../../styles/styles'; import * as Expensicons from '../Icon/Expensicons'; -import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '../TextInput/baseTextInputPropTypes'; +import {defaultProps as defaultBaseTextInputPropTypes, propTypes as baseTextInputPropTypes} from '../TextInput/baseTextInputPropTypes'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import CalendarPicker from './CalendarPicker'; +import InputWrapper from '../Form/InputWrapper'; const propTypes = { /** @@ -23,6 +25,8 @@ const propTypes = { */ defaultValue: PropTypes.string, + inputID: PropTypes.string.isRequired, + /** A minimum date of calendar to select */ minDate: PropTypes.objectOf(Date), @@ -40,66 +44,58 @@ const datePickerDefaultProps = { value: undefined, }; -class NewDatePicker extends React.Component { - constructor(props) { - super(props); - - this.state = { - selectedDate: props.value || props.defaultValue || undefined, - }; +function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value}) { + const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined); - this.setDate = this.setDate.bind(this); - } - - componentDidUpdate(prevProps) { - if (prevProps.value === this.props.value) { + useEffect(() => { + if (selectedDate === value || _.isUndefined(value)) { return; } - this.setDate(this.props.value); - } + setSelectedDate(value); + }, [selectedDate, value]); - /** - * Trigger the `onInputChange` handler when the user input has a complete date or is cleared - * @param {string} selectedDate - */ - setDate(selectedDate) { - this.setState({selectedDate}, () => { - this.props.onTouched(); - this.props.onInputChange(selectedDate); - }); - } + useEffect(() => { + if (_.isFunction(onTouched)) { + onTouched(); + } + if (_.isFunction(onInputChange)) { + onInputChange(selectedDate); + } + // To keep behavior from class component state update callback, we want to run effect only when the selected date is changed. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedDate]); - render() { - return ( - - - - - - - + return ( + + + + + + - ); - } + + ); } NewDatePicker.propTypes = propTypes; diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 65f4bc64cee0..e72bb7ef4b8e 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -72,7 +72,7 @@ class BaseOptionsSelector extends Component { this.subscribeToKeyboardShortcut(); if (this.props.isFocused && this.props.autoFocus && this.textInput) { - setTimeout(() => { + this.focusTimeout = setTimeout(() => { this.textInput.focus(); }, CONST.ANIMATED_TRANSITION); } diff --git a/src/components/QRShare/QRShareWithDownload/index.js b/src/components/QRShare/QRShareWithDownload/index.js index 665115823357..b16f22dc6483 100644 --- a/src/components/QRShare/QRShareWithDownload/index.js +++ b/src/components/QRShare/QRShareWithDownload/index.js @@ -3,6 +3,7 @@ import fileDownload from '../../../libs/fileDownload'; import QRShare from '..'; import {qrShareDefaultProps, qrSharePropTypes} from '../propTypes'; import getQrCodeFileName from '../getQrCodeDownloadFileName'; +import {withNetwork} from '../../OnyxProvider'; class QRShareWithDownload extends Component { qrShareRef = React.createRef(); @@ -31,6 +32,7 @@ class QRShareWithDownload extends Component { ref={this.qrShareRef} // eslint-disable-next-line react/jsx-props-no-spreading {...this.props} + logo={this.props.network.isOffline ? null : this.props.logo} /> ); } @@ -38,4 +40,4 @@ class QRShareWithDownload extends Component { QRShareWithDownload.propTypes = qrSharePropTypes; QRShareWithDownload.defaultProps = qrShareDefaultProps; -export default QRShareWithDownload; +export default withNetwork()(QRShareWithDownload); diff --git a/src/components/QRShare/QRShareWithDownload/index.native.js b/src/components/QRShare/QRShareWithDownload/index.native.js index 6154b8137bf3..66fe7a6762d0 100644 --- a/src/components/QRShare/QRShareWithDownload/index.native.js +++ b/src/components/QRShare/QRShareWithDownload/index.native.js @@ -4,6 +4,7 @@ import fileDownload from '../../../libs/fileDownload'; import QRShare from '..'; import {qrShareDefaultProps, qrSharePropTypes} from '../propTypes'; import getQrCodeFileName from '../getQrCodeDownloadFileName'; +import {withNetwork} from '../../OnyxProvider'; class QRShareWithDownload extends Component { qrCodeScreenshotRef = React.createRef(); @@ -24,6 +25,7 @@ class QRShareWithDownload extends Component { ); @@ -32,4 +34,4 @@ class QRShareWithDownload extends Component { QRShareWithDownload.propTypes = qrSharePropTypes; QRShareWithDownload.defaultProps = qrShareDefaultProps; -export default QRShareWithDownload; +export default withNetwork()(QRShareWithDownload); diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index b4101d9b5721..c7ca93e87694 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -164,7 +164,8 @@ function MoneyRequestPreview(props) { const isScanning = hasReceipt && TransactionUtils.isReceiptBeingScanned(props.transaction); const hasFieldErrors = TransactionUtils.hasMissingSmartscanFields(props.transaction); const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction); - const isSettled = ReportUtils.isSettled(props.iouReport); + const isExpensifyCardTransaction = TransactionUtils.isExpensifyCardTransaction(props.transaction); + const isSettled = ReportUtils.isSettled(props.iouReport.reportID); // Show the merchant for IOUs and expenses only if they are custom or not related to scanning smartscan const shouldShowMerchant = @@ -174,6 +175,9 @@ function MoneyRequestPreview(props) { const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename || '')] : []; const getSettledMessage = () => { + if (isExpensifyCardTransaction || isDistanceRequest) { + return props.translate('common.done'); + } switch (lodashGet(props.action, 'originalMessage.paymentType', '')) { case CONST.IOU.PAYMENT_TYPE.EXPENSIFY: return props.translate('iou.settledExpensify'); @@ -199,13 +203,19 @@ function MoneyRequestPreview(props) { return props.translate('iou.split'); } + if (isExpensifyCardTransaction) { + let message = props.translate('iou.card'); + if (TransactionUtils.isPending(props.transaction)) { + message += ` • ${props.translate('iou.pending')}`; + } + return message; + } + let message = props.translate('iou.cash'); if (ReportUtils.isControlPolicyExpenseReport(props.iouReport) && ReportUtils.isReportApproved(props.iouReport) && !ReportUtils.isSettled(props.iouReport)) { message += ` • ${props.translate('iou.approved')}`; } else if (props.iouReport.isWaitingOnBankAccount) { message += ` • ${props.translate('iou.pending')}`; - } else if (ReportUtils.isSettled(props.iouReport.reportID)) { - message += ` • ${props.translate('iou.settledExpensify')}`; } return message; }; diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js index 4102ae5ec043..b34251aacd1a 100644 --- a/src/components/SubscriptAvatar.js +++ b/src/components/SubscriptAvatar.js @@ -43,7 +43,7 @@ const defaultProps = { function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, noMargin, showTooltip}) { const isSmall = size === CONST.AVATAR_SIZE.SMALL; const subscriptStyle = size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript; - const containerStyle = isSmall ? styles.emptyAvatarSmall : styles.emptyAvatar; + const containerStyle = StyleUtils.getContainerStyles(size); // Default the margin style to what is normal for small or normal sized avatars let marginStyle = isSmall ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin; diff --git a/src/languages/en.ts b/src/languages/en.ts index 72e183fc8561..efd8835ddce1 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -506,6 +506,8 @@ export default { flash: 'flash', shutter: 'shutter', gallery: 'gallery', + deleteReceipt: 'Delete receipt', + deleteConfirmation: 'Are you sure you want to delete this receipt?', addReceipt: 'Add receipt', }, iou: { @@ -513,6 +515,7 @@ export default { approve: 'Approve', approved: 'Approved', cash: 'Cash', + card: 'Card', split: 'Split', addToSplit: 'Add to split', splitBill: 'Split bill', @@ -523,6 +526,7 @@ export default { pay: 'Pay', viewDetails: 'View details', pending: 'Pending', + posted: 'Posted', deleteReceipt: 'Delete receipt', receiptScanning: 'Receipt scan in progress…', receiptMissingDetails: 'Receipt missing details', @@ -1589,7 +1593,7 @@ export default { statementPage: { generatingPDF: "We're generating your PDF right now. Please come back later!", }, - keyboardShortcutModal: { + keyboardShortcutsPage: { title: 'Keyboard shortcuts', subtitle: 'Save time with these handy keyboard shortcuts:', shortcuts: { diff --git a/src/languages/es.ts b/src/languages/es.ts index eed5c75e2269..7aca4d09c6be 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -498,6 +498,8 @@ export default { flash: 'flash', shutter: 'obturador', gallery: 'galería', + deleteReceipt: 'Eliminar recibo', + deleteConfirmation: '¿Estás seguro de que quieres borrar este recibo?', addReceipt: 'Añadir recibo', }, iou: { @@ -505,6 +507,7 @@ export default { approve: 'Aprobar', approved: 'Aprobado', cash: 'Efectivo', + card: 'Tarjeta', split: 'Dividir', addToSplit: 'Añadir para dividir', splitBill: 'Dividir factura', @@ -515,6 +518,7 @@ export default { pay: 'Pagar', viewDetails: 'Ver detalles', pending: 'Pendiente', + posted: 'Contabilizado', deleteReceipt: 'Eliminar recibo', receiptScanning: 'Escaneo de recibo en curso…', receiptMissingDetails: 'Recibo con campos vacíos', @@ -1613,7 +1617,7 @@ export default { statementPage: { generatingPDF: 'Estamos generando tu PDF ahora mismo. ¡Por favor, vuelve más tarde!', }, - keyboardShortcutModal: { + keyboardShortcutsPage: { title: 'Atajos de teclado', subtitle: 'Ahorra tiempo con estos atajos de teclado:', shortcuts: { diff --git a/src/libs/Clipboard/index.js b/src/libs/Clipboard/index.js index b770b2f2c787..6fbaa8eccd31 100644 --- a/src/libs/Clipboard/index.js +++ b/src/libs/Clipboard/index.js @@ -1,5 +1,4 @@ -// on Web/desktop this import will be replaced with `react-native-web` -import {Clipboard} from 'react-native-web'; +import Clipboard from '@react-native-clipboard/clipboard'; import lodashGet from 'lodash/get'; import CONST from '../../CONST'; import * as Browser from '../Browser'; diff --git a/src/libs/Clipboard/index.native.js b/src/libs/Clipboard/index.native.js index d6345ac94a36..fe79e38585c4 100644 --- a/src/libs/Clipboard/index.native.js +++ b/src/libs/Clipboard/index.native.js @@ -1,7 +1,7 @@ -import Clipboard from '@react-native-community/clipboard'; +import Clipboard from '@react-native-clipboard/clipboard'; /** - * Sets a string on the Clipboard object via @react-native-community/clipboard + * Sets a string on the Clipboard object via @react-native-clipboard/clipboard * * @param {String} text */ diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js index f91c81a1b856..bce65744801c 100644 --- a/src/libs/KeyboardShortcut/index.js +++ b/src/libs/KeyboardShortcut/index.js @@ -164,7 +164,9 @@ function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOn */ const KeyboardShortcut = { subscribe, + getDisplayName, getDocumentedShortcuts, + getPlatformEquivalentForKeys, }; export default KeyboardShortcut; diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 428550a43aa8..7c8f961bf70a 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -176,12 +176,25 @@ class AuthScreens extends React.Component { Download.clearDownloads(); Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER); + const shortcutsOverviewShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUTS; const searchShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SEARCH; const chatShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_CHAT; - // Listen for the key K being pressed so that focus can be given to - // the chat switcher, or new group chat - // based on the key modifiers pressed and the operating system + // Listen to keyboard shortcuts for opening certain pages + this.unsubscribeShortcutsOverviewShortcut = KeyboardShortcut.subscribe( + shortcutsOverviewShortcutConfig.shortcutKey, + () => { + Modal.close(() => { + if (Navigation.isActiveRoute(ROUTES.KEYBOARD_SHORTCUTS)) { + return; + } + return Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS); + }); + }, + shortcutsOverviewShortcutConfig.descriptionKey, + shortcutsOverviewShortcutConfig.modifiers, + true, + ); this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe( searchShortcutConfig.shortcutKey, () => { @@ -217,6 +230,9 @@ class AuthScreens extends React.Component { } componentWillUnmount() { + if (this.unsubscribeShortcutsOverviewShortcut) { + this.unsubscribeShortcutsOverviewShortcut(); + } if (this.unsubscribeSearchShortcut) { this.unsubscribeSearchShortcut(); } diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index c32120db2e45..ea557709da3c 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -153,6 +153,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({ Settings_Status_Set: () => require('../../../pages/settings/Profile/CustomStatus/StatusSetPage').default, Workspace_Initial: () => require('../../../pages/workspace/WorkspaceInitialPage').default, Workspace_Settings: () => require('../../../pages/workspace/WorkspaceSettingsPage').default, + Workspace_Settings_Currency: () => require('../../../pages/workspace/WorkspaceSettingsCurrencyPage').default, Workspace_Card: () => require('../../../pages/workspace/card/WorkspaceCardPage').default, Workspace_Reimburse: () => require('../../../pages/workspace/reimburse/WorkspaceReimbursePage').default, Workspace_RateAndUnit: () => require('../../../pages/workspace/reimburse/WorkspaceRateAndUnitPage').default, @@ -165,6 +166,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({ ReimbursementAccount: () => require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default, GetAssistance: () => require('../../../pages/GetAssistancePage').default, Settings_TwoFactorAuth: () => require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default, + KeyboardShortcuts: () => require('../../../pages/KeyboardShortcutsPage').default, }); const EnablePaymentsStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 5616e8d63797..60182b925a32 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -185,6 +185,9 @@ export default { Workspace_Settings: { path: ROUTES.WORKSPACE_SETTINGS.route, }, + Workspace_Settings_Currency: { + path: ROUTES.WORKSPACE_SETTINGS_CURRENCY.route, + }, Workspace_Card: { path: ROUTES.WORKSPACE_CARD.route, }, @@ -219,6 +222,9 @@ export default { GetAssistance: { path: ROUTES.GET_ASSISTANCE.route, }, + KeyboardShortcuts: { + path: ROUTES.KEYBOARD_SHORTCUTS, + }, }, }, Private_Notes: { diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 82285545b303..4467746475aa 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -91,33 +91,6 @@ Onyx.connect({ }, }); -/** - * Get the option for a policy expense report. - * @param {Object} report - * @returns {Object} - */ -function getPolicyExpenseReportOption(report) { - const expenseReport = policyExpenseReports[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`]; - const policyExpenseChatAvatarSource = ReportUtils.getWorkspaceAvatar(expenseReport); - const reportName = ReportUtils.getReportName(expenseReport); - return { - ...expenseReport, - keyForList: expenseReport.policyID, - text: reportName, - alternateText: Localize.translateLocal('workspace.common.workspace'), - icons: [ - { - source: policyExpenseChatAvatarSource, - name: reportName, - type: CONST.ICON_TYPE_WORKSPACE, - }, - ], - selected: report.selected, - isPolicyExpenseChat: true, - searchText: report.searchText, - }; -} - /** * Adds expensify SMS domain (@expensify.sms) if login is a phone number and if it's not included yet * @@ -562,6 +535,28 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, { return result; } +/** + * Get the option for a policy expense report. + * @param {Object} report + * @returns {Object} + */ +function getPolicyExpenseReportOption(report) { + const expenseReport = policyExpenseReports[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`]; + + const option = createOption( + expenseReport.participantAccountIDs, + allPersonalDetails, + expenseReport, + {}, + { + showChatPreviewLine: false, + forcePolicyNamePreview: false, + }, + ); + option.selected = report.selected; + return option; +} + /** * Searches for a match when provided with a value * diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts index b5b8271c35a3..716247d571b8 100644 --- a/src/libs/TransactionUtils.ts +++ b/src/libs/TransactionUtils.ts @@ -3,6 +3,7 @@ import {format, parseISO, isValid} from 'date-fns'; import CONST from '../CONST'; import ONYXKEYS from '../ONYXKEYS'; import DateUtils from './DateUtils'; +import {isExpensifyCard} from './CardUtils'; import * as NumberUtils from './NumberUtils'; import {RecentWaypoint, ReportAction, Transaction} from '../types/onyx'; import {Receipt, Comment, WaypointCollection} from '../types/onyx/Transaction'; @@ -277,6 +278,27 @@ function isDistanceRequest(transaction: Transaction): boolean { return type === CONST.TRANSACTION.TYPE.CUSTOM_UNIT && customUnitName === CONST.CUSTOM_UNITS.NAME_DISTANCE; } +function isExpensifyCardTransaction(transaction: Transaction): boolean { + if (!transaction.cardID) { + return false; + } + return isExpensifyCard(transaction.cardID); +} + +function isPending(transaction: Transaction): boolean { + if (!transaction.status) { + return false; + } + return transaction.status === CONST.TRANSACTION.STATUS.PENDING; +} + +function isPosted(transaction: Transaction): boolean { + if (!transaction.status) { + return false; + } + return transaction.status === CONST.TRANSACTION.STATUS.POSTED; +} + function isReceiptBeingScanned(transaction: Transaction): boolean { return [CONST.IOU.RECEIPT_STATE.SCANREADY, CONST.IOU.RECEIPT_STATE.SCANNING].some((value) => value === transaction.receipt.state); } @@ -404,6 +426,9 @@ export { isReceiptBeingScanned, getValidWaypoints, isDistanceRequest, + isExpensifyCardTransaction, + isPending, + isPosted, getWaypoints, hasMissingSmartscanFields, getWaypointIndex, diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index d5676672dd33..bc6ee9be4e0b 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -1936,7 +1936,7 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType } const optimisticIOUReport = ReportUtils.buildOptimisticIOUReport(recipientAccountID, managerID, amount, chatReport.reportID, currency, true); - const optimisticTransaction = TransactionUtils.buildOptimisticTransaction(amount * 100, currency, optimisticIOUReport.reportID, comment); + const optimisticTransaction = TransactionUtils.buildOptimisticTransaction(amount, currency, optimisticIOUReport.reportID, comment); const optimisticTransactionData = { onyxMethod: Onyx.METHOD.SET, key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`, @@ -2431,6 +2431,29 @@ function payMoneyRequest(paymentType, chatReport, iouReport) { Navigation.dismissModal(chatReport.reportID); } +function detachReceipt(transactionID) { + const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] || {}; + const newTransaction = {...transaction, filename: '', receipt: {}}; + + const optimisticData = [ + { + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: newTransaction, + }, + ]; + + const failureData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: transaction, + }, + ]; + + API.write('DetachReceipt', {transactionID}, {optimisticData, failureData}); +} + /** * @param {String} transactionID * @param {Object} receipt @@ -2663,5 +2686,6 @@ export { navigateToNextPage, updateDistanceRequest, replaceReceipt, + detachReceipt, getIOUReportID, }; diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js index edb169fc96aa..388010e99569 100644 --- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js +++ b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js @@ -1,20 +1,20 @@ import Onyx from 'react-native-onyx'; import CONST from '../../../CONST'; import ONYXKEYS from '../../../ONYXKEYS'; -import * as store from './store'; import * as API from '../../API'; import * as PlaidDataProps from '../../../pages/ReimbursementAccount/plaidDataPropTypes'; import * as ReimbursementAccountProps from '../../../pages/ReimbursementAccount/reimbursementAccountPropTypes'; /** * Reset user's reimbursement account. This will delete the bank account. - * @param {number} bankAccountID + * @param {Number} bankAccountID + * @param {Object} session */ -function resetFreePlanBankAccount(bankAccountID) { +function resetFreePlanBankAccount(bankAccountID, session) { if (!bankAccountID) { throw new Error('Missing bankAccountID when attempting to reset free plan bank account'); } - if (!store.getCredentials() || !store.getCredentials().login) { + if (!session.email) { throw new Error('Missing credentials when attempting to reset free plan bank account'); } @@ -22,7 +22,7 @@ function resetFreePlanBankAccount(bankAccountID) { 'RestartBankAccountSetup', { bankAccountID, - ownerEmail: store.getCredentials().login, + ownerEmail: session.email, }, { optimisticData: [ diff --git a/src/libs/fileDownload/FileUtils.js b/src/libs/fileDownload/FileUtils.js index e508d096128d..ba06b80f7c43 100644 --- a/src/libs/fileDownload/FileUtils.js +++ b/src/libs/fileDownload/FileUtils.js @@ -48,6 +48,27 @@ function showPermissionErrorAlert() { ]); } +/** + * Inform the users when they need to grant camera access and guide them to settings + */ +function showCameraPermissionsAlert() { + Alert.alert( + Localize.translateLocal('attachmentPicker.cameraPermissionRequired'), + Localize.translateLocal('attachmentPicker.expensifyDoesntHaveAccessToCamera'), + [ + { + text: Localize.translateLocal('common.cancel'), + style: 'cancel', + }, + { + text: Localize.translateLocal('common.settings'), + onPress: () => Linking.openSettings(), + }, + ], + {cancelable: false}, + ); +} + /** * Generate a random file name with timestamp and file extension * @param {String} url @@ -170,4 +191,55 @@ const readFileAsync = (path, fileName) => }); }); -export {showGeneralErrorAlert, showSuccessAlert, showPermissionErrorAlert, splitExtensionFromFileName, getAttachmentName, getFileType, cleanFileName, appendTimeToFileName, readFileAsync}; +/** + * Converts a base64 encoded image string to a File instance. + * Adds a `uri` property to the File instance for accessing the blob as a URI. + * + * @param {string} base64 - The base64 encoded image string. + * @param {string} filename - Desired filename for the File instance. + * @returns {File} The File instance created from the base64 string with an additional `uri` property. + * + * @example + * const base64Image = "data:image/png;base64,..."; // your base64 encoded image + * const imageFile = base64ToFile(base64Image, "example.png"); + * console.log(imageFile.uri); // Blob URI + */ +function base64ToFile(base64, filename) { + // Decode the base64 string + const byteString = atob(base64.split(',')[1]); + + // Get the mime type from the base64 string + const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; + + // Convert byte string to Uint8Array + const arrayBuffer = new ArrayBuffer(byteString.length); + const uint8Array = new Uint8Array(arrayBuffer); + for (let i = 0; i < byteString.length; i++) { + uint8Array[i] = byteString.charCodeAt(i); + } + + // Create a blob from the Uint8Array + const blob = new Blob([uint8Array], {type: mimeString}); + + // Create a File instance from the Blob + const file = new File([blob], filename, {type: mimeString, lastModified: Date.now()}); + + // Add a uri property to the File instance for accessing the blob as a URI + file.uri = URL.createObjectURL(blob); + + return file; +} + +export { + showGeneralErrorAlert, + showSuccessAlert, + showPermissionErrorAlert, + showCameraPermissionsAlert, + splitExtensionFromFileName, + getAttachmentName, + getFileType, + cleanFileName, + appendTimeToFileName, + readFileAsync, + base64ToFile, +}; diff --git a/src/pages/ConciergePage.js b/src/pages/ConciergePage.js index e8509024b469..cfd452f0c952 100644 --- a/src/pages/ConciergePage.js +++ b/src/pages/ConciergePage.js @@ -32,8 +32,10 @@ function ConciergePage(props) { useFocusEffect(() => { if (_.has(props.session, 'authToken')) { // Pop the concierge loading page before opening the concierge report. - Navigation.goBack(ROUTES.HOME); - Report.navigateToConciergeChat(); + Navigation.isNavigationReady().then(() => { + Navigation.goBack(ROUTES.HOME); + Report.navigateToConciergeChat(); + }); } else { Navigation.navigate(); } diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js index 9edce7350400..d326e9115afc 100644 --- a/src/pages/EditRequestCreatedPage.js +++ b/src/pages/EditRequestCreatedPage.js @@ -2,11 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import ScreenWrapper from '../components/ScreenWrapper'; import HeaderWithBackButton from '../components/HeaderWithBackButton'; -import Form from '../components/Form'; import ONYXKEYS from '../ONYXKEYS'; import styles from '../styles/styles'; import useLocalize from '../hooks/useLocalize'; import NewDatePicker from '../components/NewDatePicker'; +import FormProvider from '../components/Form/FormProvider'; const propTypes = { /** Transaction defailt created value */ @@ -26,7 +26,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) { testID={EditRequestCreatedPage.displayName} > -
-
+ ); } diff --git a/src/pages/KeyboardShortcutsPage.js b/src/pages/KeyboardShortcutsPage.js new file mode 100644 index 000000000000..8ac26301e9fb --- /dev/null +++ b/src/pages/KeyboardShortcutsPage.js @@ -0,0 +1,61 @@ +import React from 'react'; +import {View, ScrollView} from 'react-native'; +import _ from 'underscore'; +import HeaderWithBackButton from '../components/HeaderWithBackButton'; +import ScreenWrapper from '../components/ScreenWrapper'; +import Text from '../components/Text'; +import styles from '../styles/styles'; +import CONST from '../CONST'; +import useLocalize from '../hooks/useLocalize'; +import KeyboardShortcut from '../libs/KeyboardShortcut'; +import MenuItem from '../components/MenuItem'; + +function KeyboardShortcutsPage() { + const {translate} = useLocalize(); + const shortcuts = _.chain(CONST.KEYBOARD_SHORTCUTS) + .filter((shortcut) => !_.isEmpty(shortcut.descriptionKey)) + .map((shortcut) => { + const platformAdjustedModifiers = KeyboardShortcut.getPlatformEquivalentForKeys(shortcut.modifiers); + return { + displayName: KeyboardShortcut.getDisplayName(shortcut.shortcutKey, platformAdjustedModifiers), + descriptionKey: shortcut.descriptionKey, + }; + }) + .value(); + + /** + * Render the information of a single shortcut + * @param {Object} shortcut + * @param {String} shortcut.displayName + * @param {String} shortcut.descriptionKey + * @returns {React.Component} + */ + const renderShortcut = (shortcut) => ( + + ); + + return ( + + + + + {translate('keyboardShortcutsPage.subtitle')} + {_.map(shortcuts, renderShortcut)} + + + + ); +} + +KeyboardShortcutsPage.displayName = 'KeyboardShortcutsPage'; + +export default KeyboardShortcutsPage; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 78f6edcf7dd3..6dba940f0ecb 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -438,6 +438,7 @@ function ReportScreen({ isComposerFullSize={isComposerFullSize} onSubmitComment={onSubmitComment} policies={policies} + personalDetails={personalDetails} /> ) : ( diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js index 04e444a73c6b..0711cd181964 100644 --- a/src/pages/home/report/ReportFooter.js +++ b/src/pages/home/report/ReportFooter.js @@ -18,6 +18,7 @@ import reportActionPropTypes from './reportActionPropTypes'; import reportPropTypes from '../../reportPropTypes'; import * as ReportUtils from '../../../libs/ReportUtils'; import * as Session from '../../../libs/actions/Session'; +import participantPropTypes from '../../../components/participantPropTypes'; const propTypes = { /** Report object for the current report */ @@ -32,6 +33,9 @@ const propTypes = { /** The pending action when we are adding a chat */ pendingAction: PropTypes.string, + /** Personal details of all the users */ + personalDetails: PropTypes.objectOf(participantPropTypes), + /** Whether the composer input should be shown */ shouldShowComposeInput: PropTypes.bool, @@ -49,6 +53,7 @@ const defaultProps = { reportActions: [], onSubmitComment: () => {}, pendingAction: null, + personalDetails: {}, shouldShowComposeInput: true, shouldDisableCompose: false, isReportReadyForDisplay: true, @@ -71,6 +76,7 @@ function ReportFooter(props) { )} {isArchivedRoom && } diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js index 65654aa8098a..fdf7b3a0fb30 100644 --- a/src/pages/iou/MoneyRequestDatePage.js +++ b/src/pages/iou/MoneyRequestDatePage.js @@ -5,7 +5,6 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; import ScreenWrapper from '../../components/ScreenWrapper'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; -import Form from '../../components/Form'; import ONYXKEYS from '../../ONYXKEYS'; import styles from '../../styles/styles'; import Navigation from '../../libs/Navigation/Navigation'; @@ -16,6 +15,7 @@ import NewDatePicker from '../../components/NewDatePicker'; import useLocalize from '../../hooks/useLocalize'; import CONST from '../../CONST'; import {iouPropTypes, iouDefaultProps} from './propTypes'; +import FormProvider from '../../components/Form/FormProvider'; const propTypes = { /** Onyx Props */ @@ -91,7 +91,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) { title={translate('common.date')} onBackButtonPress={() => navigateBack()} /> -
updateDate(value)} @@ -104,7 +104,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) { defaultValue={iou.created} maxDate={new Date()} /> -
+ ); } diff --git a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js index d1f7a3db63d3..9289fc6a2434 100644 --- a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js +++ b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js @@ -1,60 +1,75 @@ -import React, {useEffect, useState} from 'react'; -import {Camera} from 'react-native-vision-camera'; -import {useNavigation} from '@react-navigation/native'; +import React, {useEffect, useRef} from 'react'; +import Webcam from 'react-webcam'; +import {useIsFocused} from '@react-navigation/native'; import PropTypes from 'prop-types'; -import refPropTypes from '../../../components/refPropTypes'; +import {View} from 'react-native'; const propTypes = { - /* The index of the tab that contains this camera */ - cameraTabIndex: PropTypes.number.isRequired, + /* Flag to turn on/off the torch/flashlight - if available */ + torchOn: PropTypes.bool, - /* Forwarded ref */ - forwardedRef: refPropTypes.isRequired, + /* Callback function when media stream becomes available - user granted camera permissions and camera starts to work */ + onUserMedia: PropTypes.func, + + /* Callback function passing torch/flashlight capability as bool param of the browser */ + onTorchAvailability: PropTypes.func, +}; + +const defaultProps = { + onUserMedia: undefined, + onTorchAvailability: undefined, + torchOn: false, }; // Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused. -function NavigationAwareCamera({cameraTabIndex, forwardedRef, ...props}) { - // Get navigation to get initial isFocused value (only needed once during init!) - const navigation = useNavigation(); - const [isCameraActive, setIsCameraActive] = useState(navigation.isFocused()); - - // Note: The useEffect can be removed once VisionCamera V3 is used. - // Its only needed for android, because there is a native cameraX android bug. With out this flow would break the camera: - // 1. Open camera tab - // 2. Take a picture - // 3. Go back from the opened screen - // 4. The camera is not working anymore +function NavigationAwareCamera({torchOn, onTorchAvailability, ...props}, ref) { + const trackRef = useRef(null); + const isCameraActive = useIsFocused(); + + const handleOnUserMedia = (stream) => { + if (props.onUserMedia) { + props.onUserMedia(stream); + } + + const [track] = stream.getVideoTracks(); + const capabilities = track.getCapabilities(); + if (capabilities.torch) { + trackRef.current = track; + } + if (onTorchAvailability) { + onTorchAvailability(!!capabilities.torch); + } + }; + useEffect(() => { - const removeBlurListener = navigation.addListener('blur', () => { - setIsCameraActive(false); - }); - const removeFocusListener = navigation.addListener('focus', () => { - setIsCameraActive(true); - }); + if (!trackRef.current) { + return; + } - return () => { - removeBlurListener(); - removeFocusListener(); - }; - }, [navigation]); + trackRef.current.applyConstraints({ + advanced: [{torch: torchOn}], + }); + }, [torchOn]); + if (!isCameraActive) { + return null; + } return ( - + + + ); } NavigationAwareCamera.propTypes = propTypes; NavigationAwareCamera.displayName = 'NavigationAwareCamera'; +NavigationAwareCamera.defaultProps = defaultProps; -export default React.forwardRef((props, ref) => ( - -)); +export default React.forwardRef(NavigationAwareCamera); diff --git a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js new file mode 100644 index 000000000000..8fa153550cbe --- /dev/null +++ b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js @@ -0,0 +1,76 @@ +import React, {useEffect, useState} from 'react'; +import {Camera} from 'react-native-vision-camera'; +import {useTabAnimation} from '@react-navigation/material-top-tabs'; +import {useNavigation} from '@react-navigation/native'; +import PropTypes from 'prop-types'; +import refPropTypes from '../../../components/refPropTypes'; + +const propTypes = { + /* The index of the tab that contains this camera */ + cameraTabIndex: PropTypes.number.isRequired, + + /* Forwarded ref */ + forwardedRef: refPropTypes.isRequired, +}; + +// Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused. +function NavigationAwareCamera({cameraTabIndex, forwardedRef, ...props}) { + // Get navigation to get initial isFocused value (only needed once during init!) + const navigation = useNavigation(); + const [isCameraActive, setIsCameraActive] = useState(navigation.isFocused()); + + // Retrieve the animation value from the tab navigator, which ranges from 0 to the total number of pages displayed. + // Even a minimal scroll towards the camera page (e.g., a value of 0.001 at start) should activate the camera for immediate responsiveness. + const tabPositionAnimation = useTabAnimation(); + + useEffect(() => { + const listenerId = tabPositionAnimation.addListener(({value}) => { + // Activate camera as soon the index is animating towards the `cameraTabIndex` + setIsCameraActive(value > cameraTabIndex - 1 && value < cameraTabIndex + 1); + }); + + return () => { + tabPositionAnimation.removeListener(listenerId); + }; + }, [cameraTabIndex, tabPositionAnimation]); + + // Note: The useEffect can be removed once VisionCamera V3 is used. + // Its only needed for android, because there is a native cameraX android bug. With out this flow would break the camera: + // 1. Open camera tab + // 2. Take a picture + // 3. Go back from the opened screen + // 4. The camera is not working anymore + useEffect(() => { + const removeBlurListener = navigation.addListener('blur', () => { + setIsCameraActive(false); + }); + const removeFocusListener = navigation.addListener('focus', () => { + setIsCameraActive(true); + }); + + return () => { + removeBlurListener(); + removeFocusListener(); + }; + }, [navigation]); + + return ( + + ); +} + +NavigationAwareCamera.propTypes = propTypes; +NavigationAwareCamera.displayName = 'NavigationAwareCamera'; + +export default React.forwardRef((props, ref) => ( + +)); diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js index b4cf75801a3f..fba792029914 100644 --- a/src/pages/iou/ReceiptSelector/index.js +++ b/src/pages/iou/ReceiptSelector/index.js @@ -1,5 +1,5 @@ -import {View, Text, PanResponder, PixelRatio} from 'react-native'; -import React, {useContext, useRef, useState} from 'react'; +import {View, Text, PixelRatio, ActivityIndicator, PanResponder} from 'react-native'; +import React, {useCallback, useContext, useReducer, useRef, useState} from 'react'; import lodashGet from 'lodash/get'; import _ from 'underscore'; import PropTypes from 'prop-types'; @@ -21,6 +21,14 @@ import {DragAndDropContext} from '../../../components/DragAndDrop/Provider'; import {iouPropTypes, iouDefaultProps} from '../propTypes'; import * as FileUtils from '../../../libs/fileDownload/FileUtils'; import Navigation from '../../../libs/Navigation/Navigation'; +import * as Expensicons from '../../../components/Icon/Expensicons'; +import Icon from '../../../components/Icon'; +import themeColors from '../../../styles/themes/default'; +import Shutter from '../../../../assets/images/shutter.svg'; +import NavigationAwareCamera from './NavigationAwareCamera'; +import * as Browser from '../../../libs/Browser'; +import Hand from '../../../../assets/images/hand.svg'; +import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback'; const propTypes = { /** The report on which the request is initiated on */ @@ -59,16 +67,24 @@ const defaultProps = { isInTabNavigator: true, }; -function ReceiptSelector(props) { - const iouType = lodashGet(props.route, 'params.iouType', ''); +function ReceiptSelector({route, transactionID, iou, report}) { + const iouType = lodashGet(route, 'params.iouType', ''); + + // Grouping related states const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false); const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(''); const [attachmentInvalidReason, setAttachmentValidReason] = useState(''); + const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0); const {isSmallScreenWidth} = useWindowDimensions(); const {translate} = useLocalize(); const {isDraggingOver} = useContext(DragAndDropContext); + const [cameraPermissionState, setCameraPermissionState] = useState('prompt'); + const [isFlashLightOn, toggleFlashlight] = useReducer((state) => !state, false); + const [isTorchAvailable, setIsTorchAvailable] = useState(true); + const cameraRef = useRef(null); + const hideReciptModal = () => { setIsAttachmentInvalid(false); }; @@ -108,10 +124,10 @@ function ReceiptSelector(props) { /** * Sets the Receipt objects and navigates the user to the next page * @param {Object} file - * @param {Object} iou - * @param {Object} report + * @param {Object} iouObject + * @param {Object} reportObject */ - const setReceiptAndNavigate = (file, iou, report) => { + const setReceiptAndNavigate = (file, iouObject, reportObject) => { if (!validateReceipt(file)) { return; } @@ -119,15 +135,34 @@ function ReceiptSelector(props) { const filePath = URL.createObjectURL(file); IOU.setMoneyRequestReceipt(filePath, file.name); - if (props.transactionID) { - IOU.replaceReceipt(props.transactionID, file, filePath); + if (transactionID) { + IOU.replaceReceipt(transactionID, file, filePath); Navigation.dismissModal(); return; } - IOU.navigateToNextPage(iou, iouType, report, props.route.path); + IOU.navigateToNextPage(iouObject, iouType, reportObject, route.path); }; + const capturePhoto = useCallback(() => { + if (!cameraRef.current.getScreenshot) { + return; + } + const imageBase64 = cameraRef.current.getScreenshot(); + const filename = `receipt_${Date.now()}.png`; + const imageFile = FileUtils.base64ToFile(imageBase64, filename); + const filePath = URL.createObjectURL(imageFile); + IOU.setMoneyRequestReceipt(filePath, imageFile.name); + + if (transactionID) { + IOU.replaceReceipt(transactionID, imageFile, filePath); + Navigation.dismissModal(); + return; + } + + IOU.navigateToNextPage(iou, iouType, report, route.path); + }, [cameraRef, iou, report, iouType, transactionID, route.path]); + const panResponder = useRef( PanResponder.create({ onMoveShouldSetPanResponder: () => true, @@ -135,59 +170,146 @@ function ReceiptSelector(props) { }), ).current; - return ( - - {!isDraggingOver ? ( - <> - { - setReceiptImageTopPosition(PixelRatio.roundToNearestPixel(nativeEvent.layout.top)); - }} - > - ( + <> + + {(cameraPermissionState === 'prompt' || !cameraPermissionState) && ( + + )} + {cameraPermissionState === 'denied' && ( + + + {translate('receipt.takePhoto')} + {translate('receipt.cameraAccess')} - - {translate('receipt.upload')} - - {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')} - - {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')} - - - - {({openPicker}) => ( -