Merge branch 'main' into ts-migration/group3-tests

.eslintrc.js

@@ -194,6 +194,7 @@ module.exports = {
                     {
                         selector: ['parameter', 'method'],
                         format: ['camelCase', 'PascalCase'],
+                        leadingUnderscore: 'allow',
                     },
                 ],
                 '@typescript-eslint/ban-types': [

.github/PULL_REQUEST_TEMPLATE.md

@@ -103,9 +103,9 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
-- [ ] If the PR modifies the form input styles:
+- [ ] If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
     - [ ] I verified that all the inputs inside a form are aligned with each other.
-    - [ ] I added `Design` label so the design team can review the changes.
+    - [ ] I added `Design` label and/or tagged `@Expensify/design` so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 

.github/workflows/deployExpensifyHelp.yml

@@ -51,6 +51,8 @@ jobs:
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: helpdot
           directory: ./docs/_site
+        # Add the conditional on this step to prevent execution for pull requests from forks
+        if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository
 
       - name: Setup Cloudflare CLI
         run: pip3 install cloudflare==2.19.0

.github/workflows/e2ePerformanceTests.yml

@@ -183,7 +183,7 @@ jobs:
         run: npm run e2e-test-runner-build
 
       - name: Copy e2e code into zip folder
-        run: cp tests/e2e/dist/index.js zip/testRunner.js
+        run: cp tests/e2e/dist/index.js zip/testRunner.ts
 
       - name: Zip everything in the zip directory up
         run: zip -qr App.zip ./zip

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001045005
-        versionName "1.4.50-5"
+        versionCode 1001045301
+        versionName "1.4.53-1"
     }
 
     flavorDimensions "default"

contributingGuides/APPLE_GOOGLE_SIGNIN.md

@@ -98,27 +98,6 @@ Due to some technical constraints, Apple and Google sign-in may require addition
 
 ## Apple
 
-### iOS/Android
-
-The iOS and Android implementations do not require extra steps to test, aside from signing into an Apple account on the iOS device before being able to use Sign in with Apple.
-
-### Web and desktop
-
-#### Render the web Sign In with Apple button in development
-
-The Google Sign In button renders differently in development mode. To prevent confusion
-for developers about a possible regression, we decided to not render third party buttons in
-development mode.
-
-To show the Apple Sign In button in development mode, you can comment out the following code in the 
-LoginForm.js file:
-
-```js
-if (CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) {
-  return;
-}
-```
-
 #### Port requirements
 
 The Sign in with Apple process will break after the user signs in if the pop-up process is not started from a page at an HTTPS domain registered with Apple. To fix this, you could make a new configuration with your own HTTPS domain, but then the Apple configuration won't match that of Expensify's backend.
