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 100 101 102 103 104 105 106 107 108 109 110 111 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 1x | import { memo } from 'react';
import { FormattedMessage } from 'react-intl';
import { Badge, Tooltip, type BadgeProps } from '@allshares/studio-design-system';
import { formatDate, toDate } from '@amalia/ext/dates';
import { UserStatus as UserStatusEnum, type UserStatusWithDates } from '@amalia/tenants/users/types';
import { UserStatusLabel } from './UserStatusLabel';
export type UserStatusBadgeProps = Omit<BadgeProps, 'children' | 'variant'> & {
readonly user: Pick<UserStatusWithDates, 'clearedAt' | 'createdAt' | 'invitationSentAt' | 'joinedAt' | 'status'>;
};
export const UserStatusBadge = memo(function UserStatus({ user, ...props }: UserStatusBadgeProps) {
const { createdAt, clearedAt, invitationSentAt, joinedAt, status } = user;
const badgeProps = {
withShadow: true,
'data-testid': 'user-status-badge',
size: 'large' as const,
...props,
};
switch (status) {
case UserStatusEnum.DEACTIVATED:
return (
<Tooltip
placement="bottom"
content={
<FormattedMessage
defaultMessage="Deactivated on {date}"
values={{
date: formatDate(toDate(clearedAt as Date), 'YYYY-MM-DD'),
}}
/>
}
>
<Badge
{...badgeProps}
variant="missing"
>
<UserStatusLabel status={status} />
</Badge>
</Tooltip>
);
case UserStatusEnum.ACTIVE:
return (
<Tooltip
placement="bottom"
content={
<FormattedMessage
defaultMessage="Active since {date}"
values={{
date: formatDate(toDate(joinedAt as Date), 'YYYY-MM-DD'),
}}
/>
}
>
<Badge
{...badgeProps}
variant="success"
>
<UserStatusLabel status={status} />
</Badge>
</Tooltip>
);
case UserStatusEnum.INVITED:
return (
<Tooltip
placement="bottom"
content={
<FormattedMessage
defaultMessage="Invited on {date}"
values={{
date: formatDate(toDate(invitationSentAt as Date), 'YYYY-MM-DD'),
}}
/>
}
>
<Badge
{...badgeProps}
variant="pending"
>
<UserStatusLabel status={status} />
</Badge>
</Tooltip>
);
case UserStatusEnum.INACTIVE:
return (
<Tooltip
placement="bottom"
content={
<FormattedMessage
defaultMessage="Added on {date}"
values={{
date: formatDate(toDate(createdAt), 'YYYY-MM-DD'),
}}
/>
}
>
<Badge
{...badgeProps}
variant="warning"
>
<UserStatusLabel status={status} />
</Badge>
</Tooltip>
);
}
});
|