Merge branch 'main' of https://github.com/Expensify/App into feat/#Ex…

…pensify#23132-display-status-lhn

.github/workflows/README.md

@@ -144,4 +144,4 @@ In order to bundle actions with their dependencies into a single Node.js executa
        Do not try to use a relative path.
 - Confusingly, paths in action metadata files (`action.yml`) _must_ use relative paths.
 - You can't use any dynamic values or environment variables in a `uses` statement
-- In general, it is a best practice to minimize any side-effects of each action. Using atomic ("dumb") actions that have a clear and simple purpose will promote reuse and make it easier to understand the workflows that use them.
+- In general, it is a best practice to minimize any side-effects of each action. Using atomic ("dumb") actions that have a clear and simple purpose will promote reuse and make it easier to understand the workflows that use them.

.github/workflows/testBuild.yml

@@ -80,7 +80,7 @@ jobs:
           sed -i 's/ENVIRONMENT=staging/ENVIRONMENT=adhoc/' .env.adhoc
           echo "PULL_REQUEST_NUMBER=$PULL_REQUEST_NUMBER" >> .env.adhoc
 
-      - uses: ./.github/actions/composite/setupNode
+      - uses: Expensify/App/.github/actions/composite/setupNode@main
 
       - uses: ruby/setup-ruby@eae47962baca661befdfd24e4d6c34ade04858f7
         with:

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001035504
-        versionName "1.3.55-4"
+        versionCode 1001035507
+        versionName "1.3.55-7"
     }
 
     flavorDimensions "default"

docs/_sass/_colors.scss

@@ -1,7 +1,10 @@
 $color-green400: #03D47C;
 $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
+$color-button-background: #1A3D32;
+$color-button-hovered: #2C6755;
 $color-green-highlightBG: #07271F;
+$color-green-highlightBG-hover: #06231c;
 $color-green-appBG: #061B09;
 $color-green-hover: #00a862;
 $color-light-gray-green: #AFBBB0;

docs/_sass/_search-bar.scss

@@ -4,6 +4,7 @@
 
 $color-appBG: $color-green-appBG;
 $color-highlightBG: $color-green-highlightBG;
+$color-highlightBG-hover: $color-green-highlightBG-hover;
 $color-accent : $color-green400;
 $color-borders: $color-green-borders;
 $color-icons: $color-green-icons;
@@ -27,6 +28,7 @@ $color-gray-label: $color-gray-label;
     display: block;
     top: 0;
     right: 0;
+    z-index: 2;
 }
 
 @media only screen and (max-width: $breakpoint-tablet) {
@@ -69,7 +71,7 @@ $color-gray-label: $color-gray-label;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.4);
-    z-index: 2;
+    z-index: 1;
 }
 
 /* All gsc id & class are Google Search relate gcse_0 is the search bar parent & gcse_1 is the search result list parent */
