Merge branch 'main' into form-migration/workspace-rate-and-unit-page

merge main into form-migration/workspace-rate-and-unit-page

Author: cdOut

.eslintrc.js

@@ -14,6 +14,11 @@ const restrictedImportPaths = [
         importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight'],
         message: "Please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
     },
+    {
+        name: 'react-native-safe-area-context',
+        importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
+        message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [

.github/PULL_REQUEST_TEMPLATE.md

@@ -98,7 +98,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
     - [ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
 - [ ] If a new CSS style is added I verified that:
     - [ ] A similar style doesn't already exist
-    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)`)
 - [ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
 - [ ] 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.

.github/workflows/deployBlocker.yml

@@ -22,6 +22,13 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ github.token }}
 
+      - name: Escape html characters in GH issue title
+        env:
+          GH_ISSUE_TITLE: ${{ github.event.issue.title }}
+        run: |
+          escaped_title=$(echo "$GH_ISSUE_TITLE" | sed -e 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g; s/'"'"'/\&#039;/g; s/|/\&verbar;/g')
+          echo "GH_ISSUE_TITLE=$escaped_title" >> "$GITHUB_ENV"
+
       - name: 'Post the issue in the #expensify-open-source slack room'
         if: ${{ success() }}
         uses: 8398a7/action-slack@v3
@@ -32,7 +39,7 @@ jobs:
               channel: '#expensify-open-source',
               attachments: [{
                 color: "#DB4545",
-                text: '💥 We have found a New Expensify Deploy Blocker, if you have any idea which PR could be causing this, please comment in the issue: <${{ github.event.issue.html_url }}|${{ github.event.issue.title }}>'.replace(/[&<>"'|]/g, function(m) { return {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;', '|': '&verbar;'}[m]; }),
+                text: '💥 We have found a New Expensify Deploy Blocker, if you have any idea which PR could be causing this, please comment in the issue: <${{ github.event.issue.html_url }}|${{ env.GH_ISSUE_TITLE }}>'
               }]
             }
         env:

.github/workflows/e2ePerformanceTests.yml

@@ -211,7 +211,9 @@ jobs:
           test_spec_file: tests/e2e/TestSpec.yml
           test_spec_type: APPIUM_NODE_TEST_SPEC
           remote_src: false
-          file_artifacts: Customer Artifacts.zip
+          file_artifacts: |
+            Customer Artifacts.zip
+            Test spec output.txt
           log_artifacts: debug.log
           cleanup: true
           timeout: 5400
@@ -220,6 +222,7 @@ jobs:
         if: failure()
         run: |
           echo ${{ steps.schedule-awsdf-main.outputs.data }}
+          cat "./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/Test spec output.txt"
           unzip "Customer Artifacts.zip" -d mainResults
           cat ./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/debug.log
 

.github/workflows/platformDeploy.yml

@@ -56,6 +56,12 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
 
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'oracle'
+          java-version: '17'
+      
       - name: Setup Ruby
         uses: ruby/setup-ruby@a05e47355e80e57b9a67566a813648fa67d92011
         with:
@@ -341,6 +347,9 @@ jobs:
     if: ${{ failure() }}
     needs: [android, desktop, iOS, web]
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
       - name: Post Slack message on failure
         uses: ./.github/actions/composite/announceFailedWorkflowInSlack
         with:

.github/workflows/testBuild.yml

@@ -84,6 +84,12 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
 
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'oracle'
+          java-version: '17'
+
       - name: Setup Ruby
         uses: ruby/setup-ruby@a05e47355e80e57b9a67566a813648fa67d92011
         with:

.imgbotconfig

@@ -1,6 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade.png" // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }

__mocks__/@ua/react-native-airship.js

@@ -31,7 +31,7 @@ const Airship = {
     },
     contact: {
         identify: jest.fn(),
-        getNamedUserId: jest.fn(),
+        getNamedUserId: () => Promise.resolve(undefined),
         reset: jest.fn(),
     },
 };

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040401
-        versionName "1.4.4-1"
+        versionCode 1001040902
+        versionName "1.4.9-2"
     }
 
     flavorDimensions "default"

android/app/src/main/res/values/styles.xml

@@ -11,7 +11,6 @@
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="popupTheme">@style/AppTheme.Popup</item>
         <item name="android:spinnerDropDownItemStyle">@style/TextViewSpinnerDropDownItem</item>
-        <item name="android:datePickerDialogTheme">@style/DatePickerDialogTheme</item>
         <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
     </style>
 
@@ -28,18 +27,6 @@
         <item name="android:fontFamily">@font/expneuebold</item>
     </style>
 
-    <!-- Theme used by the DatePicker dialog -->
-    <style name="DatePickerDialogTheme" parent="Theme.AppCompat.Dialog">
-        <item name="android:windowBackground">@drawable/datepicker_background</item>
-        <item name="android:datePickerStyle">@style/DatePickerStyle</item>
-        <item name="android:fontFamily">@font/expneuebold</item>
-        <item name="colorAccent">@color/accent</item>
-    </style>
-
-    <style name="DatePickerStyle" parent="android:Widget.Material.DatePicker">
-        <item name="android:headerBackground">@color/card_highlight_bg</item> <!-- header background color -->
-    </style>
-
     <!-- Theme used by the Alert dialog -->
     <style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
         <item name="android:windowBackground">@drawable/alert_background</item>

config/webpack/webpack.common.js

@@ -66,7 +66,8 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             template: 'web/index.html',
             filename: 'index.html',
             splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),
-            usePolyfillIO: platform === 'web',
+            isWeb: platform === 'web',
+            isProduction: envFile === '.env.production',
             isStaging: envFile === '.env.staging',
         }),
         new FontPreloadPlugin({

contributingGuides/NAVIGATION.md

@@ -1,6 +1,6 @@
 # Overview
 
-The navigation in the App consists of a top-level Stack Navigator (called `RootStack`) with each of its `Screen` components handling different high-level flow. All those flows can be seen in `AuthScreens.js` file.
+The navigation in the App consists of a top-level Stack Navigator (called `RootStack`) with each of its `Screen` components handling different high-level flow. All those flows can be seen in `AuthScreens.tsx` file.
 
 ## Terminology
 
@@ -20,11 +20,11 @@ Navigation Actions - User actions correspond to resulting navigation actions tha
 
 ## Adding RHP flows
 
-Most of the time, if you want to add some of the flows concerning one of your reports, e.g. `Money Request` from a user, you will most probably use `RightModalNavigator.js` and `ModalStackNavigators.js` file:
+Most of the time, if you want to add some of the flows concerning one of your reports, e.g. `Money Request` from a user, you will most probably use `RightModalNavigator.tsx` and `ModalStackNavigators.tsx` file:
 
-- Since each of those flows is kind of a modal stack, if you want to add a page to the existing flow, you should just add a page to the correct stack in `ModalStackNavigators.js`.
+- Since each of those flows is kind of a modal stack, if you want to add a page to the existing flow, you should just add a page to the correct stack in `ModalStackNavigators.tsx`.
 
-- If you want to create new flow, add a `Screen` in `RightModalNavigator.js` and make new modal in `ModalStackNavigators.js` with chosen pages.
+- If you want to create new flow, add a `Screen` in `RightModalNavigator.tsx` and make new modal in `ModalStackNavigators.tsx` with chosen pages.
 
 When creating RHP flows, you have to remember a couple things:
 
@@ -40,9 +40,22 @@ When creating RHP flows, you have to remember a couple things:
 
 An example of adding `Settings_Workspaces` page:
 
-1. Add path to `ROUTES.js`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/ROUTES.js#L36
+1. Add path to `ROUTES.ts`: https://github.com/Expensify/App/blob/main/src/ROUTES.ts
 
-2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.js`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/linkingConfig.js#L40-L42
+```ts
+export const ROUTES = {
+    // static route
+    SETTINGS_WORKSPACES: 'settings/workspaces',
+    // dynamic route
+    SETTINGS_WORKSPACES: {
+        route: 'settings/:accountID',
+        getRoute: (accountID: number) => `settings/${accountID}` as const,
+    },
+};
+
+```
+
+2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.ts`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/linkingConfig.js#L40-L42
 
 3. Add your page to proper navigator (it should be aligned with where you've put it in the previous step) https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/AppNavigator/ModalStackNavigators.js#L334-L338
 
@@ -183,4 +196,4 @@ The action for the first step created with  `getMinimalAction` looks like this:
 ```
 
 ### Deeplinking 
-There is no minimal action for deeplinking directly to the `Profile` screen. But because the `Settings_root` is not on the stack, pressing UP will reset the params for navigators to the correct ones.
+There is no minimal action for deeplinking directly to the `Profile` screen. But because the `Settings_root` is not on the stack, pressing UP will reset the params for navigators to the correct ones.

contributingGuides/REVIEWER_CHECKLIST.md

@@ -46,7 +46,7 @@
     - [ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
 - [ ] If a new CSS style is added I verified that:
     - [ ] A similar style doesn't already exist
-    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG`)
 - [ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
 - [ ] 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.

docs/_data/_routes.yml

@@ -112,21 +112,11 @@ platforms:
         title: Expensify Card
         icon: /assets/images/hand-card.svg
         description: Explore how the Expensify Card combines convenience and security to enhance everyday business transactions. Discover how to apply for, oversee, and maximize your card perks here.
-      
-      - href: expensify-partner-program
-        title: Expensify Partner Program
-        icon: /assets/images/handshake.svg
-        description: Discover how to get the most out of Expensify as an ExpensifyApproved! accountant partner. Learn how to set up your clients, receive CPE credits, and take advantage of your partner discount.
 
       - href: get-paid-back
         title: Get Paid Back
         icon: /assets/images/money-into-wallet.svg
         description: Whether you submit an expense report or an invoice, find out here how to ensure a smooth and timely payback process every time.
-      
-      - href: send-payments
-        title: Send Payments
-        icon: /assets/images/money-wings.svg
-        description: Uncover step-by-step guidance on sending direct reimbursements to employees, paying an invoice to a vendor, and utilizing third-party payment options.
 
       - href: workspace-and-domain-settings
         title: Workspace & Domain Settings

docs/articles/expensify-classic/account-settings/Account-Details.md

@@ -59,3 +59,11 @@ Is your Secondary Login (personal email) invalidated in your company account? If
 3. You will be presented with a confirmation message saying Expensify sent you an email with a validation link
 4. Head to your personal email account and follow the prompts
 5. You'll receive a link in the email to click that will unlink the two accounts
+
+# FAQ
+## The profile picture on my account updated automatically. Why did this happen? 
+Our focus is always on making your experience user-friendly and saving you valuable time. One of the ways we achieve this is by utilizing a public API to retrieve public data linked to your email address.
+
+This tool searches for public accounts or profiles associated with your email address, such as on LinkedIn. When it identifies one, it pulls in the uploaded profile picture and name to Expensify.
+
+While this automated process is generally accurate, there may be instances where it's not entirely correct. If this happens, we apologize for any inconvenience caused. The good news is that rectifying such situations is a straightforward process. You can quickly update your information manually by following the directions provided above, ensuring your data is accurate and up to date in no time. 

docs/articles/expensify-classic/account-settings/Merge-Accounts.md

@@ -5,29 +5,32 @@ description: How to merge two Expensify accounts and why this is useful.
 
 # 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. 
+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 workspace 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
+3. Navigate to **Settings > Account > Account Details**
+4. Scroll down to Merge Accounts and fill in the fields
 6. Click Merge Accounts
+7. Once you click Merge, a magic code is sent to you via email
+8. Paste the code into the required field
 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.
+No, only the account holder (member) can perform account merging.
 ## Is merging accounts reversible?
 No, merging accounts is not reversible. It is a permanent action that cannot be undone.
+## I have open expenses in the account I'm merging from. Will those expenses merge into the new account?
+All expenses must be reported and submitted for them to merge into the new account. Any open expenses will not merge.  
 ## 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. 
+- 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 workspace when merging accounts?
+The old “personal” Individual workspace is deleted. If you plan to submit reports under a different workspace in the future, ensure that any reports on the Individual workspace 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.