Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: A new section in the workspace member’s details #45681

Merged
merged 9 commits into from
Jul 25, 2024
Merged

Feature: A new section in the workspace member’s details #45681

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9949eee
new tranlsations
waterim Jul 18, 2024
6a4d33e
add new section with cards and new card button
waterim Jul 18, 2024
230e1f1
fix ts
waterim Jul 18, 2024
ee36edc
add beta for new details section
waterim Jul 18, 2024
09043e8
remove unused code
waterim Jul 18, 2024
3391091
fix stylings
waterim Jul 19, 2024
7c2db31
Merge remote-tracking branch 'upstream/main' into feat-44319-workspac…
waterim Jul 23, 2024
904e266
fix card icon, add margins
waterim Jul 23, 2024
6bb77da
change margins
waterim Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2644,6 +2644,7 @@ export default {
},
expensifyCard: {
issueCard: 'Issue card',
newCard: 'New card',
name: 'Name',
lastFour: 'Last 4',
limit: 'Limit',
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2693,6 +2693,7 @@ export default {
},
expensifyCard: {
issueCard: 'Emitir tarjeta',
newCard: 'Nueva tarjeta',
name: 'Nombre',
lastFour: '4 últimos',
limit: 'Limite',
Expand Down
319 changes: 240 additions & 79 deletions src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {ValueOf} from 'type-fest';
import ExpensifyCardImage from '@assets/images/expensify-card.svg';
import Avatar from '@components/Avatar';
import Button from '@components/Button';
import ConfirmModal from '@components/ConfirmModal';
Expand All @@ -12,27 +13,133 @@ import MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import usePrevious from '@hooks/usePrevious';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import Navigation from '@navigation/Navigation';
import type {SettingsNavigatorParamList} from '@navigation/types';
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 variables from '@styles/variables';
import * as Card from '@userActions/Card';
import * as Member from '@userActions/Policy/Member';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx';
import type {PersonalDetails, PersonalDetailsList, WorkspaceCardsList} from '@src/types/onyx';
import type {ListItemType} from './WorkspaceMemberDetailsRoleSelectionModal';
import WorkspaceMemberDetailsRoleSelectionModal from './WorkspaceMemberDetailsRoleSelectionModal';

// TODO: remove when Onyx data is available
const mockedCards: OnyxEntry<WorkspaceCardsList> = {
test1: {
accountID: 885646,
cardID: 1,
nameValuePairs: {
limit: 1000,
cardTitle: 'Test 1',
},
lastFourPAN: '1234',
state: CONST.EXPENSIFY_CARD.STATE.OPEN,
bank: '',
availableSpend: 1,
domainName: '',
fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
},
test2: {
accountID: 885646,
cardID: 2,
nameValuePairs: {
limit: 2000,
cardTitle: 'Test 2',
},
lastFourPAN: '1234',
state: CONST.EXPENSIFY_CARD.STATE.OPEN,
bank: '',
availableSpend: 1,
domainName: '',
fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
},
test3: {
accountID: 885646,
cardID: 3,
nameValuePairs: {
limit: 3000,
cardTitle: 'Test 3',
},
lastFourPAN: '1234',
state: CONST.EXPENSIFY_CARD.STATE.OPEN,
bank: '',
availableSpend: 1,
domainName: '',
fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
},
test4: {
accountID: 885646,
cardID: 3,
nameValuePairs: {
limit: 3000,
cardTitle: 'Test 3',
},
lastFourPAN: '1234',
state: CONST.EXPENSIFY_CARD.STATE.OPEN,
bank: '',
availableSpend: 1,
domainName: '',
fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
},
test5: {
accountID: 885646,
cardID: 3,
nameValuePairs: {
limit: 3000,
cardTitle: 'Test 3',
},
lastFourPAN: '1234',
state: CONST.EXPENSIFY_CARD.STATE.OPEN,
bank: '',
availableSpend: 1,
domainName: '',
fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
},
test6: {
accountID: 885646,
cardID: 3,
nameValuePairs: {
limit: 3000,
cardTitle: 'Test 3',
},
lastFourPAN: '1234',
state: CONST.EXPENSIFY_CARD.STATE.OPEN,
bank: '',
availableSpend: 1,
domainName: '',
fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
},
test7: {
accountID: 885646,
cardID: 3,
nameValuePairs: {
limit: 3000,
cardTitle: 'Test 3',
},
lastFourPAN: '1234',
state: CONST.EXPENSIFY_CARD.STATE.OPEN,
bank: '',
availableSpend: 1,
domainName: '',
fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
},
};

type WorkspacePolicyOnyxProps = {
/** Personal details of all users */
personalDetails: OnyxEntry<PersonalDetailsList>;
Expand All @@ -54,6 +161,9 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM

const accountID = Number(route.params.accountID);
const policyID = route.params.policyID;
// TODO: uncomment the code line below to use cardsList data from Onyx when it's supported
// const [cardList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`);
const cardList = mockedCards;

const memberLogin = personalDetails?.[accountID]?.login ?? '';
const member = policy?.employeeList?.[memberLogin];
Expand Down Expand Up @@ -114,6 +224,24 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
Navigation.navigate(ROUTES.PROFILE.getRoute(accountID, Navigation.getActiveRoute()));
}, [accountID]);

const navigateToDetails = useCallback(
(cardID: string) => {
Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID, Navigation.getActiveRoute()));
},
[policyID],
);

