use member role selection modal consistently across app

src/pages/workspace/WorkspaceInviteMessagePage.tsx

@@ -7,13 +7,13 @@ import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import MultipleAvatars from '@components/MultipleAvatars';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import ValuePicker from '@components/ValuePicker';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
@@ -42,6 +42,8 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import AccessOrNotFoundWrapper from './AccessOrNotFoundWrapper';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
+import WorkspaceMemberDetailsRoleSelectionModal from './WorkspaceMemberRoleSelectionModal';
+import type {ListItemType} from './WorkspaceMemberRoleSelectionModal';
 
 type WorkspaceInviteMessagePageProps = WithPolicyAndFullscreenLoadingProps &
     WithCurrentUserPersonalDetailsProps &
@@ -63,11 +65,17 @@ function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}:
     const [allPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const isOnyxLoading = isLoadingOnyxValue(workspaceInviteMessageDraftResult, invitedEmailsToAccountIDsDraftResult, formDataResult);
 
+    const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);
+
     const welcomeNoteSubject = useMemo(
         () => `# ${currentUserPersonalDetails?.displayName ?? ''} invited you to ${policy?.name ?? 'a workspace'}`,
         [policy?.name, currentUserPersonalDetails?.displayName],
     );
 
+    const openRoleSelectionModal = useCallback(() => {
+        setIsRoleSelectionModalVisible(true);
+    }, []);
+
     const getDefaultWelcomeNote = useCallback(() => {
         return (
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -130,22 +138,37 @@ function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}:
 
     const policyName = policy?.name;
 
-    const roleItems = useMemo(() => {
-        return Object.values(CONST.POLICY.ROLE).map((roleValue) => {
-            let label = '';
-            if (roleValue === CONST.POLICY.ROLE.USER) {
-                label = translate('common.member');
-            } else if (roleValue === CONST.POLICY.ROLE.ADMIN) {
-                label = translate('common.admin');
-            } else {
-                label = translate('common.auditor');
-            }
-            return {
-                label,
-                value: roleValue,
-            };
-        });
-    }, [translate]);
+    const roleItems: ListItemType[] = useMemo(
+        () => [
+            {
+                value: CONST.POLICY.ROLE.ADMIN,
+                text: translate('common.admin'),
+                alternateText: translate('workspace.common.adminAlternateText'),
+                isSelected: role === CONST.POLICY.ROLE.ADMIN,
+                keyForList: CONST.POLICY.ROLE.ADMIN,
+            },
+            {
+                value: CONST.POLICY.ROLE.AUDITOR,
+                text: translate('common.auditor'),
+                alternateText: translate('workspace.common.auditorAlternateText'),
+                isSelected: role === CONST.POLICY.ROLE.AUDITOR,
+                keyForList: CONST.POLICY.ROLE.AUDITOR,
+            },
+            {
+                value: CONST.POLICY.ROLE.USER,
+                text: translate('common.member'),
+                alternateText: translate('workspace.common.memberAlternateText'),
+                isSelected: role === CONST.POLICY.ROLE.USER,
+                keyForList: CONST.POLICY.ROLE.USER,
+            },
+        ],
+        [role, translate],
+    );
+
+    const changeRole = useCallback(({value}: ListItemType) => {
+        setIsRoleSelectionModalVisible(false);
+        setRole(value);
+    }, []);
 
     return (
         <AccessOrNotFoundWrapper
@@ -203,13 +226,17 @@ function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}:
                     </View>
                     <View style={[styles.mb3]}>
                         <View style={[styles.mhn5, styles.mb3]}>
-                            <InputWrapper
-                                inputID={INPUT_IDS.ROLE}
-                                InputComponent={ValuePicker}
-                                label={translate('common.role')}
+                            <MenuItemWithTopDescription
+                                title={translate(`workspace.common.roleName`, {role})}
+                                description={translate('common.role')}
+                                shouldShowRightIcon
+                                onPress={openRoleSelectionModal}
+                            />
+                            <WorkspaceMemberDetailsRoleSelectionModal
+                                isVisible={isRoleSelectionModalVisible}
                                 items={roleItems}
-                                value={role}
-                                onValueChange={(value) => setRole(value as typeof role)}
+                                onRoleChange={changeRole}
+                                onClose={() => setIsRoleSelectionModalVisible(false)}
                             />
                         </View>
                         <InputWrapper

src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

@@ -32,6 +32,8 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import type {ListItemType} from '@pages/workspace/WorkspaceMemberRoleSelectionModal';
+import WorkspaceMemberDetailsRoleSelectionModal from '@pages/workspace/WorkspaceMemberRoleSelectionModal';
 import variables from '@styles/variables';
 import {setIssueNewCardStepAndData} from '@userActions/Card';
 import {openPolicyCompanyCardsPage} from '@userActions/CompanyCards';
@@ -41,8 +43,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {CompanyCardFeed, Card as MemberCard, PersonalDetails, PersonalDetailsList} from '@src/types/onyx';
-import type {ListItemType} from './WorkspaceMemberDetailsRoleSelectionModal';
-import WorkspaceMemberDetailsRoleSelectionModal from './WorkspaceMemberDetailsRoleSelectionModal';
 
 type WorkspacePolicyOnyxProps = {
     /** Personal details of all users */