Merge branch 'main' into ts-migration/react-native-firebase-crashlyti…

…cs-mock

.github/actions/composite/buildAndroidE2EAPK/action.yml

@@ -58,21 +58,15 @@ runs:
     - name: Append environment variables to env file
       shell: bash
       run: |
-        echo "EXPENSIFY_PARTNER_NAME=${EXPENSIFY_PARTNER_NAME}" >> ${{ inputs.PATH_ENV_FILE }}
-        echo "EXPENSIFY_PARTNER_PASSWORD=${EXPENSIFY_PARTNER_PASSWORD}" >> ${{ inputs.PATH_ENV_FILE }}
-        echo "EXPENSIFY_PARTNER_USER_ID=${EXPENSIFY_PARTNER_USER_ID}" >> ${{ inputs.PATH_ENV_FILE }}
-        echo "EXPENSIFY_PARTNER_USER_SECRET=${EXPENSIFY_PARTNER_USER_SECRET}" >> ${{ inputs.PATH_ENV_FILE }}
-        echo "EXPENSIFY_PARTNER_PASSWORD_EMAIL=${EXPENSIFY_PARTNER_PASSWORD_EMAIL}" >> ${{ inputs.PATH_ENV_FILE }}
+        echo "EXPENSIFY_PARTNER_NAME=${{ inputs.EXPENSIFY_PARTNER_NAME }}" >> ${{ inputs.PATH_ENV_FILE }}
+        echo "EXPENSIFY_PARTNER_PASSWORD=${{ inputs.EXPENSIFY_PARTNER_PASSWORD }}" >> ${{ inputs.PATH_ENV_FILE }}
+        echo "EXPENSIFY_PARTNER_USER_ID=${{ inputs.EXPENSIFY_PARTNER_USER_ID }}" >> ${{ inputs.PATH_ENV_FILE }}
+        echo "EXPENSIFY_PARTNER_USER_SECRET=${{ inputs.EXPENSIFY_PARTNER_USER_SECRET }}" >> ${{ inputs.PATH_ENV_FILE }}
+        echo "EXPENSIFY_PARTNER_PASSWORD_EMAIL=${{ inputs.EXPENSIFY_PARTNER_PASSWORD_EMAIL }}" >> ${{ inputs.PATH_ENV_FILE }}
 
     - name: Build APK
       run: npm run ${{ inputs.PACKAGE_SCRIPT_NAME }}
       shell: bash
-      env:
-        EXPENSIFY_PARTNER_NAME: ${{ inputs.EXPENSIFY_PARTNER_NAME }}
-        EXPENSIFY_PARTNER_PASSWORD: ${{ inputs.EXPENSIFY_PARTNER_PASSWORD }}
-        EXPENSIFY_PARTNER_USER_ID: ${{ inputs.EXPENSIFY_PARTNER_USER_ID }}
-        EXPENSIFY_PARTNER_USER_SECRET: ${{ inputs.EXPENSIFY_PARTNER_USER_SECRET }}
-        EXPENSIFY_PARTNER_PASSWORD_EMAIL: ${{ inputs.EXPENSIFY_PARTNER_PASSWORD_EMAIL }}
 
     - name: Upload APK
       uses: actions/upload-artifact@65d862660abb392b8c4a3d1195a2108db131dd05

.github/scripts/createHelpRedirects.sh

@@ -19,7 +19,7 @@ function checkCloudflareResult {
 
     if ! [[ "$RESULT_MESSAGE" == "true" ]]; then
         ERROR_MESSAGE=$(echo "$RESULTS" | jq .errors)
-        error "Error calling Cloudfalre API: $ERROR_MESSAGE"
+        error "Error calling Cloudflare API: $ERROR_MESSAGE"
         exit 1
     fi
 }

.github/workflows/e2ePerformanceTests.yml

@@ -46,7 +46,7 @@ jobs:
           git fetch origin tag ${{ steps.getMostRecentRelease.outputs.VERSION }} --no-tags --depth=1
           git switch --detach ${{ steps.getMostRecentRelease.outputs.VERSION }}
 
-      - uses: ./.github/actions/composite/buildAndroidE2EAPK
+      - uses: Expensify/App/.github/actions/composite/buildAndroidE2EAPK@main
         with:
           ARTIFACT_NAME: baseline-apk-${{ steps.getMostRecentRelease.outputs.VERSION }}
           PACKAGE_SCRIPT_NAME: android-build-e2e
@@ -114,7 +114,7 @@ jobs:
       - name: Checkout "delta ref"
         run: git checkout ${{ steps.getDeltaRef.outputs.DELTA_REF }}
 
-      - uses: ./.github/actions/composite/buildAndroidE2EAPK
+      - uses: Expensify/App/.github/actions/composite/buildAndroidE2EAPK@main
         with:
           ARTIFACT_NAME: delta-apk-${{ steps.getDeltaRef.outputs.DELTA_REF }}
           PACKAGE_SCRIPT_NAME: android-build-e2edelta

__mocks__/@react-navigation/native/index.js → __mocks__/@react-navigation/native/index.ts

@@ -1,7 +1,7 @@
 import {useIsFocused as realUseIsFocused} from '@react-navigation/native';
 
 // We only want this mocked for storybook, not jest
-const useIsFocused = process.env.NODE_ENV === 'test' ? realUseIsFocused : () => true;
+const useIsFocused: typeof realUseIsFocused = process.env.NODE_ENV === 'test' ? realUseIsFocused : () => true;
 
 export * from '@react-navigation/core';
 export * from '@react-navigation/native';

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001043400
-        versionName "1.4.34-0"
+        versionCode 1001043707
+        versionName "1.4.37-7"
     }
 
     flavorDimensions "default"

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