@@ -156,6 +158,13 @@ label.search-label {
     font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
     max-height: 80vh;
     overflow-y: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+/* Hide the scrollbar */
+.gsc-control-cse::-webkit-scrollbar {
+    display: none;
 }
 
 .gs-title {
@@ -195,3 +204,67 @@ label.search-label {
 .gsc-resultsbox-visible .gsc-webResult .gsc-result {
     border-bottom: none;
 }
+
+
+/* Change Font the Google Search result */
+.gsc-control-cse .gsc-table-result {
+    font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
+}
+
+/* Change Font result Paragraph color */
+.gsc-results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType {
+    color: $color-text;
+}
+
+
+/* Change the color of the Google Search Suggestion font */
+.gs-spelling.gs-result {
+    color: $color-text;
+}
+
+/* Pagination related style */
+.gsc-resultsbox-visible .gsc-results .gsc-cursor-box {
+    text-align: center;
+}
+
+.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page {
+    margin: 4px;
+    width: 28px;
+    height: 28px;
+    border-radius: 25px;
+    display: inline-block;
+    line-height: 2.5;
+    background-color: $color-accent;
+    font-weight: bold;
+    font-size: 11px;
+}
+
+
+/* Change the color & background of Google Search Pagination */
+.gsc-cursor-next-page,
+.gsc-cursor-final-page {
+    color: $color-text;
+    background-color: $color-appBG;
+}
+
+/* Change the color & background of Google Search Current Page */
+.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page {
+    background-color: $color-accent;
+    color: $color-text;
+
+    &:hover {
+        text-decoration: none;
+        background-color: $color-accent;
+    }
+}
+
+/* Change the color & background of Google Search of Other Page */
+.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page {
+    background-color: $color-button-background;
+    color: $color-text;
+
+    &:hover {
+        background-color: $color-button-hovered;
+        text-decoration: none;
+    }
+}

docs/articles/other/Enable-Location-Access-on-Web.md

@@ -0,0 +1,55 @@
+---
+title: Enable Location Access on Web
+description: How to enable location access for Expensify websites on your browser
+---
+<!-- The lines above are required by Jekyll to process the .md file -->
+
+# About
+<!--
+This short blurb provides all the context the user might need to know what the feature is and why they'd use it. If there are particular best practices embedded in the design, we'd explain why they're best practices here.
+
+What advantages does this feature provide in general?
+What is unique about this feature in terms of our specific implementation of it in Expensify?
+-->
+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
+<!--
+This section covers the most essential information a user needs to operate a feature i.e. what to click on. We’ll go over any action the user might take when configuring or using the feature, starting from configuration and moving to usage.
+
+What options does a user have when configuring this feature?
+What options does a user have then interacting with this feature?
+What elements of this feature are pay-walled vs. free?
+-->
+
+### 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)

docs/articles/playbooks/Expensify-Chat-Playbook-for-Conferences.md

@@ -97,7 +97,7 @@ We find chat to be a powerful way to not only engage your attendees, but direct
 - #social: Have your employees in this room sharing fun photos, stoking conversations, and responding to any questions or feedback.
 - Speaker rooms: Encourage your employees to jump in to comment on content and nudge attendees to engage with each other during sessions.
 
-*Protip*: Expensify Chat has moderation tools to help flag comments deemed to be spam, inconsiderate, intimidating, bullying, harassment, assault. On any comment, just click the flag icon to moderate conversation. 
+*Protip*: Expensify Chat has [moderation tools](https://help.expensify.com/articles/other/Everything-About-Chat#flagging-content-as-offensive) to help flag comments deemed to be spam, inconsiderate, intimidating, bullying, harassment, assault. On any comment, just click the flag icon to moderate conversation. 
 
 ### Step 7: Follow up with attendees after the event
 

docs/assets/js/main.js

@@ -75,16 +75,6 @@ function injectFooterCopywrite() {
     footer.innerHTML = `©2008-${new Date().getFullYear()} Expensify, Inc.`;
 }
 
-function openSidebar() {
-    document.getElementById('sidebar-layer').style.display = 'block';
-
-    // Make body unscrollable
-    const yAxis = document.documentElement.style.getPropertyValue('y-axis');
-    const body = document.body;
-    body.style.position = 'fixed';
-    body.style.top = `-${yAxis}`;
-}
-
 function closeSidebar() {
     document.getElementById('sidebar-layer').style.display = 'none';
 
@@ -100,6 +90,31 @@ function closeSidebar() {
     window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
 }
 
+function closeSidebarOnClickOutside(event) {
+    const sidebarLayer = document.getElementById('sidebar-layer');
+
+    if (event.target !== sidebarLayer) {
+        return;
+    }
+    closeSidebar();
+}
+
+function openSidebar() {
+    document.getElementById('sidebar-layer').style.display = 'block';
+
+    // Make body unscrollable
+    const yAxis = document.documentElement.style.getPropertyValue('y-axis');
+    const body = document.body;
+    body.style.position = 'fixed';
+    body.style.top = `-${yAxis}`;
+
+    // Close the sidebar when clicking sidebar layer (outside the sidebar search)
+    const sidebarLayer = document.getElementById('sidebar-layer');
+    if (sidebarLayer) {
+        sidebarLayer.addEventListener('click', closeSidebarOnClickOutside);
+    }
+}
+
 // Function to adapt & fix cropped SVG viewBox from Google based on viewport (Mobile or Tablet-Desktop)
 function changeSVGViewBoxGoogle() {
     // Get all inline Google SVG elements on the page

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.55.4</string>
+	<string>1.3.55.7</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.55.4</string>
+	<string>1.3.55.7</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.55-4",
+  "version": "1.3.55-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.",
@@ -126,7 +126,7 @@
     "react-native-linear-gradient": "^2.8.1",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "1.0.52",
+    "react-native-onyx": "1.0.61",
     "react-native-pager-view": "^6.2.0",
     "react-native-pdf": "^6.6.2",
     "react-native-performance": "^4.0.0",

src/CONST.js

@@ -33,6 +33,10 @@ const CONST = {
     ANIMATED_TRANSITION: 300,
     ANIMATED_TRANSITION_FROM_VALUE: 100,
     ANIMATION_IN_TIMING: 100,
+    ANIMATION_DIRECTION: {
+        IN: 'in',
+        OUT: 'out',
+    },
     ARROW_HIDE_DELAY: 3000,
 
     API_ATTACHMENT_VALIDATIONS: {
@@ -2534,6 +2538,13 @@ const CONST = {
         AFTER_WEEK: 'afterWeek',
         CUSTOM: 'custom',
     },
+    TWO_FACTOR_AUTH_STEPS: {
+        CODES: 'CODES',
+        VERIFY: 'VERIFY',
+        SUCCESS: 'SUCCESS',
+        ENABLED: 'ENABLED',
+        DISABLED: 'DISABLED',
+    },
     TAB: {
         RECEIPT_TAB_ID: 'ReceiptTab',
         MANUAL: 'manual',

src/ROUTES.js

@@ -59,11 +59,7 @@ export default {
     SETTINGS_CONTACT_METHOD_DETAILS: `${SETTINGS_CONTACT_METHODS}/:contactMethod/details`,
     getEditContactMethodRoute: (contactMethod) => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`,
     SETTINGS_NEW_CONTACT_METHOD: `${SETTINGS_CONTACT_METHODS}/new`,
-    SETTINGS_2FA_IS_ENABLED: 'settings/security/two-factor-auth/enabled',
-    SETTINGS_2FA_DISABLE: 'settings/security/two-factor-auth/disable',
-    SETTINGS_2FA_CODES: 'settings/security/two-factor-auth/codes',
-    SETTINGS_2FA_VERIFY: 'settings/security/two-factor-auth/verify',
-    SETTINGS_2FA_SUCCESS: 'settings/security/two-factor-auth/success',
+    SETTINGS_2FA: 'settings/security/two-factor-auth',
     SETTINGS_STATUS,
     SETTINGS_STATUS_SET,
     NEW_GROUP: 'new/group',
@@ -207,4 +203,5 @@ export default {
             isSubReportPageRoute: pathSegments.length > 2,
         };
     },
+    SIGN_IN_MODAL: 'sign-in-modal',
 };