Outgoing call: Show safety number dialog if change detected

_locales/en/messages.json

@@ -381,6 +381,10 @@
     "message": "Send Anyway",
     "description": "Used on a warning dialog to make it clear that it might be risky to send the message."
   },
+  "callAnyway": {
+    "message": "Call Anyway",
+    "description": "Used on a warning dialog to make it clear that it might be risky to call the conversation."
+  },
   "noLongerVerified": {
     "message": "Your safety number with $name$ has changed and is no longer verified. Click to show.",
     "description": "Shown in converation banner when user's safety number has changed, but they were previously verified.",

js/views/conversation_view.js

@@ -393,19 +393,27 @@
           onOutgoingAudioCallInConversation: async () => {
             const conversation = this.model;
             const isVideoCall = false;
-            await window.Signal.Services.calling.startOutgoingCall(
-              conversation,
-              isVideoCall
-            );
+
+            if (await this.isCallSafe()) {
+              await window.Signal.Services.calling.startOutgoingCall(
+                conversation,
+                isVideoCall
+              );
+            }
           },
+
           onOutgoingVideoCallInConversation: async () => {
             const conversation = this.model;
             const isVideoCall = true;
-            await window.Signal.Services.calling.startOutgoingCall(
-              conversation,
-              isVideoCall
-            );
+
+            if (await this.isCallSafe()) {
+              await window.Signal.Services.calling.startOutgoingCall(
+                conversation,
+                isVideoCall
+              );
+            }
           },
+
           onShowSafetyNumber: () => {
             this.showSafetyNumber();
           },
@@ -2495,9 +2503,28 @@
       }
     },
 
-    showSendAnywayDialog(contacts) {
+    async isCallSafe() {
+      const contacts = await this.getUntrustedContacts();
+      if (contacts && contacts.length) {
+        const callAnyway = await this.showSendAnywayDialog(
+          contacts,
+          i18n('callAnyway')
+        );
+        if (!callAnyway) {
+          window.log.info(
+            'Safety number change dialog not accepted, new call not allowed.'
+          );
+          return false;
+        }
+      }
+
+      return true;
+    },
+
+    showSendAnywayDialog(contacts, confirmText) {
       return new Promise(resolve => {
         const dialog = new Whisper.SafetyNumberChangeDialogView({
+          confirmText,
           contacts,
           reject: () => {
             resolve(false);

js/views/safety_number_change_dialog_view.js

@@ -12,6 +12,7 @@
       const dialog = new Whisper.ReactWrapperView({
         Component: window.Signal.Components.SafetyNumberChangeDialog,
         props: {
+          confirmText: options.confirmText,
           contacts: options.contacts.map(contact => contact.cachedProps),
           i18n: window.i18n,
           onCancel: () => {

ts/components/SafetyNumberChangeDialog.stories.tsx

@@ -64,6 +64,21 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
       />
     );
   })
+  .add('Different Confirmation Text', () => {
+    return (
+      <SafetyNumberChangeDialog
+        confirmText="You are awesome"
+        contacts={[contactWithAllData]}
+        i18n={i18n}
+        onCancel={action('cancel')}
+        onConfirm={action('confirm')}
+        renderSafetyNumber={() => {
+          action('renderSafetyNumber');
+          return <div>This is a mock Safety Number View</div>;
+        }}
+      />
+    );
+  })
   .add('Multi Contact Dialog', () => {
     return (
       <SafetyNumberChangeDialog

ts/components/SafetyNumberChangeDialog.tsx

@@ -13,6 +13,7 @@ type SafetyNumberProps = {
 };
 
 export type Props = {
+  readonly confirmText?: string;
   readonly contacts: Array<ConversationType>;
   readonly i18n: LocalizerType;
   readonly onCancel: () => void;
@@ -25,6 +26,7 @@ type SafetyDialogContentProps = Props & {
 };
 
 const SafetyDialogContents = ({
+  confirmText,
   contacts,
   i18n,
   onCancel,
@@ -107,7 +109,7 @@ const SafetyDialogContents = ({
           onClick={onConfirm}
           tabIndex={0}
         >
-          {i18n('sendMessageToContact')}
+          {confirmText || i18n('sendMessageToContact')}
         </button>
       </div>
     </>

ts/util/lint/exceptions.json

@@ -825,7 +825,7 @@
     "rule": "jQuery-$(",
     "path": "js/views/safety_number_change_dialog_view.js",
     "line": "      this.$('.safety-number-change-dialog-wrapper').append(dialog.el);",
-    "lineNumber": 36,
+    "lineNumber": 37,
     "reasonCategory": "usageTrusted",
     "updated": "2020-06-23T06:48:06.829Z"
   },
@@ -833,7 +833,7 @@
     "rule": "jQuery-append(",
     "path": "js/views/safety_number_change_dialog_view.js",
     "line": "      this.$('.safety-number-change-dialog-wrapper').append(dialog.el);",
-    "lineNumber": 36,
+    "lineNumber": 37,
     "reasonCategory": "usageTrusted",
     "updated": "2020-06-23T06:48:06.829Z"
   },