const navigateToIssueNewCard = useCallback(() => {
Card.setIssueNewCardStepAndData({
step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE,
data: {
assigneeEmail: memberLogin,
},
isEditing: false,
});
Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID));
}, [memberLogin, policyID]);

const openRoleSelectionModal = useCallback(() => {
setIsRoleSelectionModalVisible(true);
}, []);
Expand Down Expand Up @@ -146,85 +274,118 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
>
<ScreenWrapper testID={WorkspaceMemberDetailsPage.displayName}>
<HeaderWithBackButton
title={displayName}
subtitle={policy?.name}
/>
<View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone, styles.justifyContentStart]}>
<View style={[styles.avatarSectionWrapper, styles.pb0]}>
<OfflineWithFeedback pendingAction={details.pendingFields?.avatar}>
<Avatar
containerStyles={[styles.avatarXLarge, styles.mv5, styles.noOutline]}
imageStyles={[styles.avatarXLarge]}
source={details.avatar}
avatarID={accountID}
type={CONST.ICON_TYPE_AVATAR}
size={CONST.AVATAR_SIZE.XLARGE}
fallbackIcon={fallbackIcon}
/>
</OfflineWithFeedback>
{!!(details.displayName ?? '') && (
<Text
style={[styles.textHeadline, styles.pre, styles.mb6, styles.w100, styles.textAlignCenter]}
numberOfLines={1}
>
{displayName}
</Text>
)}
{isSelectedMemberOwner && isCurrentUserAdmin && !isCurrentUserOwner ? (
<Button
text={translate('workspace.people.transferOwner')}
onPress={startChangeOwnershipFlow}
medium
isDisabled={isOffline}
icon={Expensicons.Transfer}
iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
style={styles.mv5}
/>
) : (
<Button
text={translate('workspace.people.removeMemberButtonTitle')}
onPress={askForConfirmationToRemove}
medium
isDisabled={isSelectedMemberOwner || isSelectedMemberCurrentUser}
icon={Expensicons.RemoveMembers}
iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
style={styles.mv5}
/>
)}
<ConfirmModal
danger
title={translate('workspace.people.removeMemberTitle')}
isVisible={isRemoveMemberConfirmModalVisible}
onConfirm={removeUser}
onCancel={() => setIsRemoveMemberConfirmModalVisible(false)}
prompt={confirmModalPrompt}
confirmText={translate('common.remove')}
cancelText={translate('common.cancel')}
/>
</View>
<View style={styles.w100}>
<MenuItemWithTopDescription
disabled={isSelectedMemberOwner || isSelectedMemberCurrentUser}
title={member?.role === CONST.POLICY.ROLE.ADMIN ? translate('common.admin') : translate('common.member')}
description={translate('common.role')}
shouldShowRightIcon
onPress={openRoleSelectionModal}
/>
<MenuItem
title={translate('common.profile')}
icon={Expensicons.Info}
onPress={navigateToProfile}
shouldShowRightIcon
/>
<WorkspaceMemberDetailsRoleSelectionModal
isVisible={isRoleSelectionModalVisible}
items={roleItems}
onRoleChange={changeRole}
onClose={() => setIsRoleSelectionModalVisible(false)}
{({safeAreaPaddingBottomStyle}) => (
<>
<HeaderWithBackButton
title={displayName}
subtitle={policy?.name}
/>
</View>
</View>
<ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
<View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone, styles.justifyContentStart]}>
<View style={[styles.avatarSectionWrapper, styles.pb0]}>
<OfflineWithFeedback pendingAction={details.pendingFields?.avatar}>
<Avatar
containerStyles={[styles.avatarXLarge, styles.mv5, styles.noOutline]}
imageStyles={[styles.avatarXLarge]}
source={details.avatar}
avatarID={accountID}
type={CONST.ICON_TYPE_AVATAR}
size={CONST.AVATAR_SIZE.XLARGE}
fallbackIcon={fallbackIcon}
/>
</OfflineWithFeedback>
{!!(details.displayName ?? '') && (
<Text
style={[styles.textHeadline, styles.pre, styles.mb6, styles.w100, styles.textAlignCenter]}
numberOfLines={1}
>
{displayName}
</Text>
)}
{isSelectedMemberOwner && isCurrentUserAdmin && !isCurrentUserOwner ? (
<Button
text={translate('workspace.people.transferOwner')}
onPress={startChangeOwnershipFlow}
medium
isDisabled={isOffline}
icon={Expensicons.Transfer}
iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
style={styles.mv5}
/>
) : (
<Button
text={translate('workspace.people.removeMemberButtonTitle')}
onPress={askForConfirmationToRemove}
medium
isDisabled={isSelectedMemberOwner || isSelectedMemberCurrentUser}
icon={Expensicons.RemoveMembers}
iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
style={styles.mv5}
/>
)}
<ConfirmModal
danger
title={translate('workspace.people.removeMemberTitle')}
isVisible={isRemoveMemberConfirmModalVisible}
onConfirm={removeUser}
onCancel={() => setIsRemoveMemberConfirmModalVisible(false)}
prompt={confirmModalPrompt}
confirmText={translate('common.remove')}
cancelText={translate('common.cancel')}
/>
</View>
<View style={styles.w100}>
<MenuItemWithTopDescription
disabled={isSelectedMemberOwner || isSelectedMemberCurrentUser}
title={member?.role === CONST.POLICY.ROLE.ADMIN ? translate('common.admin') : translate('common.member')}
description={translate('common.role')}
shouldShowRightIcon
onPress={openRoleSelectionModal}
/>
<MenuItem
title={translate('common.profile')}
icon={Expensicons.Info}
onPress={navigateToProfile}
shouldShowRightIcon
/>
<WorkspaceMemberDetailsRoleSelectionModal
isVisible={isRoleSelectionModalVisible}
items={roleItems}
onRoleChange={changeRole}
onClose={() => setIsRoleSelectionModalVisible(false)}
/>
{policy?.areExpensifyCardsEnabled && (
<>
<View style={[styles.ph5, styles.pv3]}>
<Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting])}>
{translate('walletPage.assignedCards')}
</Text>
</View>
{Object.values(cardList ?? {}).map((card) => (
<MenuItem
title={card.nameValuePairs?.cardTitle}
badgeText={CurrencyUtils.convertAmountToDisplayString(card.nameValuePairs?.limit)}
icon={ExpensifyCardImage}
iconStyles={styles.cardIcon}
contentFit="contain"
iconWidth={variables.cardIconWidth}
iconHeight={variables.cardIconHeight}
onPress={() => navigateToDetails(card.cardID.toString())}
shouldShowRightIcon
/>
))}
<MenuItem
title={translate('workspace.expensifyCard.newCard')}
icon={Expensicons.Plus}
onPress={navigateToIssueNewCard}
/>
</>
)}
</View>
</View>
</ScrollView>
</>
)}
</ScreenWrapper>
</AccessOrNotFoundWrapper>
);
Expand Down
Loading
Loading