Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 142x 142x | import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { keyBy } from 'lodash-es';
import { memo, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { Modal, Typography } from '@allshares/studio-design-system';
import { type UserProfile } from '@amalia/tenants/users/profile/types';
const ConfirmBulkInviteUsersModalBody = styled(Modal.Body)`
display: flex;
flex-direction: column;
gap: 16px;
`;
export type ConfirmBulkInviteUsersModalProps = {
readonly isOpen: boolean;
readonly onClose: () => void;
readonly onSubmit: () => void;
readonly users: Pick<UserProfile, 'email' | 'firstName' | 'id' | 'lastName'>[];
readonly selectedUserIds: string[];
};
export const ConfirmBulkInviteUsersModal = memo(function ConfirmBulkInviteUsersModal({
isOpen,
onClose,
onSubmit,
users,
selectedUserIds,
}: ConfirmBulkInviteUsersModalProps) {
const usersMap = useMemo(() => keyBy(users, 'id'), [users]);
const selectedUsers = useMemo(() => selectedUserIds.map((id) => usersMap[id]), [selectedUserIds, usersMap]);
return (
<Modal
isOpen={isOpen}
onClose={onClose}
>
<Modal.Content>
<Modal.Header>
<Modal.Title>
<FormattedMessage defaultMessage="Send invitation" />
</Modal.Title>
</Modal.Header>
<ConfirmBulkInviteUsersModalBody>
<span>
<FormattedMessage
defaultMessage="Are you sure you want to invite the following {countLabel} to Amalia?"
values={{
countLabel: (
<Typography variant="bodyBaseBold">
<FormattedMessage
defaultMessage="{count, plural, one {# user} other {# users}}"
values={{ count: selectedUserIds.length }}
/>
</Typography>
),
}}
/>
</span>
<div
css={css`
display: flex;
flex-direction: column;
gap: 6px;
`}
>
{selectedUsers.map((user) => (
<span key={user.id}>
<FormattedMessage
defaultMessage="{username} ({email})"
values={{
username: (
<Typography variant="bodyBaseBold">
<FormattedMessage
defaultMessage="{firstName} {lastName}"
values={{ firstName: user.firstName, lastName: user.lastName }}
/>
</Typography>
),
email: user.email,
}}
/>
</span>
))}
</div>
</ConfirmBulkInviteUsersModalBody>
</Modal.Content>
<Modal.Actions>
<Modal.CancelAction />
<Modal.MainAction onClick={onSubmit}>
<FormattedMessage defaultMessage="Send invitation" />
</Modal.MainAction>
</Modal.Actions>
</Modal>
);
});
|