From c1ae7b2d926a9b0eeb7a979316613f61bed16b93 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Wed, 24 Jan 2024 08:32:01 +0100
Subject: [PATCH 01/12] start migrating WorkspaceMembersPage to TypeScript

---
 ...embersPage.js => WorkspaceMembersPage.tsx} | 223 ++++++++++--------
 1 file changed, 127 insertions(+), 96 deletions(-)
 rename src/pages/workspace/{WorkspaceMembersPage.js => WorkspaceMembersPage.tsx} (67%)

diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.tsx
similarity index 67%
rename from src/pages/workspace/WorkspaceMembersPage.js
rename to src/pages/workspace/WorkspaceMembersPage.tsx
index 92bc5ecc8e9c..7d29d6e72978 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -1,8 +1,11 @@
 import {useIsFocused} from '@react-navigation/native';
+import type {StackScreenProps} from '@react-navigation/stack';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import type {TextInput} from 'react-native';
 import {InteractionManager, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -10,20 +13,20 @@ import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MessagesRow from '@components/MessagesRow';
-import networkPropTypes from '@components/networkPropTypes';
-import {withNetwork} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -33,8 +36,12 @@ import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
+import type {PersonalDetailsList, PolicyMembers, Session} from '@src/types/onyx';
+import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import SearchInputManager from './SearchInputManager';
 import {policyDefaultProps, policyPropTypes} from './withPolicy';
+import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
 const propTypes = {
@@ -58,10 +65,32 @@ const propTypes = {
 
     isLoadingReportData: PropTypes.bool,
     ...policyPropTypes,
-    ...withLocalizePropTypes,
-    ...windowDimensionsPropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
-    network: networkPropTypes.isRequired,
+};
+
+type WorkspaceMembersPageOnyxProps = {
+    personalDetails: OnyxEntry<PersonalDetailsList>;
+    session: OnyxEntry<Session>;
+    isLoadingReportData: OnyxEntry<boolean>;
+};
+
+type WorkspaceMembersPageProps = Omit<WithPolicyAndFullscreenLoadingProps, 'route'> &
+    WithCurrentUserPersonalDetailsProps &
+    WorkspaceMembersPageOnyxProps &
+    StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBERS>;
+
+type MemberOption = {
+    keyForList: string;
+    accountID: number;
+    isSelected: boolean;
+    isDisabled: boolean;
+    text: string;
+    alternateText: string;
+    rightElement: React.ReactNode | null;
+    icons: Icon[];
+    errors?: Errors;
+    pendingAction?: PendingAction;
+    invitedSecondaryLogin?: string;
 };
 
 const defaultProps = {
@@ -74,18 +103,20 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-function WorkspaceMembersPage(props) {
+function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, session, currentUserPersonalDetails, isLoadingReportData}: WorkspaceMembersPageProps) {
     const styles = useThemeStyles();
     const [selectedEmployees, setSelectedEmployees] = useState([]);
     const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false);
     const [errors, setErrors] = useState({});
     const [searchValue, setSearchValue] = useState('');
-    const prevIsOffline = usePrevious(props.network.isOffline);
-    const accountIDs = useMemo(() => _.map(_.keys(props.policyMembers), (accountID) => Number(accountID)), [props.policyMembers]);
+    const {isOffline} = useNetwork();
+    const prevIsOffline = usePrevious(isOffline);
+    const accountIDs = useMemo(() => Object.keys(policyMembers ?? {}).map((accountID) => Number(accountID)), [policyMembers]);
     const prevAccountIDs = usePrevious(accountIDs);
-    const textInputRef = useRef(null);
-    const isOfflineAndNoMemberDataAvailable = _.isEmpty(props.policyMembers) && props.network.isOffline;
-    const prevPersonalDetails = usePrevious(props.personalDetails);
+    const textInputRef = useRef<TextInput>(null);
+    const isOfflineAndNoMemberDataAvailable = _.isEmpty(policyMembers) && isOffline;
+    const prevPersonalDetails = usePrevious(personalDetails);
+    const {translate, formatPhoneNumber, preferredLocale} = useLocalize();
 
     const isFocusedScreen = useIsFocused();
 
@@ -93,51 +124,49 @@ function WorkspaceMembersPage(props) {
         setSearchValue(SearchInputManager.searchInput);
     }, [isFocusedScreen]);
 
-    useEffect(() => () => (SearchInputManager.searchInput = ''), []);
+    useEffect(() => {
+        SearchInputManager.searchInput = '';
+    }, []);
 
     /**
      * Get filtered personalDetails list with current policyMembers
-     * @param {Object} policyMembers
-     * @param {Object} personalDetails
-     * @returns {Object}
+     * @param policyMembers
+     * @param personalDetails
+     * @returns
      */
-    const filterPersonalDetails = (policyMembers, personalDetails) =>
-        _.reduce(
-            _.keys(policyMembers),
-            (result, key) => {
-                if (personalDetails[key]) {
-                    return {
-                        ...result,
-                        [key]: personalDetails[key],
-                    };
-                }
-                return result;
-            },
-            {},
-        );
+    const filterPersonalDetails = (members: OnyxEntry<PolicyMembers>, details: OnyxEntry<PersonalDetailsList>) =>
+        Object.keys(members ?? {}).reduce((result, key) => {
+            if (details?.[key]) {
+                return {
+                    ...result,
+                    [key]: details[key],
+                };
+            }
+            return result;
+        }, {});
 
     /**
      * Get members for the current workspace
      */
     const getWorkspaceMembers = useCallback(() => {
-        Policy.openWorkspaceMembersPage(props.route.params.policyID, _.keys(PolicyUtils.getMemberAccountIDsForWorkspace(props.policyMembers, props.personalDetails)));
-    }, [props.route.params.policyID, props.policyMembers, props.personalDetails]);
+        Policy.openWorkspaceMembersPage(route.params.policyID, Object.keys(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails)));
+    }, [route.params.policyID, policyMembers, personalDetails]);
 
     /**
      * Check if the current selection includes members that cannot be removed
      */
     const validateSelection = useCallback(() => {
         const newErrors = {};
-        const ownerAccountID = _.first(PersonalDetailsUtils.getAccountIDsByLogins(props.policy.owner ? [props.policy.owner] : []));
+        const ownerAccountID = PersonalDetailsUtils.getAccountIDsByLogins(policy?.owner ? [policy.owner] : [])[0];
         _.each(selectedEmployees, (member) => {
-            if (member !== ownerAccountID && member !== props.session.accountID) {
+            if (member !== ownerAccountID && member !== session.accountID) {
                 return;
             }
-            newErrors[member] = props.translate('workspace.people.error.cannotRemove');
+            newErrors[member] = translate('workspace.people.error.cannotRemove');
         });
         setErrors(newErrors);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedEmployees, props.policy.owner, props.session.accountID]);
+    }, [selectedEmployees, policy?.owner, session?.accountID]);
 
     useEffect(() => {
         getWorkspaceMembers();
@@ -146,7 +175,7 @@ function WorkspaceMembersPage(props) {
 
     useEffect(() => {
         validateSelection();
-    }, [props.preferredLocale, validateSelection]);
+    }, [preferredLocale, validateSelection]);
 
     useEffect(() => {
         if (removeMembersConfirmModalVisible && !_.isEqual(accountIDs, prevAccountIDs)) {
@@ -154,32 +183,32 @@ function WorkspaceMembersPage(props) {
         }
         setSelectedEmployees((prevSelected) => {
             // Filter all personal details in order to use the elements needed for the current workspace
-            const currentPersonalDetails = filterPersonalDetails(props.policyMembers, props.personalDetails);
+            const currentPersonalDetails = filterPersonalDetails(policyMembers, personalDetails);
             // We need to filter the previous selected employees by the new personal details, since unknown/new user id's change when transitioning from offline to online
             const prevSelectedElements = _.map(prevSelected, (id) => {
                 const prevItem = lodashGet(prevPersonalDetails, id);
                 const res = _.find(_.values(currentPersonalDetails), (item) => lodashGet(prevItem, 'login') === lodashGet(item, 'login'));
                 return lodashGet(res, 'accountID', id);
             });
-            return _.intersection(prevSelectedElements, _.values(PolicyUtils.getMemberAccountIDsForWorkspace(props.policyMembers, props.personalDetails)));
+            return _.intersection(prevSelectedElements, _.values(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails)));
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.policyMembers]);
+    }, [policyMembers]);
 
     useEffect(() => {
-        const isReconnecting = prevIsOffline && !props.network.isOffline;
+        const isReconnecting = prevIsOffline && !isOffline;
         if (!isReconnecting) {
             return;
         }
         getWorkspaceMembers();
-    }, [props.network.isOffline, prevIsOffline, getWorkspaceMembers]);
+    }, [isOffline, prevIsOffline, getWorkspaceMembers]);
 
     /**
      * Open the modal to invite a user
      */
     const inviteUser = () => {
         setSearchValue('');
-        Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID));
+        Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID));
     };
 
     /**
@@ -191,9 +220,9 @@ function WorkspaceMembersPage(props) {
         }
 
         // Remove the admin from the list
-        const accountIDsToRemove = _.without(selectedEmployees, props.session.accountID);
+        const accountIDsToRemove = _.without(selectedEmployees, session.accountID);
 
-        Policy.removeMembers(accountIDsToRemove, props.route.params.policyID);
+        Policy.removeMembers(accountIDsToRemove, route.params.policyID);
         setSelectedEmployees([]);
         setRemoveMembersConfirmModalVisible(false);
     };
@@ -210,7 +239,7 @@ function WorkspaceMembersPage(props) {
 
     /**
      * Add or remove all users passed from the selectedEmployees list
-     * @param {Object} memberList
+     * @param memberList
      */
     const toggleAllUsers = (memberList) => {
         const enabledAccounts = _.filter(memberList, (member) => !member.isDisabled);
@@ -283,37 +312,39 @@ function WorkspaceMembersPage(props) {
     const dismissError = useCallback(
         (item) => {
             if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
-                Policy.clearDeleteMemberError(props.route.params.policyID, item.accountID);
+                Policy.clearDeleteMemberError(route.params.policyID, item.accountID);
             } else {
-                Policy.clearAddMemberError(props.route.params.policyID, item.accountID);
+                Policy.clearAddMemberError(route.params.policyID, item.accountID);
             }
         },
-        [props.route.params.policyID],
+        [route.params.policyID],
     );
 
     /**
      * Check if the policy member is deleted from the workspace
      *
-     * @param {Object} policyMember
-     * @returns {Boolean}
+     * @param policyMember
+     * @returns
      */
-    const isDeletedPolicyMember = (policyMember) => !props.network.isOffline && policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && _.isEmpty(policyMember.errors);
-    const policyOwner = lodashGet(props.policy, 'owner');
-    const currentUserLogin = lodashGet(props.currentUserPersonalDetails, 'login');
-    const policyID = lodashGet(props.route, 'params.policyID');
-    const policyName = lodashGet(props.policy, 'name');
-    const invitedPrimaryToSecondaryLogins = _.invert(props.policy.primaryLoginsInvited);
+    const isDeletedPolicyMember = (policyMember) => !isOffline && policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && _.isEmpty(policyMember.errors);
+    const policyOwner = lodashGet(policy, 'owner');
+    const currentUserLogin = lodashGet(currentUserPersonalDetails, 'login');
+    const policyID = lodashGet(route, 'params.policyID');
+    const policyName = lodashGet(policy, 'name');
+    const invitedPrimaryToSecondaryLogins = _.invert(policy?.primaryLoginsInvited);
 
     const getMemberOptions = () => {
-        let result = [];
+        let result: MemberOption[] = [];
 
-        _.each(props.policyMembers, (policyMember, accountIDKey) => {
+        console.log('*** POLICY MEMBERS ***', policyMembers);
+
+        Object.entries(policyMembers ?? {}).forEach(([accountIDKey, policyMember]) => {
             const accountID = Number(accountIDKey);
             if (isDeletedPolicyMember(policyMember)) {
                 return;
             }
 
-            const details = props.personalDetails[accountID];
+            const details = personalDetails?.[accountID];
 
             if (!details) {
                 Log.hmmm(`[WorkspaceMembersPage] no personal details found for policy member with accountID: ${accountID}`);
@@ -347,34 +378,34 @@ function WorkspaceMembersPage(props) {
             // If this policy is owned by Expensify then show all support (expensify.com or team.expensify.com) emails
             // We don't want to show guides as policy members unless the user is a guide. Some customers get confused when they
             // see random people added to their policy, but guides having access to the policies help set them up.
-            if (PolicyUtils.isExpensifyTeam(details.login || details.displayName)) {
+            if (PolicyUtils.isExpensifyTeam(details?.login ?? details?.displayName ?? '')) {
                 if (policyOwner && currentUserLogin && !PolicyUtils.isExpensifyTeam(policyOwner) && !PolicyUtils.isExpensifyTeam(currentUserLogin)) {
                     return;
                 }
             }
 
-            const isAdmin = props.session.email === details.login || policyMember.role === CONST.POLICY.ROLE.ADMIN;
+            const isAdmin = session?.email === details.login || policyMember.role === CONST.POLICY.ROLE.ADMIN;
 
             result.push({
                 keyForList: accountIDKey,
                 accountID,
-                isSelected: _.contains(selectedEmployees, accountID),
+                isSelected: selectedEmployees.includes(accountID),
                 isDisabled:
-                    accountID === props.session.accountID ||
-                    details.login === props.policy.owner ||
+                    accountID === session?.accountID ||
+                    details.login === policy?.owner ||
                     policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ||
-                    !_.isEmpty(policyMember.errors),
-                text: props.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)),
-                alternateText: props.formatPhoneNumber(details.login),
+                    Object.keys(policyMember.errors ?? {}).length > 0,
+                text: formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)),
+                alternateText: formatPhoneNumber(details?.login ?? ''),
                 rightElement: isAdmin ? (
                     <View style={[styles.badge, styles.peopleBadge]}>
-                        <Text style={styles.peopleBadgeText}>{props.translate('common.admin')}</Text>
+                        <Text style={styles.peopleBadgeText}>{translate('common.admin')}</Text>
                     </View>
                 ) : null,
                 icons: [
                     {
                         source: UserUtils.getAvatar(details.avatar, accountID),
-                        name: props.formatPhoneNumber(details.login),
+                        name: formatPhoneNumber(details?.login ?? ''),
                         type: CONST.ICON_TYPE_AVATAR,
                         id: accountID,
                     },
@@ -383,11 +414,11 @@ function WorkspaceMembersPage(props) {
                 pendingAction: policyMember.pendingAction,
 
                 // Note which secondary login was used to invite this primary login
-                invitedSecondaryLogin: invitedPrimaryToSecondaryLogins[details.login] || '',
+                invitedSecondaryLogin: details?.login ? invitedPrimaryToSecondaryLogins[details.login] ?? '' : '',
             });
         });
 
-        result = _.sortBy(result, (value) => value.text.toLowerCase());
+        result = result.sort((a, b) => a.text.localeCompare(b.text.toLowerCase()));
 
         return result;
     };
@@ -395,9 +426,9 @@ function WorkspaceMembersPage(props) {
 
     const getHeaderMessage = () => {
         if (isOfflineAndNoMemberDataAvailable) {
-            return props.translate('workspace.common.mustBeOnlineToViewMembers');
+            return translate('workspace.common.mustBeOnlineToViewMembers');
         }
-        return searchValue.trim() && !data.length ? props.translate('workspace.common.memberNotFound') : '';
+        return searchValue.trim() && !data.length ? translate('workspace.common.memberNotFound') : '';
     };
 
     const getHeaderContent = () => {
@@ -407,13 +438,12 @@ function WorkspaceMembersPage(props) {
         return (
             <MessagesRow
                 type="success"
-                messages={{0: props.translate('workspace.people.addedWithPrimary')}}
+                messages={{0: translate('workspace.people.addedWithPrimary')}}
                 containerStyles={[styles.pb5, styles.ph5]}
                 onClose={() => Policy.dismissAddedWithPrimaryLoginMessages(policyID)}
             />
         );
     };
-
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -421,12 +451,12 @@ function WorkspaceMembersPage(props) {
             testID={WorkspaceMembersPage.displayName}
         >
             <FullPageNotFoundView
-                shouldShow={(_.isEmpty(props.policy) && !props.isLoadingReportData) || !PolicyUtils.isPolicyAdmin(props.policy) || PolicyUtils.isPendingDeletePolicy(props.policy)}
-                subtitleKey={_.isEmpty(props.policy) ? undefined : 'workspace.common.notAuthorized'}
+                shouldShow={(_.isEmpty(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
+                subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
             >
                 <HeaderWithBackButton
-                    title={props.translate('workspace.common.members')}
+                    title={translate('workspace.common.members')}
                     subtitle={policyName}
                     onBackButtonPress={() => {
                         setSearchValue('');
@@ -437,28 +467,28 @@ function WorkspaceMembersPage(props) {
                 />
                 <ConfirmModal
                     danger
-                    title={props.translate('workspace.people.removeMembersTitle')}
+                    title={translate('workspace.people.removeMembersTitle')}
                     isVisible={removeMembersConfirmModalVisible}
                     onConfirm={removeUsers}
                     onCancel={() => setRemoveMembersConfirmModalVisible(false)}
-                    prompt={props.translate('workspace.people.removeMembersPrompt')}
-                    confirmText={props.translate('common.remove')}
-                    cancelText={props.translate('common.cancel')}
-                    onModalHide={() =>
+                    prompt={translate('workspace.people.removeMembersPrompt')}
+                    confirmText={translate('common.remove')}
+                    cancelText={translate('common.cancel')}
+                    onModalHide={() => {
                         InteractionManager.runAfterInteractions(() => {
                             if (!textInputRef.current) {
                                 return;
                             }
                             textInputRef.current.focus();
-                        })
-                    }
+                        });
+                    }}
                 />
                 <View style={[styles.w100, styles.flex1]}>
                     <View style={[styles.w100, styles.flexRow, styles.pt3, styles.ph5]}>
                         <Button
                             medium
                             success
-                            text={props.translate('common.invite')}
+                            text={translate('common.invite')}
                             onPress={inviteUser}
                         />
                         <Button
@@ -466,16 +496,18 @@ function WorkspaceMembersPage(props) {
                             danger
                             style={[styles.ml2]}
                             isDisabled={selectedEmployees.length === 0}
-                            text={props.translate('common.remove')}
+                            text={translate('common.remove')}
                             onPress={askForConfirmationToRemove}
                         />
                     </View>
                     <View style={[styles.w100, styles.mt4, styles.flex1]}>
                         <SelectionList
+                            // @ts-expect-error TODO: remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is converted to TypeScript.
                             canSelectMultiple
                             sections={[{data, indexOffset: 0, isDisabled: false}]}
-                            textInputLabel={props.translate('optionsSelector.findMember')}
+                            textInputLabel={translate('optionsSelector.findMember')}
                             textInputValue={searchValue}
+                            // @ts-expect-error TODO: remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is converted to TypeScript.
                             onChangeText={(value) => {
                                 SearchInputManager.searchInput = value;
                                 setSearchValue(value);
@@ -483,10 +515,12 @@ function WorkspaceMembersPage(props) {
                             disableKeyboardShortcuts={removeMembersConfirmModalVisible}
                             headerMessage={getHeaderMessage()}
                             headerContent={getHeaderContent()}
+                            // @ts-expect-error TODO: remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is converted to TypeScript.
                             onSelectRow={(item) => toggleUser(item.accountID)}
                             onSelectAll={() => toggleAllUsers(data)}
                             onDismissError={dismissError}
-                            showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers))}
+                            // @ts-expect-error TODO: remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is converted to TypeScript.
+                            showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(personalDetails) ?? !policyMembers)}
                             showScrollIndicator
                             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
                             inputRef={textInputRef}
@@ -503,11 +537,9 @@ WorkspaceMembersPage.defaultProps = defaultProps;
 WorkspaceMembersPage.displayName = 'WorkspaceMembersPage';
 
 export default compose(
-    withLocalize,
-    withWindowDimensions,
     withPolicyAndFullscreenLoading,
-    withNetwork(),
-    withOnyx({
+    withCurrentUserPersonalDetails,
+    withOnyx<WorkspaceMembersPageProps, WorkspaceMembersPageOnyxProps>({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
@@ -518,5 +550,4 @@ export default compose(
             key: ONYXKEYS.IS_LOADING_REPORT_DATA,
         },
     }),
-    withCurrentUserPersonalDetails,
 )(WorkspaceMembersPage);

From ea748a815009168832c07af0c10d0dcfd0452c70 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Wed, 24 Jan 2024 16:45:17 +0100
Subject: [PATCH 02/12] remove compose from default export

---
 src/pages/workspace/WorkspaceMembersPage.tsx | 185 +++++++------------
 1 file changed, 63 insertions(+), 122 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index 7d29d6e72978..3017c12c4bac 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -1,13 +1,9 @@
 import {useIsFocused} from '@react-navigation/native';
-import type {StackScreenProps} from '@react-navigation/stack';
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {TextInput} from 'react-native';
 import {InteractionManager, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
@@ -17,67 +13,33 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
-import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as UserUtils from '@libs/UserUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type SCREENS from '@src/SCREENS';
-import type {PersonalDetailsList, PolicyMembers, Session} from '@src/types/onyx';
+import type {PersonalDetails, PersonalDetailsList, PolicyMember, PolicyMembers} from '@src/types/onyx';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import SearchInputManager from './SearchInputManager';
-import {policyDefaultProps, policyPropTypes} from './withPolicy';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
-const propTypes = {
-    /** All personal details asssociated with user */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
-    /** URL Route params */
-    route: PropTypes.shape({
-        /** Params from the URL path */
-        params: PropTypes.shape({
-            /** policyID passed via route: /workspace/:policyID/members */
-            policyID: PropTypes.string,
-        }),
-    }).isRequired,
-
-    /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user accountID */
-        accountID: PropTypes.number,
-    }),
-
-    isLoadingReportData: PropTypes.bool,
-    ...policyPropTypes,
-    ...withCurrentUserPersonalDetailsPropTypes,
-};
-
 type WorkspaceMembersPageOnyxProps = {
     personalDetails: OnyxEntry<PersonalDetailsList>;
-    session: OnyxEntry<Session>;
-    isLoadingReportData: OnyxEntry<boolean>;
 };
 
-type WorkspaceMembersPageProps = Omit<WithPolicyAndFullscreenLoadingProps, 'route'> &
-    WithCurrentUserPersonalDetailsProps &
-    WorkspaceMembersPageOnyxProps &
-    StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBERS>;
+type WorkspaceMembersPageProps = WithPolicyAndFullscreenLoadingProps & WithCurrentUserPersonalDetailsProps & WorkspaceMembersPageOnyxProps;
 
 type MemberOption = {
     keyForList: string;
@@ -93,19 +55,22 @@ type MemberOption = {
     invitedSecondaryLogin?: string;
 };
 
-const defaultProps = {
-    personalDetails: {},
-    session: {
-        accountID: 0,
-    },
-    isLoadingReportData: true,
-    ...policyDefaultProps,
-    ...withCurrentUserPersonalDetailsDefaultProps,
-};
+/**
+ * Inverts an object, equivalent of _.invert
+ */
+function invertObject(object: Record<string, string>): Record<string, string> {
+    const obj: Record<string, string> = {};
+    for (const key in object) {
+        if (Object.prototype.hasOwnProperty.call(object, key)) {
+            obj[object[key]] = key;
+        }
+    }
+    return obj;
+}
 
-function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, session, currentUserPersonalDetails, isLoadingReportData}: WorkspaceMembersPageProps) {
+function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, session, currentUserPersonalDetails, isLoadingReportData = true}: WorkspaceMembersPageProps) {
     const styles = useThemeStyles();
-    const [selectedEmployees, setSelectedEmployees] = useState([]);
+    const [selectedEmployees, setSelectedEmployees] = useState<number[]>([]);
     const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false);
     const [errors, setErrors] = useState({});
     const [searchValue, setSearchValue] = useState('');
@@ -114,7 +79,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     const accountIDs = useMemo(() => Object.keys(policyMembers ?? {}).map((accountID) => Number(accountID)), [policyMembers]);
     const prevAccountIDs = usePrevious(accountIDs);
     const textInputRef = useRef<TextInput>(null);
-    const isOfflineAndNoMemberDataAvailable = _.isEmpty(policyMembers) && isOffline;
+    const isOfflineAndNoMemberDataAvailable = Object.keys(policyMembers ?? {}).length === 0 && isOffline;
     const prevPersonalDetails = usePrevious(personalDetails);
     const {translate, formatPhoneNumber, preferredLocale} = useLocalize();
 
@@ -130,11 +95,8 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     /**
      * Get filtered personalDetails list with current policyMembers
-     * @param policyMembers
-     * @param personalDetails
-     * @returns
      */
-    const filterPersonalDetails = (members: OnyxEntry<PolicyMembers>, details: OnyxEntry<PersonalDetailsList>) =>
+    const filterPersonalDetails = (members: OnyxEntry<PolicyMembers>, details: OnyxEntry<PersonalDetailsList>): Record<string, PersonalDetails> =>
         Object.keys(members ?? {}).reduce((result, key) => {
             if (details?.[key]) {
                 return {
@@ -156,10 +118,10 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
      * Check if the current selection includes members that cannot be removed
      */
     const validateSelection = useCallback(() => {
-        const newErrors = {};
+        const newErrors: Record<number, string> = {};
         const ownerAccountID = PersonalDetailsUtils.getAccountIDsByLogins(policy?.owner ? [policy.owner] : [])[0];
-        _.each(selectedEmployees, (member) => {
-            if (member !== ownerAccountID && member !== session.accountID) {
+        selectedEmployees.forEach((member) => {
+            if (member !== ownerAccountID && member !== session?.accountID) {
                 return;
             }
             newErrors[member] = translate('workspace.people.error.cannotRemove');
@@ -178,19 +140,19 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     }, [preferredLocale, validateSelection]);
 
     useEffect(() => {
-        if (removeMembersConfirmModalVisible && !_.isEqual(accountIDs, prevAccountIDs)) {
+        if (removeMembersConfirmModalVisible && JSON.stringify(accountIDs.sort()) !== JSON.stringify(prevAccountIDs.sort())) {
             setRemoveMembersConfirmModalVisible(false);
         }
         setSelectedEmployees((prevSelected) => {
             // Filter all personal details in order to use the elements needed for the current workspace
             const currentPersonalDetails = filterPersonalDetails(policyMembers, personalDetails);
             // We need to filter the previous selected employees by the new personal details, since unknown/new user id's change when transitioning from offline to online
-            const prevSelectedElements = _.map(prevSelected, (id) => {
-                const prevItem = lodashGet(prevPersonalDetails, id);
-                const res = _.find(_.values(currentPersonalDetails), (item) => lodashGet(prevItem, 'login') === lodashGet(item, 'login'));
-                return lodashGet(res, 'accountID', id);
+            const prevSelectedElements = prevSelected.map((id) => {
+                const prevItem = prevPersonalDetails?.id;
+                const res = Object.values(currentPersonalDetails).find((item) => prevItem?.login === item?.login);
+                return res?.accountID ?? id;
             });
-            return _.intersection(prevSelectedElements, _.values(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails)));
+            return [prevSelectedElements, Object.values(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails))].reduce((a, b) => a.filter((c) => b.includes(c)));
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [policyMembers]);
@@ -215,12 +177,12 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
      * Remove selected users from the workspace
      */
     const removeUsers = () => {
-        if (!_.isEmpty(errors)) {
+        if (Object.keys(errors).length > 0) {
             return;
         }
 
         // Remove the admin from the list
-        const accountIDsToRemove = _.without(selectedEmployees, session.accountID);
+        const accountIDsToRemove = session?.accountID ? selectedEmployees.filter((id) => id !== session.accountID) : selectedEmployees;
 
         Policy.removeMembers(accountIDsToRemove, route.params.policyID);
         setSelectedEmployees([]);
@@ -231,7 +193,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
      * Show the modal to confirm removal of the selected members
      */
     const askForConfirmationToRemove = () => {
-        if (!_.isEmpty(errors)) {
+        if (Object.keys(errors).length > 0) {
             return;
         }
         setRemoveMembersConfirmModalVisible(true);
@@ -239,16 +201,15 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     /**
      * Add or remove all users passed from the selectedEmployees list
-     * @param memberList
      */
-    const toggleAllUsers = (memberList) => {
-        const enabledAccounts = _.filter(memberList, (member) => !member.isDisabled);
-        const everyoneSelected = _.every(enabledAccounts, (member) => _.contains(selectedEmployees, member.accountID));
+    const toggleAllUsers = (memberList: MemberOption[]) => {
+        const enabledAccounts = memberList.filter((member) => !member.isDisabled);
+        const everyoneSelected = enabledAccounts.every((member) => selectedEmployees.includes(member.accountID));
 
         if (everyoneSelected) {
             setSelectedEmployees([]);
         } else {
-            const everyAccountId = _.map(enabledAccounts, (member) => member.accountID);
+            const everyAccountId = enabledAccounts.map((member) => member.accountID);
             setSelectedEmployees(everyAccountId);
         }
 
@@ -257,11 +218,9 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     /**
      * Add user from the selectedEmployees list
-     *
-     * @param {String} login
      */
     const addUser = useCallback(
-        (accountID) => {
+        (accountID: number) => {
             setSelectedEmployees((prevSelected) => [...prevSelected, accountID]);
             validateSelection();
         },
@@ -270,12 +229,10 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     /**
      * Remove user from the selectedEmployees list
-     *
-     * @param {String} login
      */
     const removeUser = useCallback(
-        (accountID) => {
-            setSelectedEmployees((prevSelected) => _.without(prevSelected, accountID));
+        (accountID: number) => {
+            setSelectedEmployees((prevSelected) => prevSelected.filter((id) => id !== accountID));
             validateSelection();
         },
         [validateSelection],
@@ -283,19 +240,15 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     /**
      * Toggle user from the selectedEmployees list
-     *
-     * @param {String} accountID
-     * @param {String} pendingAction
-     *
      */
     const toggleUser = useCallback(
-        (accountID, pendingAction) => {
+        (accountID: number, pendingAction?: PendingAction) => {
             if (pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
                 return;
             }
 
             // Add or remove the user if the checkbox is enabled
-            if (_.contains(selectedEmployees, accountID)) {
+            if (selectedEmployees.includes(accountID)) {
                 removeUser(accountID);
             } else {
                 addUser(accountID);
@@ -306,11 +259,9 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     /**
      * Dismisses the errors on one item
-     *
-     * @param {Object} item
      */
     const dismissError = useCallback(
-        (item) => {
+        (item: MemberOption) => {
             if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
                 Policy.clearDeleteMemberError(route.params.policyID, item.accountID);
             } else {
@@ -322,22 +273,19 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     /**
      * Check if the policy member is deleted from the workspace
-     *
-     * @param policyMember
-     * @returns
      */
-    const isDeletedPolicyMember = (policyMember) => !isOffline && policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && _.isEmpty(policyMember.errors);
-    const policyOwner = lodashGet(policy, 'owner');
-    const currentUserLogin = lodashGet(currentUserPersonalDetails, 'login');
-    const policyID = lodashGet(route, 'params.policyID');
-    const policyName = lodashGet(policy, 'name');
-    const invitedPrimaryToSecondaryLogins = _.invert(policy?.primaryLoginsInvited);
+    const isDeletedPolicyMember = (policyMember: PolicyMember) =>
+        !isOffline && policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && Object.keys(policyMember.errors ?? {}).length === 0;
+    const policyOwner = policy?.owner;
+    const currentUserLogin = currentUserPersonalDetails.login;
+    const policyID = route.params.policyID;
+    const policyName = policy?.name;
+
+    const invitedPrimaryToSecondaryLogins = invertObject(policy?.primaryLoginsInvited ?? {});
 
     const getMemberOptions = () => {
         let result: MemberOption[] = [];
 
-        console.log('*** POLICY MEMBERS ***', policyMembers);
-
         Object.entries(policyMembers ?? {}).forEach(([accountIDKey, policyMember]) => {
             const accountID = Number(accountIDKey);
             if (isDeletedPolicyMember(policyMember)) {
@@ -432,13 +380,14 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     };
 
     const getHeaderContent = () => {
-        if (_.isEmpty(invitedPrimaryToSecondaryLogins)) {
+        if (Object.keys(invitedPrimaryToSecondaryLogins).length === 0) {
             return null;
         }
         return (
             <MessagesRow
                 type="success"
-                messages={{0: translate('workspace.people.addedWithPrimary')}}
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                messages={{'0': translate('workspace.people.addedWithPrimary')}}
                 containerStyles={[styles.pb5, styles.ph5]}
                 onClose={() => Policy.dismissAddedWithPrimaryLoginMessages(policyID)}
             />
@@ -451,8 +400,8 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
             testID={WorkspaceMembersPage.displayName}
         >
             <FullPageNotFoundView
-                shouldShow={(_.isEmpty(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
-                subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'}
+                shouldShow={(!policy && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
+                subtitleKey={!policy ? undefined : 'workspace.common.notAuthorized'}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
             >
                 <HeaderWithBackButton
@@ -532,22 +481,14 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     );
 }
 
-WorkspaceMembersPage.propTypes = propTypes;
-WorkspaceMembersPage.defaultProps = defaultProps;
 WorkspaceMembersPage.displayName = 'WorkspaceMembersPage';
 
-export default compose(
-    withPolicyAndFullscreenLoading,
-    withCurrentUserPersonalDetails,
-    withOnyx<WorkspaceMembersPageProps, WorkspaceMembersPageOnyxProps>({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-        isLoadingReportData: {
-            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-        },
-    }),
-)(WorkspaceMembersPage);
+export default withCurrentUserPersonalDetails(
+    withPolicyAndFullscreenLoading(
+        withOnyx<WorkspaceMembersPageProps, WorkspaceMembersPageOnyxProps>({
+            personalDetails: {
+                key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+            },
+        })(WorkspaceMembersPage),
+    ),
+);

From 1a36412d4a6ec18593c0ef2b3e4b750e8725ec61 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Thu, 25 Jan 2024 10:27:46 +0100
Subject: [PATCH 03/12] add comment to onyx props

---
 src/pages/workspace/WorkspaceMembersPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index 3017c12c4bac..ba2170238737 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -36,6 +36,7 @@ import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscree
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
 type WorkspaceMembersPageOnyxProps = {
+    /** Personal details of all users */
     personalDetails: OnyxEntry<PersonalDetailsList>;
 };
 

From fa28666eff5230d54c3f0d03793288931708e316 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Thu, 25 Jan 2024 12:30:38 +0100
Subject: [PATCH 04/12] migrate to typed SelectionList

---
 src/components/SelectionList/types.ts        | 2 +-
 src/pages/workspace/WorkspaceMembersPage.tsx | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index a82ddef6febb..d2ecb1e52c39 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -145,7 +145,7 @@ type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenPr
     onSelectAll?: () => void;
 
     /** Callback to fire when an error is dismissed */
-    onDismissError?: () => void;
+    onDismissError?: (item: TItem) => void;
 
     /** Label for the text input */
     textInputLabel?: string;
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index ba2170238737..377f16aee748 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -452,12 +452,10 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                     </View>
                     <View style={[styles.w100, styles.mt4, styles.flex1]}>
                         <SelectionList
-                            // @ts-expect-error TODO: remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is converted to TypeScript.
                             canSelectMultiple
                             sections={[{data, indexOffset: 0, isDisabled: false}]}
                             textInputLabel={translate('optionsSelector.findMember')}
                             textInputValue={searchValue}
-                            // @ts-expect-error TODO: remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is converted to TypeScript.
                             onChangeText={(value) => {
                                 SearchInputManager.searchInput = value;
                                 setSearchValue(value);
@@ -465,15 +463,14 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                             disableKeyboardShortcuts={removeMembersConfirmModalVisible}
                             headerMessage={getHeaderMessage()}
                             headerContent={getHeaderContent()}
-                            // @ts-expect-error TODO: remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is converted to TypeScript.
                             onSelectRow={(item) => toggleUser(item.accountID)}
                             onSelectAll={() => toggleAllUsers(data)}
                             onDismissError={dismissError}
-                            // @ts-expect-error TODO: remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is converted to TypeScript.
+                            // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
                             showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(personalDetails) ?? !policyMembers)}
                             showScrollIndicator
                             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
-                            inputRef={textInputRef}
+                            ref={textInputRef}
                         />
                     </View>
                 </View>

From b3253d3a44b2b6ec7bbc1db151946149be9bc8bd Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Fri, 26 Jan 2024 09:22:31 +0100
Subject: [PATCH 05/12] apply suggested changes

---
 src/libs/PolicyUtils.ts                      |  2 +-
 src/pages/workspace/WorkspaceMembersPage.tsx | 58 ++++++++------------
 2 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index b8ed62f93082..f82350e72a95 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -97,7 +97,7 @@ function shouldShowPolicy(policy: OnyxEntry<Policy>, isOffline: boolean): boolea
     );
 }
 
-function isExpensifyTeam(email: string): boolean {
+function isExpensifyTeam(email?: string): boolean {
     const emailDomain = Str.extractEmailDomain(email ?? '');
     return emailDomain === CONST.EXPENSIFY_PARTNER_NAME || emailDomain === CONST.EMAIL.GUIDES_DOMAIN;
 }
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index 377f16aee748..cb639257c1df 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -11,6 +11,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MessagesRow from '@components/MessagesRow';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
+import type {User} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
@@ -30,7 +31,8 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {PersonalDetails, PersonalDetailsList, PolicyMember, PolicyMembers} from '@src/types/onyx';
-import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
+import type {PendingAction} from '@src/types/onyx/OnyxCommon';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import SearchInputManager from './SearchInputManager';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
@@ -42,33 +44,17 @@ type WorkspaceMembersPageOnyxProps = {
 
 type WorkspaceMembersPageProps = WithPolicyAndFullscreenLoadingProps & WithCurrentUserPersonalDetailsProps & WorkspaceMembersPageOnyxProps;
 
-type MemberOption = {
-    keyForList: string;
-    accountID: number;
-    isSelected: boolean;
-    isDisabled: boolean;
-    text: string;
-    alternateText: string;
-    rightElement: React.ReactNode | null;
-    icons: Icon[];
-    errors?: Errors;
-    pendingAction?: PendingAction;
-    invitedSecondaryLogin?: string;
-};
-
 /**
  * Inverts an object, equivalent of _.invert
  */
 function invertObject(object: Record<string, string>): Record<string, string> {
-    const obj: Record<string, string> = {};
-    for (const key in object) {
-        if (Object.prototype.hasOwnProperty.call(object, key)) {
-            obj[object[key]] = key;
-        }
-    }
-    return obj;
+    const invertedEntries = Object.entries(object).map(([key, value]) => [value, key]);
+    const inverted: Record<string, string> = Object.fromEntries(invertedEntries);
+    return inverted;
 }
 
+type MemberOption = Omit<User, 'accountID'> & {accountID: number};
+
 function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, session, currentUserPersonalDetails, isLoadingReportData = true}: WorkspaceMembersPageProps) {
     const styles = useThemeStyles();
     const [selectedEmployees, setSelectedEmployees] = useState<number[]>([]);
@@ -80,7 +66,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     const accountIDs = useMemo(() => Object.keys(policyMembers ?? {}).map((accountID) => Number(accountID)), [policyMembers]);
     const prevAccountIDs = usePrevious(accountIDs);
     const textInputRef = useRef<TextInput>(null);
-    const isOfflineAndNoMemberDataAvailable = Object.keys(policyMembers ?? {}).length === 0 && isOffline;
+    const isOfflineAndNoMemberDataAvailable = isEmptyObject(policyMembers) && isOffline;
     const prevPersonalDetails = usePrevious(personalDetails);
     const {translate, formatPhoneNumber, preferredLocale} = useLocalize();
 
@@ -153,7 +139,9 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                 const res = Object.values(currentPersonalDetails).find((item) => prevItem?.login === item?.login);
                 return res?.accountID ?? id;
             });
-            return [prevSelectedElements, Object.values(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails))].reduce((a, b) => a.filter((c) => b.includes(c)));
+            return [prevSelectedElements, Object.values(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails))].reduce((prev, members) =>
+                prev.filter((item) => members.includes(item)),
+            );
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [policyMembers]);
@@ -178,7 +166,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
      * Remove selected users from the workspace
      */
     const removeUsers = () => {
-        if (Object.keys(errors).length > 0) {
+        if (!isEmptyObject(errors)) {
             return;
         }
 
@@ -194,7 +182,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
      * Show the modal to confirm removal of the selected members
      */
     const askForConfirmationToRemove = () => {
-        if (Object.keys(errors).length > 0) {
+        if (!isEmptyObject(errors)) {
             return;
         }
         setRemoveMembersConfirmModalVisible(true);
@@ -275,8 +263,8 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     /**
      * Check if the policy member is deleted from the workspace
      */
-    const isDeletedPolicyMember = (policyMember: PolicyMember) =>
-        !isOffline && policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && Object.keys(policyMember.errors ?? {}).length === 0;
+    const isDeletedPolicyMember = (policyMember: PolicyMember): boolean =>
+        !isOffline && policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && isEmptyObject(policyMember.errors);
     const policyOwner = policy?.owner;
     const currentUserLogin = currentUserPersonalDetails.login;
     const policyID = route.params.policyID;
@@ -284,7 +272,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     const invitedPrimaryToSecondaryLogins = invertObject(policy?.primaryLoginsInvited ?? {});
 
-    const getMemberOptions = () => {
+    const getUsers = (): MemberOption[] => {
         let result: MemberOption[] = [];
 
         Object.entries(policyMembers ?? {}).forEach(([accountIDKey, policyMember]) => {
@@ -327,7 +315,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
             // If this policy is owned by Expensify then show all support (expensify.com or team.expensify.com) emails
             // We don't want to show guides as policy members unless the user is a guide. Some customers get confused when they
             // see random people added to their policy, but guides having access to the policies help set them up.
-            if (PolicyUtils.isExpensifyTeam(details?.login ?? details?.displayName ?? '')) {
+            if (PolicyUtils.isExpensifyTeam(details?.login ?? details?.displayName)) {
                 if (policyOwner && currentUserLogin && !PolicyUtils.isExpensifyTeam(policyOwner) && !PolicyUtils.isExpensifyTeam(currentUserLogin)) {
                     return;
                 }
@@ -343,14 +331,14 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                     accountID === session?.accountID ||
                     details.login === policy?.owner ||
                     policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ||
-                    Object.keys(policyMember.errors ?? {}).length > 0,
+                    !isEmptyObject(policyMember.errors),
                 text: formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)),
                 alternateText: formatPhoneNumber(details?.login ?? ''),
                 rightElement: isAdmin ? (
                     <View style={[styles.badge, styles.peopleBadge]}>
                         <Text style={styles.peopleBadgeText}>{translate('common.admin')}</Text>
                     </View>
-                ) : null,
+                ) : undefined,
                 icons: [
                     {
                         source: UserUtils.getAvatar(details.avatar, accountID),
@@ -371,7 +359,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
         return result;
     };
-    const data = getMemberOptions();
+    const data = getUsers();
 
     const getHeaderMessage = () => {
         if (isOfflineAndNoMemberDataAvailable) {
@@ -381,7 +369,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     };
 
     const getHeaderContent = () => {
-        if (Object.keys(invitedPrimaryToSecondaryLogins).length === 0) {
+        if (isEmptyObject(invitedPrimaryToSecondaryLogins)) {
             return null;
         }
         return (
@@ -467,7 +455,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                             onSelectAll={() => toggleAllUsers(data)}
                             onDismissError={dismissError}
                             // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
-                            showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(personalDetails) ?? !policyMembers)}
+                            showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(personalDetails) || isEmptyObject(policyMembers))}
                             showScrollIndicator
                             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
                             ref={textInputRef}

From f97df6ecba7759769e77d7544052bd4a915e688a Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Fri, 26 Jan 2024 11:11:58 +0100
Subject: [PATCH 06/12] improve route typing

---
 src/pages/workspace/WorkspaceMembersPage.tsx | 10 ++++++++--
 src/pages/workspace/withPolicy.tsx           |  6 ++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index cb639257c1df..f8917a0976d3 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -1,4 +1,5 @@
 import {useIsFocused} from '@react-navigation/native';
+import lodashIsEqual from 'lodash/isEqual';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {TextInput} from 'react-native';
 import {InteractionManager, View} from 'react-native';
@@ -34,6 +35,7 @@ import type {PersonalDetails, PersonalDetailsList, PolicyMember, PolicyMembers}
 import type {PendingAction} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import SearchInputManager from './SearchInputManager';
+import type {PolicyRoute} from './withPolicy';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
@@ -42,7 +44,11 @@ type WorkspaceMembersPageOnyxProps = {
     personalDetails: OnyxEntry<PersonalDetailsList>;
 };
 
-type WorkspaceMembersPageProps = WithPolicyAndFullscreenLoadingProps & WithCurrentUserPersonalDetailsProps & WorkspaceMembersPageOnyxProps;
+type WorkspaceMembersPageProps = WithPolicyAndFullscreenLoadingProps &
+    WithCurrentUserPersonalDetailsProps &
+    WorkspaceMembersPageOnyxProps & {
+        route: PolicyRoute;
+    };
 
 /**
  * Inverts an object, equivalent of _.invert
@@ -127,7 +133,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     }, [preferredLocale, validateSelection]);
 
     useEffect(() => {
-        if (removeMembersConfirmModalVisible && JSON.stringify(accountIDs.sort()) !== JSON.stringify(prevAccountIDs.sort())) {
+        if (removeMembersConfirmModalVisible && !lodashIsEqual(accountIDs, prevAccountIDs)) {
             setRemoveMembersConfirmModalVisible(false);
         }
         setSelectedEmployees((prevSelected) => {
diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index ec38b61fb0dc..74c745491cf3 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -5,13 +5,15 @@ import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import React, {forwardRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 
-type PolicyRoute = RouteProp<{params: {policyID: string}}>;
+type PolicyRoute = RouteProp<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.BILLS | typeof SCREENS.WORKSPACE.INVOICES>;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {
     return route?.params?.policyID ?? '';
@@ -131,4 +133,4 @@ export default function <TProps extends WithPolicyProps, TRef>(WrappedComponent:
 }
 
 export {policyPropTypes, policyDefaultProps};
-export type {WithPolicyOnyxProps, WithPolicyProps};
+export type {WithPolicyOnyxProps, WithPolicyProps, PolicyRoute};

From 48ba4308df1ff84a0ab0260725c465640cf62147 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Fri, 26 Jan 2024 11:13:22 +0100
Subject: [PATCH 07/12] remove unnecessary @ts-expect-error

---
 src/pages/workspace/WorkspaceMembersPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index f8917a0976d3..8821bebc7f25 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -460,7 +460,6 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                             onSelectRow={(item) => toggleUser(item.accountID)}
                             onSelectAll={() => toggleAllUsers(data)}
                             onDismissError={dismissError}
-                            // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
                             showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(personalDetails) || isEmptyObject(policyMembers))}
                             showScrollIndicator
                             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}

From 9053a2d3ee2bd07a97a3581e9007c7b3358172a5 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Fri, 26 Jan 2024 11:38:05 +0100
Subject: [PATCH 08/12] improve return types, fix route type errors

---
 src/libs/PolicyUtils.ts                              |  2 +-
 src/pages/workspace/WorkspaceMembersPage.tsx         | 12 ++++++------
 src/pages/workspace/WorkspacePageWithSections.tsx    |  4 ++--
 .../workspace/invoices/WorkspaceInvoicesPage.tsx     |  4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index f82350e72a95..cc90c6735597 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -97,7 +97,7 @@ function shouldShowPolicy(policy: OnyxEntry<Policy>, isOffline: boolean): boolea
     );
 }
 
-function isExpensifyTeam(email?: string): boolean {
+function isExpensifyTeam(email: string | undefined): boolean {
     const emailDomain = Str.extractEmailDomain(email ?? '');
     return emailDomain === CONST.EXPENSIFY_PARTNER_NAME || emailDomain === CONST.EMAIL.GUIDES_DOMAIN;
 }
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index 8821bebc7f25..4f1bc4e9e874 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -31,8 +31,8 @@ import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {PersonalDetails, PersonalDetailsList, PolicyMember, PolicyMembers} from '@src/types/onyx';
-import type {PendingAction} from '@src/types/onyx/OnyxCommon';
+import type {PersonalDetailsList, PolicyMember, PolicyMembers} from '@src/types/onyx';
+import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import SearchInputManager from './SearchInputManager';
 import type {PolicyRoute} from './withPolicy';
@@ -89,7 +89,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     /**
      * Get filtered personalDetails list with current policyMembers
      */
-    const filterPersonalDetails = (members: OnyxEntry<PolicyMembers>, details: OnyxEntry<PersonalDetailsList>): Record<string, PersonalDetails> =>
+    const filterPersonalDetails = (members: OnyxEntry<PolicyMembers>, details: OnyxEntry<PersonalDetailsList>): PersonalDetailsList =>
         Object.keys(members ?? {}).reduce((result, key) => {
             if (details?.[key]) {
                 return {
@@ -111,7 +111,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
      * Check if the current selection includes members that cannot be removed
      */
     const validateSelection = useCallback(() => {
-        const newErrors: Record<number, string> = {};
+        const newErrors: Errors = {};
         const ownerAccountID = PersonalDetailsUtils.getAccountIDsByLogins(policy?.owner ? [policy.owner] : [])[0];
         selectedEmployees.forEach((member) => {
             if (member !== ownerAccountID && member !== session?.accountID) {
@@ -395,8 +395,8 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
             testID={WorkspaceMembersPage.displayName}
         >
             <FullPageNotFoundView
-                shouldShow={(!policy && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
-                subtitleKey={!policy ? undefined : 'workspace.common.notAuthorized'}
+                shouldShow={(isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
+                subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
             >
                 <HeaderWithBackButton
diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx
index 7a4d9c1f4106..c56f5472884a 100644
--- a/src/pages/workspace/WorkspacePageWithSections.tsx
+++ b/src/pages/workspace/WorkspacePageWithSections.tsx
@@ -1,4 +1,3 @@
-import type {RouteProp} from '@react-navigation/native';
 import React, {useEffect, useMemo, useRef} from 'react';
 import type {ReactNode} from 'react';
 import {View} from 'react-native';
@@ -21,6 +20,7 @@ import ROUTES from '@src/ROUTES';
 import type {Route} from '@src/ROUTES';
 import type {Policy, ReimbursementAccount, User} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type {PolicyRoute} from './withPolicy';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
@@ -41,7 +41,7 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps &
         headerText: string;
 
         /** The route object passed to this page from the navigator */
-        route: RouteProp<{params: {policyID: string}}>;
+        route: PolicyRoute;
 
         /** Main content of the page */
         children: (hasVBA?: boolean, policyID?: string, isUsingECard?: boolean) => ReactNode;
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
index 79ff76204c69..8b11f2da3153 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
@@ -1,6 +1,6 @@
-import type {RouteProp} from '@react-navigation/native';
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
+import type {PolicyRoute} from '@pages/workspace/withPolicy';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView';
@@ -8,7 +8,7 @@ import WorkspaceInvoicesVBAView from './WorkspaceInvoicesVBAView';
 
 /** Defined route object that contains the policyID param, WorkspacePageWithSections is a common component for Workspaces and expect the route prop that includes the policyID */
 type WorkspaceInvoicesPageProps = {
-    route: RouteProp<{params: {policyID: string}}>;
+    route: PolicyRoute;
 };
 
 function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {

From 4d492836471f6cd7e10fef3a9d3d1faed5f0e14b Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Mon, 29 Jan 2024 08:54:43 +0100
Subject: [PATCH 09/12] apply suggested changes

---
 src/pages/workspace/WorkspaceMembersPage.tsx | 9 +++++----
 src/pages/workspace/withPolicy.tsx           | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index 4f1bc4e9e874..678db90c6e1f 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -1,4 +1,5 @@
 import {useIsFocused} from '@react-navigation/native';
+import type {StackScreenProps} from '@react-navigation/stack';
 import lodashIsEqual from 'lodash/isEqual';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {TextInput} from 'react-native';
@@ -23,6 +24,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -31,11 +33,11 @@ import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
 import type {PersonalDetailsList, PolicyMember, PolicyMembers} from '@src/types/onyx';
 import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import SearchInputManager from './SearchInputManager';
-import type {PolicyRoute} from './withPolicy';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
@@ -46,9 +48,8 @@ type WorkspaceMembersPageOnyxProps = {
 
 type WorkspaceMembersPageProps = WithPolicyAndFullscreenLoadingProps &
     WithCurrentUserPersonalDetailsProps &
-    WorkspaceMembersPageOnyxProps & {
-        route: PolicyRoute;
-    };
+    WorkspaceMembersPageOnyxProps &
+    StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBERS>;
 
 /**
  * Inverts an object, equivalent of _.invert
diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index 74c745491cf3..9b11ae9a8e9c 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -13,7 +13,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 
-type PolicyRoute = RouteProp<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.BILLS | typeof SCREENS.WORKSPACE.INVOICES>;
+type PolicyRoute = RouteProp<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.BILLS | typeof SCREENS.WORKSPACE.INVOICES | typeof SCREENS.WORKSPACE.MEMBERS>;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {
     return route?.params?.policyID ?? '';

From 3d03021c76d265bf9c046dfb4fe08834a0dbc78c Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Mon, 29 Jan 2024 09:41:20 +0100
Subject: [PATCH 10/12] improve PolicyRoute typing

---
 src/pages/workspace/WorkspacePageWithSections.tsx | 2 +-
 src/pages/workspace/withPolicy.tsx                | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx
index c56f5472884a..b84bde330951 100644
--- a/src/pages/workspace/WorkspacePageWithSections.tsx
+++ b/src/pages/workspace/WorkspacePageWithSections.tsx
@@ -93,7 +93,7 @@ function WorkspacePageWithSections({
     const isLoading = reimbursementAccount?.isLoading ?? true;
     const achState = reimbursementAccount?.achData?.state ?? '';
     const isUsingECard = user?.isUsingExpensifyCard ?? false;
-    const policyID = route.params.policyID;
+    const policyID = route.params?.policyID ?? '';
     const policyName = policy?.name;
     const hasVBA = achState === BankAccount.STATE.OPEN;
     const content = children(hasVBA, policyID, isUsingECard);
diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index 9b11ae9a8e9c..f61e3c3df462 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -5,6 +5,7 @@ import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import React, {forwardRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as Policy from '@userActions/Policy';
@@ -13,7 +14,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 
-type PolicyRoute = RouteProp<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.BILLS | typeof SCREENS.WORKSPACE.INVOICES | typeof SCREENS.WORKSPACE.MEMBERS>;
+type PolicyRoute = RouteProp<SettingsNavigatorParamList, ValueOf<typeof SCREENS.WORKSPACE>>;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {
     return route?.params?.policyID ?? '';

From 8f2db96c0d9330e80787a8a4c540e988629f099c Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Tue, 20 Feb 2024 13:34:02 +0100
Subject: [PATCH 11/12] add comment explaining intersection equivalent

---
 src/pages/workspace/WorkspaceMembersPage.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index 11dcdac16dea..7cf9fa9c54a0 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -89,9 +89,12 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
         setSearchValue(SearchInputManager.searchInput);
     }, [isFocusedScreen]);
 
-    useEffect(() => {
-        SearchInputManager.searchInput = '';
-    }, []);
+    useEffect(
+        () => () => {
+            SearchInputManager.searchInput = '';
+        },
+        [],
+    );
 
     /**
      * Get filtered personalDetails list with current policyMembers
@@ -152,6 +155,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                 const res = Object.values(currentPersonalDetails).find((item) => prevItem?.login === item?.login);
                 return res?.accountID ?? id;
             });
+            // This is an equivalent of the lodash intersection function. The reduce method below is used to filter the items that exist in both arrays.
             return [prevSelectedElements, Object.values(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails))].reduce((prev, members) =>
                 prev.filter((item) => members.includes(item)),
             );

From b0eb67080541202408fa895b20932034d9bf6111 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Thu, 22 Feb 2024 14:23:23 +0100
Subject: [PATCH 12/12] fix onDismissError issue

---
 src/components/SelectionList/BaseSelectionList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index b0996a08895a..edaa48f2cf7a 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -287,7 +287,7 @@ function BaseSelectionList<TItem extends ListItem>(
                 showTooltip={showTooltip}
                 canSelectMultiple={canSelectMultiple}
                 onSelectRow={() => selectRow(item)}
-                onDismissError={onDismissError}
+                onDismissError={() => onDismissError?.(item)}
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                 rightHandSideComponent={rightHandSideComponent}
                 keyForList={item.keyForList}