Fallback for the SafetyNumberViewer

ts/components/CallManager.stories.tsx

@@ -21,7 +21,7 @@ import { AvatarColors } from '../types/Colors';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource';
 import { setupI18n } from '../util/setupI18n';
-import type { Props as SafetyNumberViewerProps } from '../state/smart/SafetyNumberViewer';
+import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
 import enMessages from '../../_locales/en/messages.json';
 import { ThemeType } from '../types/Util';
 
@@ -90,7 +90,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
   openSystemPreferencesAction: action('open-system-preferences-action'),
   playRingtone: action('play-ringtone'),
   renderDeviceSelection: () => <div />,
-  renderSafetyNumberViewer: (_: SafetyNumberViewerProps) => <div />,
+  renderSafetyNumberViewer: (_: SafetyNumberProps) => <div />,
   setGroupCallVideoRequest: action('set-group-call-video-request'),
   setIsCallActive: action('set-is-call-active'),
   setLocalAudio: action('set-local-audio'),

ts/components/SafetyNumberChangeDialog.tsx

@@ -16,7 +16,7 @@ import { isInSystemContacts } from '../util/isInSystemContacts';
 
 export type SafetyNumberProps = {
   contactID: string;
-  onClose?: () => void;
+  onClose: () => void;
 };
 
 export type Props = {
@@ -59,7 +59,7 @@ export const SafetyNumberChangeDialog = ({
 
   if (selectedContact) {
     return (
-      <Modal i18n={i18n} onClose={onClose}>
+      <Modal hasXButton i18n={i18n} onClose={onClose}>
         {renderSafetyNumber({ contactID: selectedContact.id, onClose })}
       </Modal>
     );

ts/components/SafetyNumberModal.tsx

@@ -8,7 +8,7 @@ import { SafetyNumberViewer } from './SafetyNumberViewer';
 
 type PropsType = {
   toggleSafetyNumberModal: () => unknown;
-} & SafetyNumberViewerPropsType;
+} & Omit<SafetyNumberViewerPropsType, 'onClose'>;
 
 export const SafetyNumberModal = ({
   i18n,
@@ -20,10 +20,14 @@ export const SafetyNumberModal = ({
       hasXButton
       i18n={i18n}
       moduleClassName="module-SafetyNumberViewer__modal"
-      onClose={() => toggleSafetyNumberModal()}
+      onClose={toggleSafetyNumberModal}
       title={i18n('SafetyNumberModal__title')}
     >
-      <SafetyNumberViewer i18n={i18n} {...safetyNumberViewerProps} />
+      <SafetyNumberViewer
+        i18n={i18n}
+        onClose={toggleSafetyNumberModal}
+        {...safetyNumberViewerProps}
+      />
     </Modal>
   );
 };

ts/components/SafetyNumberViewer.stories.tsx

@@ -58,7 +58,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
       ? overrideProps.verificationDisabled
       : false
   ),
-  onClose: overrideProps.onClose,
+  onClose: action('onClose'),
 });
 
 const story = storiesOf('Components/SafetyNumberViewer', module);

ts/components/SafetyNumberViewer.tsx

@@ -8,10 +8,10 @@ import { Intl } from './Intl';
 import type { LocalizerType } from '../types/Util';
 
 export type PropsType = {
-  contact?: ConversationType;
+  contact: ConversationType;
   generateSafetyNumber: (contact: ConversationType) => void;
   i18n: LocalizerType;
-  onClose?: () => void;
+  onClose: () => void;
   safetyNumber: string;
   toggleVerified: (contact: ConversationType) => void;
   verificationDisabled: boolean;
@@ -41,7 +41,16 @@ export const SafetyNumberViewer = ({
   if (!contact.phoneNumber) {
     return (
       <div className="module-SafetyNumberViewer">
-        {i18n('cannotGenerateSafetyNumber')}
+        <div>{i18n('cannotGenerateSafetyNumber')}</div>
+        <div className="module-SafetyNumberViewer__buttons">
+          <Button
+            className="module-SafetyNumberViewer__button"
+            onClick={() => onClose?.()}
+            variant={ButtonVariant.Primary}
+          >
+            {i18n('ok')}
+          </Button>
+        </div>
       </div>
     );
   }
@@ -60,13 +69,6 @@ export const SafetyNumberViewer = ({
 
   return (
     <div className="module-SafetyNumberViewer">
-      {onClose && (
-        <div className="module-SafetyNumberViewer__close-button">
-          <button onClick={onClose} tabIndex={0} type="button">
-            <span />
-          </button>
-        </div>
-      )}
       <div className="module-SafetyNumberViewer__number">
         {safetyNumber || getPlaceholder()}
       </div>