signal-desktop/ts/components/conversation/VerificationNotification.tsx

// Copyright 2018 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React from 'react';

import { SystemMessage } from './SystemMessage';
import { ContactName } from './ContactName';
import { Intl } from '../Intl';
import type { LocalizerType } from '../../types/Util';

import { missingCaseError } from '../../util/missingCaseError';

type Contact = { title: string };

export type PropsData = {
  type: 'markVerified' | 'markNotVerified';
  isLocal: boolean;
  contact: Contact;
};

type PropsHousekeeping = {
  i18n: LocalizerType;
};

export type Props = PropsData & PropsHousekeeping;

function VerificationNotificationContents({
  contact,
  isLocal,
  type,
  i18n,
}: Props) {
  const name = (
    <ContactName
      key="external-1"
      title={contact.title}
      module="module-verification-notification__contact"
    />
  );

  switch (type) {
    case 'markVerified':
      return isLocal ? (
        <Intl id="icu:youMarkedAsVerified" components={{ name }} i18n={i18n} />
      ) : (
        <Intl
          id="icu:youMarkedAsVerifiedOtherDevice"
          components={{ name }}
          i18n={i18n}
        />
      );
    case 'markNotVerified':
      return isLocal ? (
        <Intl
          id="icu:youMarkedAsNotVerified"
          components={{ name }}
          i18n={i18n}
        />
      ) : (
        <Intl
          id="icu:youMarkedAsNotVerifiedOtherDevice"
          components={{ name }}
          i18n={i18n}
        />
      );
    default:
      throw missingCaseError(type);
  }
}

export function VerificationNotification(props: Props): JSX.Element {
  const { type } = props;
  return (
    <SystemMessage
      icon={type === 'markVerified' ? 'verified' : 'verified-not'}
      contents={<VerificationNotificationContents {...props} />}
    />
  );
}