@@ -1,4 +1,5 @@
 <resources>
+    <!-- If these colors are changed, we must add them to HybridApp also -->
     <color name="bootsplash_background">#03D47C</color>
     <color name="white">#FFFFFF</color>
     <color name="accent">#03D47C</color>

contributingGuides/APPLE_GOOGLE_SIGNIN.md

@@ -259,12 +259,33 @@ if (CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) {
 }
 ```
 
-#### Port requirements
+#### 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
 
 #### Set Environment to something other than "Development"

docs/_data/_routes.yml

@@ -19,8 +19,8 @@ platforms:
         icon: /assets/images/accounting.svg
         description: From setting up your account to ensuring you get the most out of Expensify’s suite of features, click here to get started on streamlining your expense management journey.
 
-      - href: account-settings
-        title: Account Settings
+      - href: settings
+        title: Settings
         icon: /assets/images/gears.svg
         description: Discover how to personalize your profile, add secondary logins, and grant delegated access to employees with our comprehensive guide on Account Settings.
 

docs/_includes/end-info.html

@@ -0,0 +1,2 @@
+</div>
+</div>

docs/_includes/end-option.html

@@ -0,0 +1 @@
+</div>

docs/_includes/end-selector.html

@@ -0,0 +1 @@
+</div>

docs/_includes/info.html

@@ -0,0 +1,3 @@
+<div class="info">
+    <img src="/assets/images/info.svg" width="16" height="16">
+    <div markdown="1">

docs/_includes/option.html

@@ -0,0 +1 @@
+<div class="option-{{ include.value }}" markdown="1">

docs/_includes/selector.html

@@ -0,0 +1,9 @@
+{% assign values = include.values | split: "," %}
+
+<div class="selector-container">
+
+<select class="selector" onchange="selectOption(this)">
+    {% for value in values %}
+        <option value="option-{{ value | strip | downcase }}">{{ value | strip | capitalize }}</option>
+    {% endfor %}
+</select>

docs/_layouts/default.html

@@ -12,6 +12,8 @@
     <script src="https://kit.fontawesome.com/263e5e8608.js" crossorigin="anonymous"></script>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.js"></script>
     <script defer src="/assets/js/main.js"></script>
+    <script defer src="/assets/js/platform-tabs.js"></script>
+    <script defer src="/assets/js/selector.js"></script>
     <script async src="https://cse.google.com/cse.js?cx=41f40d6e5c14246ff"></script>
     <!-- Google Tag Manager -->
     <script>(function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-TQBQW7CR');</script>
@@ -64,10 +66,13 @@
         <div id="article-content">
             <!-- Article title (only shown in article pages) -->
             {% if page.url contains "/articles/" %}
-            <h1 class="title">
-                {{ page.name | remove: '.md' | split: "-" |  join: " " }}
-            </h1>
-
+            <div class="title-platform-tabs">
+                <h1 class="title">
+                    {{ page.name | remove: '.md' | split: "-" |  join: " " }}
+                </h1>
+                <div id="platform-tabs">
+                </div>
+            </div>
             <div class="article-toc-content article">
                 {{ content }}
             </div>

docs/_sass/_main.scss

@@ -350,10 +350,14 @@ button {
     h1 {
         &.title {
             font-size: 2.25em;
+            flex: 1;
         }
     }
 
     .article {
+        .hidden {
+            display: none;
+        }
         img {
             display: block;
             margin: 20px auto;
@@ -458,6 +462,69 @@ button {
                 opacity: 0.8;
             }
         }
+
+        .selector-container {
+            background-color: $color-highlightBG;
+            display: flex;
+            flex-direction: row-reverse;
+            gap: 20px;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+            justify-content: space-between;
+            * > ol, ul {
+                padding: 0;
+            }
+
+            @include maxBreakpoint($breakpoint-tablet) {
+                flex-direction: column;
+            }
+        }
+
+        select {
+            height: 28px;
+            border-radius: 20px;
+            padding: 0px 26px 0px 12px;
+            color: $color-text;
+            font-size: 11px;
+            font-weight: 700;
+            text-align: center;
+            cursor: pointer;
+
+            @include maxBreakpoint($breakpoint-tablet) {
+                width: 100px;
+            }
+
+        }
+
+        select {
+            background: url("/assets/images/down.svg") no-repeat right $color-button-background;
+            background-size: 12px;
+            background-position-x: 85%;
+            appearance: none !important;
+            -moz-appearance: none !important;
+            -webkit-appearance: none !important;
+        }
+
+        .info {
+            padding: 12px;
+            border-radius: 8px;
+            background-color: $color-highlightBG;
+            color: $color-text;
+            display: flex;
+            gap: 12px;
+            align-items: center;
+
+            img {
+                height: 16px;
+                width: 16px;
+            }
+
+            * {
+                padding: 0;
+                margin: 0;
+            }
+        }
     }
 
 }
@@ -842,3 +909,45 @@ button {
         }
     }
 }
+
+.title-platform-tabs {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 12px;
+    h1 {
+        padding: 0;
+    }
+
+    @include maxBreakpoint($breakpoint-tablet) {
+        flex-direction: column;
+        gap: 20px;
+    }
+}
+
+#platform-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    text-align: center;
+    font-weight: 700;
+    font-size: 13px;
+    gap: 4px;
+}
+
+#platform-tabs > * {
+    cursor: pointer;
+    border-radius: 20px;
+    padding: 10px 20px;
+    box-sizing: border-box;
+    height: 36px;
+    line-height: 16px;
+}
+
+#platform-tabs > .active {
+    color: $color-text;
+    background-color: $color-button-background;
+}
+
+.hidden {
+    display: none;
+}