Merge branch 'main' into lukemorawski19642-blank_area_on_scroll

docs/articles/new-expensify/account-settings/Profile.md

@@ -0,0 +1,92 @@
+---
+title: Profile
+description: How to manage your Expensify Profile
+---
+# Overview
+Your Profile in Expensify allows you to:
+- Set your public profile photo
+- Set a display name
+- Manage your contact methods
+- Communicate your current status
+- Set your pronouns
+- Configure your timezone
+- Store your personal details (for travel and payment purposes)
+
+# How to set your public profile photo
+
+To set or update your profile photo: 
+1. Go to **Settings > Profile**
+2. Tap on the default or your existing profile photo,
+3. You can either either upload (to set a new profile photo), remove or view your profile photo
+
+Your profile photo is visible to all Expensify users. 
+
+# How to set a display name
+
+To set or update your display name: 
+1. Go to **Settings > Profile**
+2. Tap on **Display name**
+3. Set a first name and a last name, then **Save**
+
+Your display name is public to all Expensify users.
+
+# How to add or remove contact methods (email address and phone number)
+
+Your contact methods allow people to contact you (using your email address or phone number), and allow you to forward receipts to receipts@expensify.com from multiple email addresses.
+
+To manage your contact methods:
+1. Go to **Settings > Profile**
+2. Tap on **Contact method**
+3. Tap **New contact method** to add a new email or phone number 
+
+Your default contact method (email address or phone number) will be visible to "known" users, with whom you have interacted or are part of your team.
+
+To change the email address or phone number that's displayed on your Expensify account, add a new contact method, then tap on that email address and tap **Set as default**.
+
+# How to communicate your current status
+
+You can use your status emoji to communicate your mood, focus or current activity. You can optionally add a status message too! 
+
+To set your status emoji and status message:
+1. Go to **Settings > Profile**
+2. Tap on **Status** then **Status**
+3. Choose a status emoji, and optionally set a status message
+4. Tap on **Save**
+
+Your status emoji will be visible next to your name in Expensify, and your status emoji and status message will appear in your profile (which is public to all Expensify users). On a computer, your status message will also be visible by hovering your mouse over your name.
+
+You can also remove your current status:
+1. Go to **Settings > Profile**
+2. Tap on **Status**
+3. Tap on **Clear status**
+
+# How to set your pronouns
+
+To set your pronouns:
+1. Go to **Settings > Profile**
+2. Tap on **Pronouns**
+3. Search for your preferred pronouns, then tap on your choice
+
+Your pronouns will be visible to "known" users, with whom you have interacted or are part of your team.
+
+# How to configure your timezone
+
+Your timezone is automatically set using an estimation based on your IP address.
+
+To set your timezone manually:
+1. Go to **Settings > Profile**
+2. Tap on **Timezone**
+3. Disable **Automatically determine your location**
+4. Tap on **Timezone**
+5. Search for your preferred timezone, then tap on your choice
+
+Your timezone will be visible to "known" users, with whom you have interacted or are part of your team.
+
+# How to store your personal details (for travel and payment purposes)
+
+Your personal details can be used in Expensify for travel and payment purposes. These will not be shared with any other Expensify user. 
+
+To set your timezone manually:
+1. Go to **Settings > Profile**
+2. Tap on **Personal details**
+3. Tap on **Legal name**, **Date of birth**, and **Address** to set your personal details

src/CONST.ts

