Change Phone Number notifications

ts/components/conversation/ChangeNumberNotification.tsx

@@ -0,0 +1,43 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { ConversationType } from '../../state/ducks/conversations';
+import { LocalizerType } from '../../types/Util';
+import { Intl } from '../Intl';
+
+import { Timestamp } from './Timestamp';
+import { Emojify } from './Emojify';
+
+export type PropsData = {
+  sender: ConversationType;
+  timestamp: number;
+};
+
+export type PropsHousekeeping = {
+  i18n: LocalizerType;
+};
+
+export type Props = PropsData & PropsHousekeeping;
+
+const CSS_MODULE = 'module-change-number-notification';
+
+export const ChangeNumberNotification: React.FC<Props> = props => {
+  const { i18n, sender, timestamp } = props;
+
+  return (
+    <div className={CSS_MODULE}>
+      <span className={`${CSS_MODULE}__icon`} />
+      <Intl
+        id="ChangeNumber--notification"
+        components={{
+          sender: <Emojify text={sender.firstName || sender.title} />,
+        }}
+        i18n={i18n}
+      />
+      &nbsp;·&nbsp;
+      <Timestamp i18n={i18n} timestamp={timestamp} />
+    </div>
+  );
+};

ts/components/conversation/TimelineItem.stories.tsx

@@ -129,6 +129,13 @@ storiesOf('Components/Conversation/TimelineItem', module)
         type: 'universalTimerNotification',
         data: null,
       },
+      {
+        type: 'changeNumberNotification',
+        data: {
+          sender: getDefaultConversation(),
+          timestamp: Date.now(),
+        },
+      },
       {
         type: 'callHistory',
         data: {

ts/components/conversation/TimelineItem.tsx

@@ -24,6 +24,10 @@ import {
   PropsActionsType as DeliveryIssueActionProps,
   PropsDataType as DeliveryIssueProps,
 } from './DeliveryIssueNotification';
+import {
+  ChangeNumberNotification,
+  PropsData as ChangeNumberNotificationProps,
+} from './ChangeNumberNotification';
 import { CallingNotificationType } from '../../util/callingNotification';
 import { InlineNotificationWrapper } from './InlineNotificationWrapper';
 import {
@@ -95,6 +99,10 @@ type UniversalTimerNotificationType = {
   type: 'universalTimerNotification';
   data: null;
 };
+type ChangeNumberNotificationType = {
+  type: 'changeNumberNotification';
+  data: ChangeNumberNotificationProps;
+};
 type SafetyNumberNotificationType = {
   type: 'safetyNumberNotification';
   data: SafetyNumberNotificationProps;
@@ -138,6 +146,7 @@ export type TimelineItemType =
   | SafetyNumberNotificationType
   | TimerNotificationType
   | UniversalTimerNotificationType
+  | ChangeNumberNotificationType
   | UnsupportedMessageType
   | VerificationNotificationType;
 
@@ -244,6 +253,10 @@ export class TimelineItem extends React.PureComponent<PropsType> {
       );
     } else if (item.type === 'universalTimerNotification') {
       notification = renderUniversalTimerNotification();
+    } else if (item.type === 'changeNumberNotification') {
+      notification = (
+        <ChangeNumberNotification {...this.props} {...item.data} i18n={i18n} />
+      );
     } else if (item.type === 'safetyNumberNotification') {
       notification = (
         <SafetyNumberNotification {...this.props} {...item.data} i18n={i18n} />