Show Session Switchover Events

Co-authored-by: Scott Nonnenberg <scott@signal.org>

ts/components/conversation/PhoneNumberDiscoveryNotification.stories.tsx

@@ -0,0 +1,34 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { setupI18n } from '../../util/setupI18n';
+import enMessages from '../../../_locales/en/messages.json';
+import type { PropsType } from './PhoneNumberDiscoveryNotification';
+import { PhoneNumberDiscoveryNotification } from './PhoneNumberDiscoveryNotification';
+
+const i18n = setupI18n('en', enMessages);
+
+export default {
+  title: 'Components/Conversation/PhoneNumberDiscoveryNotification',
+} satisfies Meta<PropsType>;
+
+const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  i18n,
+  conversationTitle: overrideProps.conversationTitle || 'John Fire',
+  phoneNumber: '(555) 333-1111',
+});
+
+export function WithoutSharedGroup(): JSX.Element {
+  return <PhoneNumberDiscoveryNotification {...createProps()} />;
+}
+
+export function WithSharedGroup(): JSX.Element {
+  return (
+    <PhoneNumberDiscoveryNotification
+      {...createProps()}
+      sharedGroup="Fun Times"
+    />
+  );
+}

ts/components/conversation/PhoneNumberDiscoveryNotification.tsx

@@ -0,0 +1,34 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import type { LocalizerType } from '../../types/Util';
+import { SystemMessage } from './SystemMessage';
+import { Emojify } from './Emojify';
+import { getStringForPhoneNumberDiscovery } from '../../util/getStringForPhoneNumberDiscovery';
+
+export type PropsDataType = {
+  conversationTitle: string;
+  phoneNumber: string;
+  sharedGroup?: string;
+};
+export type PropsType = PropsDataType & {
+  i18n: LocalizerType;
+};
+
+// Also known as a Session Switchover Event (SSE)
+export function PhoneNumberDiscoveryNotification(
+  props: PropsType
+): JSX.Element {
+  const { conversationTitle, i18n, sharedGroup, phoneNumber } = props;
+
+  const message = getStringForPhoneNumberDiscovery({
+    conversationTitle,
+    i18n,
+    phoneNumber,
+    sharedGroup,
+  });
+
+  return <SystemMessage icon="info" contents={<Emojify text={message} />} />;
+}

ts/components/conversation/TimelineItem.tsx

@@ -50,6 +50,8 @@ import type { PropsType as PaymentEventNotificationPropsType } from './PaymentEv
 import { PaymentEventNotification } from './PaymentEventNotification';
 import type { PropsDataType as ConversationMergeNotificationPropsType } from './ConversationMergeNotification';
 import { ConversationMergeNotification } from './ConversationMergeNotification';
+import type { PropsDataType as PhoneNumberDiscoveryNotificationPropsType } from './PhoneNumberDiscoveryNotification';
+import { PhoneNumberDiscoveryNotification } from './PhoneNumberDiscoveryNotification';
 import { SystemMessage } from './SystemMessage';
 import type { FullJSXType } from '../Intl';
 import { TimelineMessage } from './TimelineMessage';
@@ -122,6 +124,10 @@ type ConversationMergeNotificationType = {
   type: 'conversationMerge';
   data: ConversationMergeNotificationPropsType;
 };
+type PhoneNumberDiscoveryNotificationType = {
+  type: 'phoneNumberDiscovery';
+  data: PhoneNumberDiscoveryNotificationPropsType;
+};
 type PaymentEventType = {
   type: 'paymentEvent';
   data: Omit<PaymentEventNotificationPropsType, 'i18n'>;
@@ -137,6 +143,7 @@ export type TimelineItemType = (
   | GroupV1MigrationType
   | GroupV2ChangeType
   | MessageType
+  | PhoneNumberDiscoveryNotificationType
   | ProfileChangeNotificationType
   | ResetSessionNotificationType
   | SafetyNumberNotificationType
@@ -330,6 +337,14 @@ export const TimelineItem = memo(function TimelineItem({
           i18n={i18n}
         />
       );
+    } else if (item.type === 'phoneNumberDiscovery') {
+      notification = (
+        <PhoneNumberDiscoveryNotification
+          {...reducedProps}
+          {...item.data}
+          i18n={i18n}
+        />
+      );
     } else if (item.type === 'resetSessionNotification') {
       notification = <ResetSessionNotification {...reducedProps} i18n={i18n} />;
     } else if (item.type === 'profileChange') {