upstream-rocketchat/apps/meteor/client/components/UserInfo/UserInfo.tsx

import type { IUser, Serialized } from '@rocket.chat/core-typings';
import { Box, Margins, Tag } from '@rocket.chat/fuselage';
import {
	useUserDisplayName,
	ContextualbarScrollableContent,
	InfoPanel,
	InfoPanelActionGroup,
	InfoPanelAvatar,
	InfoPanelField,
	InfoPanelLabel,
	InfoPanelSection,
	InfoPanelText,
	InfoPanelTitle,
} from '@rocket.chat/ui-client';
import type { TranslationKey } from '@rocket.chat/ui-contexts';
import type { ReactNode } from 'react';
import { memo, useId } from 'react';
import { useTranslation } from 'react-i18next';

import { useTimeAgo } from '../../hooks/useTimeAgo';
import { useUserCustomFields } from '../../hooks/useUserCustomFields';
import MarkdownText from '../MarkdownText';
import UTCClock from '../UTCClock';
import { UserCardRoles } from '../UserCard';
import UserInfoABACAttributes from './UserInfoABACAttributes';
import UserInfoAvatar from './UserInfoAvatar';

type UserInfoDataProps = Serialized<
	Pick<
		IUser,
		| 'name'
		| 'username'
		| 'nickname'
		| 'bio'
		| 'lastLogin'
		| 'avatarETag'
		| 'utcOffset'
		| 'phone'
		| 'createdAt'
		| 'canViewAllInfo'
		| 'customFields'
		| 'freeSwitchExtension'
		| 'abacAttributes'
	>
>;

export type UserInfoProps = UserInfoDataProps & {
	status: ReactNode;
	customStatus?: ReactNode;
	email?: string;
	verified?: boolean;
	actions: ReactNode;
	roles: ReactNode[];
	reason?: string;
	invitationDate?: string;
};

const UserInfo = ({
	username,
	name,
	lastLogin,
	nickname,
	bio,
	avatarETag,
	roles,
	utcOffset,
	phone,
	email,
	verified,
	createdAt,
	status,
	customStatus,
	customFields,
	canViewAllInfo,
	actions,
	reason,
	freeSwitchExtension,
	abacAttributes,
	invitationDate,
	...props
}: UserInfoProps) => {
	const { t } = useTranslation();
	const timeAgo = useTimeAgo();
	const userDisplayName = useUserDisplayName({ name, username });
	const userCustomFields = useUserCustomFields(customFields);

	const usernameId = useId();

	return (
		<ContextualbarScrollableContent padding={24} {...props}>
			<InfoPanel>
				{username && (
					<InfoPanelAvatar>
						<UserInfoAvatar username={username} etag={avatarETag} />
					</InfoPanelAvatar>
				)}

				{actions && <InfoPanelActionGroup>{actions}</InfoPanelActionGroup>}

				<InfoPanelSection>
					{userDisplayName && <InfoPanelTitle icon={status} title={userDisplayName} />}

					{customStatus && <InfoPanelText>{customStatus}</InfoPanelText>}
				</InfoPanelSection>

				<InfoPanelSection>
					{reason && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Reason_for_joining')}</InfoPanelLabel>
							<InfoPanelText>{reason}</InfoPanelText>
						</InfoPanelField>
					)}

					{nickname && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Nickname')}</InfoPanelLabel>
							<InfoPanelText>{nickname}</InfoPanelText>
						</InfoPanelField>
					)}

					{roles?.length !== 0 && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Roles')}</InfoPanelLabel>
							<UserCardRoles>{roles}</UserCardRoles>
						</InfoPanelField>
					)}

					{username && username !== name && (
						<InfoPanelField is='dl'>
							<InfoPanelLabel is='dt' id={usernameId}>
								{t('Username')}
							</InfoPanelLabel>
							<InfoPanelText is='dd' aria-labelledby={usernameId}>
								{username}
							</InfoPanelText>
						</InfoPanelField>
					)}

					{utcOffset && Number.isInteger(utcOffset) && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Local_Time')}</InfoPanelLabel>
							<InfoPanelText>
								<UTCClock utcOffset={utcOffset} />
							</InfoPanelText>
						</InfoPanelField>
					)}

					{bio && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Bio')}</InfoPanelLabel>
							<InfoPanelText withTruncatedText={false}>
								<MarkdownText variant='inline' content={bio} />
							</InfoPanelText>
						</InfoPanelField>
					)}

					{Number.isInteger(utcOffset) && canViewAllInfo && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Last_login')}</InfoPanelLabel>
							<InfoPanelText>{lastLogin ? timeAgo(lastLogin) : t('Never')}</InfoPanelText>
						</InfoPanelField>
					)}

					{phone && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Phone')}</InfoPanelLabel>
							<InfoPanelText display='flex' flexDirection='row' alignItems='center'>
								<Box is='a' withTruncatedText href={`tel:${phone}`}>
									{phone}
								</Box>
							</InfoPanelText>
						</InfoPanelField>
					)}

					{email && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Email')}</InfoPanelLabel>
							<InfoPanelText display='flex' flexDirection='row' alignItems='center'>
								<Box is='a' withTruncatedText href={`mailto:${email}`}>
									{email}
								</Box>
								<Margins inline={4}>
									<Tag>{verified ? t('Verified') : t('Not_verified')}</Tag>
								</Margins>
							</InfoPanelText>
						</InfoPanelField>
					)}

					{freeSwitchExtension && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Voice_call_extension')}</InfoPanelLabel>
							<InfoPanelText>{freeSwitchExtension}</InfoPanelText>
						</InfoPanelField>
					)}

					{abacAttributes && abacAttributes.length > 0 && (
						<InfoPanelField>
							<InfoPanelLabel title={t('ABAC_Attributes_description')}>{t('ABAC_Attributes')}</InfoPanelLabel>
							<UserInfoABACAttributes abacAttributes={abacAttributes} />
						</InfoPanelField>
					)}
					{userCustomFields?.map(
						(customField) =>
							customField?.value && (
								<InfoPanelField key={customField.value}>
									<InfoPanelLabel>{t(customField.label as TranslationKey)}</InfoPanelLabel>
									<InfoPanelText>
										<MarkdownText content={customField.value} variant='inline' />
									</InfoPanelText>
								</InfoPanelField>
							),
					)}

					{invitationDate && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Invitation_date')}</InfoPanelLabel>
							<InfoPanelText>{timeAgo(invitationDate)}</InfoPanelText>
						</InfoPanelField>
					)}

					{createdAt && (
						<InfoPanelField>
							<InfoPanelLabel>{t('Created_at')}</InfoPanelLabel>
							<InfoPanelText>{timeAgo(createdAt)}</InfoPanelText>
						</InfoPanelField>
					)}
				</InfoPanelSection>
			</InfoPanel>
		</ContextualbarScrollableContent>
	);
};

export default memo(UserInfo);