You cannot select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
	
	
		
			76 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			TypeScript
		
	
			
		
		
	
	
			76 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			TypeScript
		
	
| import React from 'react';
 | |
| // import classNames from 'classnames';
 | |
| 
 | |
| import { ContactName } from './ContactName';
 | |
| import { Intl } from '../Intl';
 | |
| import { LocalizerType } from '../../types/Util';
 | |
| 
 | |
| import { missingCaseError } from '../../util/missingCaseError';
 | |
| 
 | |
| interface Contact {
 | |
|   phoneNumber: string;
 | |
|   profileName?: string;
 | |
|   name?: string;
 | |
| }
 | |
| 
 | |
| interface Props {
 | |
|   type: 'markVerified' | 'markNotVerified';
 | |
|   isLocal: boolean;
 | |
|   contact: Contact;
 | |
|   i18n: LocalizerType;
 | |
| }
 | |
| 
 | |
| export class VerificationNotification extends React.Component<Props> {
 | |
|   public getStringId() {
 | |
|     const { isLocal, type } = this.props;
 | |
| 
 | |
|     switch (type) {
 | |
|       case 'markVerified':
 | |
|         return isLocal
 | |
|           ? 'youMarkedAsVerified'
 | |
|           : 'youMarkedAsVerifiedOtherDevice';
 | |
|       case 'markNotVerified':
 | |
|         return isLocal
 | |
|           ? 'youMarkedAsNotVerified'
 | |
|           : 'youMarkedAsNotVerifiedOtherDevice';
 | |
|       default:
 | |
|         throw missingCaseError(type);
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   public renderContents() {
 | |
|     const { contact, i18n } = this.props;
 | |
|     const id = this.getStringId();
 | |
| 
 | |
|     return (
 | |
|       <Intl
 | |
|         id={id}
 | |
|         components={[
 | |
|           <ContactName
 | |
|             i18n={i18n}
 | |
|             key="external-1"
 | |
|             name={contact.name}
 | |
|             profileName={contact.profileName}
 | |
|             phoneNumber={contact.phoneNumber}
 | |
|             module="module-verification-notification__contact"
 | |
|           />,
 | |
|         ]}
 | |
|         i18n={i18n}
 | |
|       />
 | |
|     );
 | |
|   }
 | |
| 
 | |
|   public render() {
 | |
|     const { type } = this.props;
 | |
|     const suffix =
 | |
|       type === 'markVerified' ? 'mark-verified' : 'mark-not-verified';
 | |
| 
 | |
|     return (
 | |
|       <div className="module-verification-notification">
 | |
|         <div className={`module-verification-notification__icon--${suffix}`} />
 | |
|         {this.renderContents()}
 | |
|       </div>
 | |
|     );
 | |
|   }
 | |
| }
 |