import React from 'react'; import { ConversationType } from '../state/ducks/conversations'; import { LocalizerType } from '../types/Util'; import { getPlaceholder } from '../util/safetyNumber'; import { Intl } from './Intl'; type SafetyNumberViewerProps = { contact?: ConversationType; generateSafetyNumber: (contact: ConversationType) => void; i18n: LocalizerType; onClose?: () => void; safetyNumber: string; safetyNumberChanged?: boolean; toggleVerified: (contact: ConversationType) => void; verificationDisabled: boolean; }; export const SafetyNumberViewer = ({ contact, generateSafetyNumber, i18n, onClose, safetyNumber, safetyNumberChanged, toggleVerified, verificationDisabled, }: SafetyNumberViewerProps): JSX.Element | null => { if (!contact) { return null; } React.useEffect(() => { generateSafetyNumber(contact); }, [safetyNumber]); const showNumber = Boolean(contact.name || contact.profileName); const numberFragment = showNumber ? ` ยท ${contact.phoneNumber}` : ''; const name = `${contact.title}${numberFragment}`; const boldName = ( {name} ); const isVerified = contact.isVerified; const verifiedStatusKey = isVerified ? 'isVerified' : 'isNotVerified'; const safetyNumberChangedKey = safetyNumberChanged ? 'changedRightAfterVerify' : 'yourSafetyNumberWith'; const verifyButtonText = isVerified ? i18n('unverify') : i18n('verify'); return (
{onClose && (
)}
{safetyNumber || getPlaceholder()}
{isVerified ? ( ) : ( )}
); };