@@ -2882,6 +2882,15 @@ const CONST = {
 
     /** <input /> types that will show a virtual keyboard in a mobile browser */
     INPUT_TYPES_WITH_KEYBOARD: ['text', 'search', 'tel', 'url', 'email', 'password'],
+    /**
+     * native IDs for close buttons in Overlay component
+     */
+    OVERLAY: {
+        TOP_BUTTON_NATIVE_ID: 'overLayTopButton',
+        BOTTOM_BUTTON_NATIVE_ID: 'overLayBottomButton',
+    },
+
+    BACK_BUTTON_NATIVE_ID: 'backButton',
     REFERRAL_PROGRAM: {
         CONTENT_TYPES: {
             MONEY_REQUEST: 'request',

src/components/Form.js

@@ -351,7 +351,17 @@ function Form(props) {
                             // We delay the validation in order to prevent Checkbox loss of focus when
                             // the user are focusing a TextInput and proceeds to toggle a CheckBox in
                             // web and mobile web platforms.
+
+                            // Prevents React from resetting its properties
+                            event.persist();
                             setTimeout(() => {
+                                const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
+                                if (
+                                    relatedTargetId &&
+                                    _.includes([CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID, CONST.OVERLAY.TOP_BUTTON_NATIVE_ID, CONST.BACK_BUTTON_NATIVE_ID], relatedTargetId)
+                                ) {
+                                    return;
+                                }
                                 setTouchedInput(inputID);
                                 if (props.shouldValidateOnBlur) {
                                     onValidate(inputValues, !hasServerError);

src/components/Form/FormProvider.js

@@ -266,7 +266,14 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                         // We delay the validation in order to prevent Checkbox loss of focus when
                         // the user is focusing a TextInput and proceeds to toggle a CheckBox in
                         // web and mobile web platforms.
+
+                        // Prevents React from resetting its properties
+                        event.persist();
                         setTimeout(() => {
+                            const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
+                            if (relatedTargetId && _.includes([CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID, CONST.OVERLAY.TOP_BUTTON_NATIVE_ID, CONST.BACK_BUTTON_NATIVE_ID], relatedTargetId)) {
+                                return;
+                            }
                             setTouchedInput(inputID);
                             if (shouldValidateOnBlur) {
                                 onValidate(inputValues, !hasServerError);

src/components/HeaderWithBackButton/index.js

@@ -79,6 +79,7 @@ function HeaderWithBackButton({
                             style={[styles.touchableButtonImage]}
                             role="button"
                             accessibilityLabel={translate('common.back')}
+                            nativeID={CONST.BACK_BUTTON_NATIVE_ID}
                         >
                             <Icon
                                 src={Expensicons.BackArrow}

src/components/RoomNameInput/index.js

@@ -57,7 +57,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}
             errorText={errorText}
             autoCapitalize="none"
-            onBlur={() => isFocused && onBlur()}
+            onBlur={(event) => isFocused && onBlur(event)}
             shouldDelayFocus={shouldDelayFocus}
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}

src/components/RoomNameInput/index.native.js

@@ -41,7 +41,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             errorText={errorText}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
-            onBlur={() => isFocused && onBlur()}
+            onBlur={(event) => isFocused && onBlur(event)}
             autoFocus={isFocused && autoFocus}
             autoCapitalize="none"
             shouldDelayFocus={shouldDelayFocus}

src/libs/Navigation/AppNavigator/Navigators/Overlay.js

@@ -29,13 +29,15 @@ function Overlay(props) {
                     onPress={props.onPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    nativeID={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID}
                 />
                 <PressableWithoutFeedback
                     style={[styles.flex1]}
                     onPress={props.onPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                     noDragArea
+                    nativeID={CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID}
                 />
             </View>
         </Animated.View>

src/libs/OptionsListUtils.js

@@ -729,6 +729,21 @@ function sortCategories(categories) {
     return flatHierarchy(hierarchy);
 }
 
+/**
+ * Sorts tags alphabetically by name.
+ *
+ * @param {Object<String, {name: String, enabled: Boolean}>} tags
+ * @returns {Array<Object>}
+ */
+function sortTags(tags) {
+    const sortedTags = _.chain(tags)
+        .values()
+        .sortBy((tag) => tag.name)
+        .value();
+
+    return sortedTags;
+}
+
 /**
  * Builds the options for the category tree hierarchy via indents
  *
@@ -919,7 +934,8 @@ function getTagsOptions(tags) {
  */
 function getTagListSections(tags, recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow) {
     const tagSections = [];
-    const enabledTags = _.filter(tags, (tag) => tag.enabled);
+    const sortedTags = sortTags(tags);
+    const enabledTags = _.filter(sortedTags, (tag) => tag.enabled);
     const numberOfTags = _.size(enabledTags);
     let indexOffset = 0;
 

src/libs/actions/Report.js

@@ -20,6 +20,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as Pusher from '@libs/Pusher/pusher';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import SidebarUtils from '@libs/SidebarUtils';
 import * as UserUtils from '@libs/UserUtils';
 import Visibility from '@libs/Visibility';
 import CONFIG from '@src/CONFIG';
@@ -2003,7 +2004,7 @@ function openReportFromDeepLink(url, isAuthenticated) {
 
     // Navigate to the report after sign-in/sign-up.
     InteractionManager.runAfterInteractions(() => {
-        Session.waitForUserSignIn().then(() => {
+        SidebarUtils.isSidebarLoadedReady().then(() => {
             if (route === ROUTES.CONCIERGE) {
                 navigateToConciergeChat(true);
                 return;

tests/unit/OptionsListUtilsTest.js

@@ -1077,14 +1077,8 @@ describe('OptionsListUtils', () => {
                 title: '',
                 shouldShow: false,
                 indexOffset: 0,
+                // data sorted alphabetically by name
                 data: [
-                    {
-                        text: 'Medical',
-                        keyForList: 'Medical',
-                        searchText: 'Medical',
-                        tooltipText: 'Medical',
-                        isDisabled: false,
-                    },
                     {
                         text: 'Accounting',
                         keyForList: 'Accounting',
@@ -1099,6 +1093,13 @@ describe('OptionsListUtils', () => {
                         tooltipText: 'HR',
                         isDisabled: false,
                     },
+                    {
+                        text: 'Medical',
+                        keyForList: 'Medical',
+                        searchText: 'Medical',
+                        tooltipText: 'Medical',
+                        isDisabled: false,
+                    },
                 ],
             },
         ];
@@ -1205,6 +1206,7 @@ describe('OptionsListUtils', () => {
                 title: 'All',
                 shouldShow: true,
                 indexOffset: 2,
+                // data sorted alphabetically by name
                 data: [
                     {
                         text: 'Accounting',
@@ -1214,10 +1216,17 @@ describe('OptionsListUtils', () => {
                         isDisabled: false,
                     },
                     {
-                        text: 'HR',
-                        keyForList: 'HR',
-                        searchText: 'HR',
-                        tooltipText: 'HR',
+                        text: 'Benefits',
+                        keyForList: 'Benefits',
+                        searchText: 'Benefits',
+                        tooltipText: 'Benefits',
+                        isDisabled: false,
+                    },
+                    {
+                        text: 'Cleaning',
+                        keyForList: 'Cleaning',
+                        searchText: 'Cleaning',
+                        tooltipText: 'Cleaning',
                         isDisabled: false,
                     },
                     {
@@ -1228,10 +1237,10 @@ describe('OptionsListUtils', () => {
                         isDisabled: false,
                     },
                     {
-                        text: 'Cleaning',
-                        keyForList: 'Cleaning',
-                        searchText: 'Cleaning',
-                        tooltipText: 'Cleaning',
+                        text: 'HR',
+                        keyForList: 'HR',
+                        searchText: 'HR',
+                        tooltipText: 'HR',
                         isDisabled: false,
                     },
                     {
@@ -1248,13 +1257,6 @@ describe('OptionsListUtils', () => {
                         tooltipText: 'Taxes',
                         isDisabled: false,
                     },
-                    {
-                        text: 'Benefits',
-                        keyForList: 'Benefits',
-                        searchText: 'Benefits',
-                        tooltipText: 'Benefits',
-                        isDisabled: false,
-                    },
                 ],
             },
         ];