@@ -240,53 +219,49 @@ open desktop-build
 
 2. Even with this build, the deep link may not be handled by the correct app, as the development Electron config seems to intercept it sometimes. To manage this, install [SwiftDefaultApps](https://github.com/Lord-Kamina/SwiftDefaultApps), which adds a preference pane that can be used to configure which app should handle deep links.
 
-## Google
-
-### Web
-
-#### Render the web Sign In with Google button in Development
+### Test the Apple / Google SSO buttons in development environment
 
-The Google Sign In button renders differently in development mode. To prevent confusion
+The Apple/Google Sign In button renders differently in development mode. To prevent confusion
 for developers about a possible regression, we decided to not render third party buttons in
 development mode.
 
-To show the Google Sign In button in development mode, you can comment out the following code in the 
-LoginForm.js file:
-
-```js
-if (CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) {
-  return;
-}
-```
-
-#### Host/Port requirements
-
-Google allows the web app to be hosted at localhost, but according to the
-current Google console configuration for the Expensify client ID, it must be
-hosted on port 8082.
-
-Also note that you'll need to update the webpack.dev.js config to change `host` from `dev.new.expensify.com` to `localhost` and server type from `https` to `http`. The reason for this is that Google Sign In allows localhost, but `dev.new.expensify.com` is not a registered Google Sign In domain.
-
-```diff
-diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
-index e28383eff5..b14f6f34aa 100644
---- a/config/webpack/webpack.dev.js
-+++ b/config/webpack/webpack.dev.js
-@@ -44,9 +44,9 @@ module.exports = (env = {}) =>
-                 ...proxySettings,
-                 historyApiFallback: true,
-                 port,
--                host: 'dev.new.expensify.com',
-+                host: 'localhost',
-                 server: {
--                    type: 'https',
-+                    type: 'http',
-                     options: {
-                         key: path.join(__dirname, 'key.pem'),
-                         cert: path.join(__dirname, 'certificate.pem'),
-```
-
-### Desktop
+Here's how you can re-enable the SSO buttons in development mode:
+
+- Remove this [condition](https://github.com/Expensify/App/blob/c2a718c9100e704c89ad9564301348bc53a49777/src/pages/signin/LoginForm/BaseLoginForm.tsx#L300) so that we always render the SSO button components
+    ```diff
+    diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx
+    index 4286a26033..850f8944ca 100644
+    --- a/src/pages/signin/LoginForm/BaseLoginForm.tsx
+    +++ b/src/pages/signin/LoginForm/BaseLoginForm.tsx
+    @@ -288,7 +288,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
+                                // for developers about possible regressions, we won't render buttons in development mode.
+                                // For more information about these differences and how to test in development mode,
+                                // see`Expensify/App/contributingGuides/APPLE_GOOGLE_SIGNIN.md`
+    -                            CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV && (
+    +                            (
+                                    <View style={[getSignInWithStyles()]}>
+                                        <Text
+                                            accessibilityElementsHidden
+    ```
+- Update the webpack.dev.js [config](https://github.com/Expensify/App/blob/1d6bb1d14cff3dd029868a0a7c8ee14ae78c527b/config/webpack/webpack.dev.js#L47-L49) to change `host` from `dev.new.expensify.com` to `localhost` and server type from `https` to `http`. The reason for this is that Google Sign In allows localhost, but `dev.new.expensify.com` is not a registered Google Sign In domain.
+    ```diff
+    diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
+    index e28383eff5..b14f6f34aa 100644
+    --- a/config/webpack/webpack.dev.js
+    +++ b/config/webpack/webpack.dev.js
+    @@ -44,9 +44,9 @@ module.exports = (env = {}) =>
+                    ...proxySettings,
+                    historyApiFallback: true,
+                    port,
+    -                host: 'dev.new.expensify.com',
+    +                host: 'localhost',
+                    server: {
+    -                    type: 'https',
+    +                    type: 'http',
+                        options: {
+                            key: path.join(__dirname, 'key.pem'),
+                            cert: path.join(__dirname, 'certificate.pem'),
+    ```
 
 #### Set Environment to something other than "Development"
 

contributingGuides/REVIEWER_CHECKLIST.md

@@ -51,9 +51,9 @@
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
-- [ ] If the PR modifies the form input styles:
+- [ ] If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
     - [ ] I verified that all the inputs inside a form are aligned with each other.
-    - [ ] I added `Design` label so the design team can review the changes.
+    - [ ] I added `Design` label and/or tagged `@Expensify/design` so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 - [ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

docs/_sass/_main.scss

@@ -508,6 +508,7 @@ button {
 
         .info {
             padding: 12px;
+            margin-bottom: 20px;
             border-radius: 8px;
             background-color: $color-highlightBG;
             color: $color-text;

docs/articles/expensify-classic/copilots-and-delegates/Act-as-a-copilot.md

@@ -0,0 +1,42 @@
+---
+title: Act as a Copilot
+description: How to access another account after being granted Copilot permissions 
+---
+<div id="expensify-classic" markdown="1">
+
+After being assigned as a Copilot, you can access the account you’ve been given Copilot permissions to via the Expensify website or the mobile app.
+
+{% include selector.html values="desktop, mobile" %}
+
+{% include option.html value="desktop" %}
+To switch to Copilot mode,
+1. Click your profile icon in the upper left side of the page.
+2. In the “Copilot Access” section of the dropdown, choose the account you wish to access.
+
+The Expensify header will change to blue, and an airplane icon will appear to show that you are in copilot mode. You can return to your own account any time by clicking your profile icon and selecting **Return to your account**.
+
+{% include end-option.html %}
+
+{% include option.html value="mobile" %}
+To switch to Copilot mode, 
+1. Tap the menu icon in the top left.
+2. Tap your profile icon.
+3. Tap **Switch to Copilot Mode** and choose the account.
+
+An airplane icon will appear to show that you are in copilot mode. To return to your own account, follow the same steps above and select **Return to your account**.
+
+{% include end-option.html %}
+
+{% include end-selector.html %}
+
+# FAQs
+
+**Can a Copilot’s secondary login be used to forward receipts?**
+
+Yes, a Copilot can use any of the email addresses tied to their account to forward receipts into the account they are copiloting. To ensure a receipt is routed to the Expensify account you are copiloting instead of your own account, email the receipt to [email protected] with the email address of the account you are copiloting as the subject line of the email. 
+
+**Can I add another copilot to an account that I’m copiloting?**
+
+No, only the original account holder can add another Copilot to their account.
+
+</div>

docs/articles/expensify-classic/domains/Claim-And-Verify-A-Domain.md

@@ -31,7 +31,8 @@ You can claim and verify private domains only. Public domains (like gmail.com) c
 # Step 2: Verify domain ownership
 
 {% include info.html %}
-To complete this step, you must have a Control workspace, and you’ll need access to your domain provider account (GoDaddy, Wix, GSuite, etc.). If you don’t verify the domain, you will still have access to the domain to add and manage credit card expenses and domain admins, but you will not be able to invite members, add groups, use domain reporting tools, set delegates for employees on vacation, or enable SAML SSO. For more guidance on how to complete this process for a specific provider, check the provider’s website.{% include end-info.html %}
+To complete this step, you must have a Control workspace, and you’ll need access to your domain provider account (GoDaddy, Wix, GSuite, etc.). If you don’t verify the domain, you will still have access to the domain to add and manage credit card expenses and domain admins, but you will not be able to invite members, add groups, use domain reporting tools, set delegates for employees on vacation, or enable SAML SSO. For more guidance on how to complete this process for a specific provider, check the provider’s website.
+{% include end-info.html %}
 
 <ol type="a">
    <li>Log in to your DNS service provider (which may be the website you purchased the domain from or that currently hosts the domain, like NameCheap, GoDaddy, DNSMadeEasy, or Amazon Route53. You may need to contact your company’s IT department if your domain is managed internally).</li>

docs/articles/expensify-classic/expensify-card/Request-the-Card.md

@@ -38,6 +38,10 @@ If you need to cancel your Expensify Card and cannot access the website or mobil
 
 It's not possible to order a replacement card over the phone, so, if applicable, you would need to handle this step from your Expensify account.
 
+# Card Expiration Date
+
+If you notice that your card expiration date is soon, it's time for a new Expensify card. Expensify will automatically input a notification in your account's Home (Inbox) tab. This notice will ask you to input your address, but this is more if you have changed your address since your card was issued to you. You can ignore it and do nothing; the new Expensify card will ship to your address on file. The new Expensify card will have a new, unique card number and will not be associated with the old one.
+
 {% include faq-begin.md %}
 
 ## What if I haven’t received my card after multiple weeks? 

docs/expensify-classic/hubs/expense-and-report-features/index.html → docs/expensify-classic/hubs/copilots-and-delegates/index.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Expense & Report Settings
+title: Copilots & Delegates
 ---
 
 {% include hub.html %}

docs/expensify-classic/hubs/get-paid-back/index.html → docs/expensify-classic/hubs/domains/index.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Get Paid Back
+title: Domains
 ---
 
 {% include hub.html %}

docs/expensify-classic/hubs/workspace-and-domain-settings/index.html → docs/expensify-classic/hubs/expenses/index.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Policy And Domain Settings
+title: Expenses
 ---
 
 {% include hub.html %}

docs/expensify-classic/hubs/manage-employees-and-report-approvals/index.html → docs/expensify-classic/hubs/reports/index.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Manage Employees And Report Approvals
+title: Reports
 ---
 
 {% include hub.html %}

docs/expensify-classic/hubs/workspaces/index.html

@@ -0,0 +1,6 @@
+---
+layout: default
+title: Workspaces
+---
+
+{% include hub.html %}