Skip to content

Commit

Permalink
Merge pull request #36220 from burczu/feature/35711-header-invite-rem…
Browse files Browse the repository at this point in the history
…ove-button-redesign

Feature/35711 header invite remove button redesign
  • Loading branch information
lakchote authored Feb 13, 2024
2 parents c14c4ae + 60cad9a commit d534a9e
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 40 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components/Icon/Illustrations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__o
import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg';
import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg';
import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
Expand Down Expand Up @@ -89,6 +90,7 @@ export {
MoneyMousePink,
ReceiptsSearchYellow,
ReceiptYellow,
ReceiptWrangler,
RocketBlue,
RocketOrange,
SanFrancisco,
Expand Down
1 change: 1 addition & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1675,6 +1675,7 @@ export default {
bookTravelWithConcierge: 'Book travel with Concierge',
},
invite: {
member: 'Invite member',
invitePeople: 'Invite new members',
genericFailureMessage: 'An error occurred inviting the user to the workspace, please try again.',
pleaseEnterValidLogin: `Please ensure the email or phone number is valid (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1699,6 +1699,7 @@ export default {
bookTravelWithConcierge: 'Reserva viajes con Concierge',
},
invite: {
member: 'Invitar miembros',
invitePeople: 'Invitar nuevos miembros',
genericFailureMessage: 'Se produjo un error al invitar al usuario al espacio de trabajo. Vuelva a intentarlo..',
pleaseEnterValidLogin: `Asegúrese de que el correo electrónico o el número de teléfono sean válidos (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
Expand Down
91 changes: 51 additions & 40 deletions src/pages/workspace/WorkspaceMembersPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
import Button from '@components/Button';
import ConfirmModal from '@components/ConfirmModal';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import MessagesRow from '@components/MessagesRow';
import networkPropTypes from '@components/networkPropTypes';
import {withNetwork} from '@components/OnyxProvider';
Expand Down Expand Up @@ -415,6 +417,29 @@ function WorkspaceMembersPage(props) {
);
};

const getHeaderButtons = () => (
<View style={[styles.w100, styles.flexRow, isSmallScreenWidth && styles.mb3]}>
<Button
medium
success
onPress={inviteUser}
text={props.translate('workspace.invite.member')}
icon={Expensicons.Plus}
iconStyles={{transform: [{scale: 0.6}]}}
innerStyles={[isSmallScreenWidth && styles.alignItemsCenter]}
style={[isSmallScreenWidth && styles.flexGrow1]}
/>
<Button
medium
danger
style={[styles.ml2, isSmallScreenWidth && styles.w50]}
isDisabled={selectedEmployees.length === 0}
text={props.translate('common.remove')}
onPress={askForConfirmationToRemove}
/>
</View>
);

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
Expand All @@ -429,13 +454,17 @@ function WorkspaceMembersPage(props) {
>
<HeaderWithBackButton
title={props.translate('workspace.common.members')}
icon={Illustrations.ReceiptWrangler}
onBackButtonPress={() => {
setSearchValue('');
Navigation.goBack();
}}
shouldShowBackButton={isSmallScreenWidth}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
/>
>
{!isSmallScreenWidth && getHeaderButtons()}
</HeaderWithBackButton>
{isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
<ConfirmModal
danger
title={props.translate('workspace.people.removeMembersTitle')}
Expand All @@ -454,45 +483,27 @@ function WorkspaceMembersPage(props) {
})
}
/>
<View style={[styles.w100, styles.flex1, styles.mt3]}>
<View style={[styles.w100, styles.flexRow, styles.ph5]}>
<Button
medium
success
text={props.translate('common.invite')}
onPress={inviteUser}
/>
<Button
medium
danger
style={[styles.ml2]}
isDisabled={selectedEmployees.length === 0}
text={props.translate('common.remove')}
onPress={askForConfirmationToRemove}
/>
</View>
<View style={[styles.w100, styles.mt4, styles.flex1]}>
<SelectionList
canSelectMultiple
sections={[{data, indexOffset: 0, isDisabled: false}]}
textInputLabel={props.translate('optionsSelector.findMember')}
textInputValue={searchValue}
onChangeText={(value) => {
SearchInputManager.searchInput = value;
setSearchValue(value);
}}
disableKeyboardShortcuts={removeMembersConfirmModalVisible}
headerMessage={getHeaderMessage()}
headerContent={getHeaderContent()}
onSelectRow={(item) => toggleUser(item.accountID)}
onSelectAll={() => toggleAllUsers(data)}
onDismissError={dismissError}
showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers))}
showScrollIndicator
shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
inputRef={textInputRef}
/>
</View>
<View style={[styles.w100, styles.flex1]}>
<SelectionList
canSelectMultiple
sections={[{data, indexOffset: 0, isDisabled: false}]}
textInputLabel={props.translate('optionsSelector.findMember')}
textInputValue={searchValue}
onChangeText={(value) => {
SearchInputManager.searchInput = value;
setSearchValue(value);
}}
disableKeyboardShortcuts={removeMembersConfirmModalVisible}
headerMessage={getHeaderMessage()}
headerContent={getHeaderContent()}
onSelectRow={(item) => toggleUser(item.accountID)}
onSelectAll={() => toggleAllUsers(data)}
onDismissError={dismissError}
showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers))}
showScrollIndicator
shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
inputRef={textInputRef}
/>
</View>
</FullPageNotFoundView>
</ScreenWrapper>
Expand Down

0 comments on commit d534a9e

Please sign in to comment.