Retry outbound "normal" messages for up to a day

ts/components/App.tsx

@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useEffect } from 'react';
+import React, { ComponentProps, useEffect } from 'react';
 import classNames from 'classnames';
 
 import { AppViewType } from '../state/ducks/app';
@@ -11,20 +11,25 @@ import { StandaloneRegistration } from './StandaloneRegistration';
 import { ThemeType } from '../types/Util';
 import { usePageVisibility } from '../util/hooks';
 
-export type PropsType = {
+type PropsType = {
   appView: AppViewType;
-  hasInitialLoadCompleted: boolean;
   renderCallManager: () => JSX.Element;
   renderGlobalModalContainer: () => JSX.Element;
   theme: ThemeType;
-};
+} & ComponentProps<typeof Inbox>;
 
 export const App = ({
   appView,
+  cancelMessagesPendingConversationVerification,
+  conversationsStoppingMessageSendBecauseOfVerification,
   hasInitialLoadCompleted,
+  i18n,
+  numberOfMessagesPendingBecauseOfVerification,
   renderCallManager,
   renderGlobalModalContainer,
+  renderSafetyNumber,
   theme,
+  verifyConversationsStoppingMessageSend,
 }: PropsType): JSX.Element => {
   let contents;
 
@@ -33,7 +38,25 @@ export const App = ({
   } else if (appView === AppViewType.Standalone) {
     contents = <StandaloneRegistration />;
   } else if (appView === AppViewType.Inbox) {
-    contents = <Inbox hasInitialLoadCompleted={hasInitialLoadCompleted} />;
+    contents = (
+      <Inbox
+        cancelMessagesPendingConversationVerification={
+          cancelMessagesPendingConversationVerification
+        }
+        conversationsStoppingMessageSendBecauseOfVerification={
+          conversationsStoppingMessageSendBecauseOfVerification
+        }
+        hasInitialLoadCompleted={hasInitialLoadCompleted}
+        i18n={i18n}
+        numberOfMessagesPendingBecauseOfVerification={
+          numberOfMessagesPendingBecauseOfVerification
+        }
+        renderSafetyNumber={renderSafetyNumber}
+        verifyConversationsStoppingMessageSend={
+          verifyConversationsStoppingMessageSend
+        }
+      />
+    );
   }
 
   // This are here so that themes are properly applied to anything that is

ts/components/Inbox.tsx

@@ -1,8 +1,14 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useEffect, useRef } from 'react';
+import React, { ReactNode, useEffect, useRef } from 'react';
 import * as Backbone from 'backbone';
+import {
+  SafetyNumberChangeDialog,
+  SafetyNumberProps,
+} from './SafetyNumberChangeDialog';
+import type { ConversationType } from '../state/ducks/conversations';
+import type { LocalizerType } from '../types/Util';
 
 type InboxViewType = Backbone.View & {
   onEmpty?: () => void;
@@ -14,10 +20,24 @@ type InboxViewOptionsType = Backbone.ViewOptions & {
 };
 
 export type PropsType = {
+  cancelMessagesPendingConversationVerification: () => void;
+  conversationsStoppingMessageSendBecauseOfVerification: Array<ConversationType>;
   hasInitialLoadCompleted: boolean;
+  i18n: LocalizerType;
+  numberOfMessagesPendingBecauseOfVerification: number;
+  renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
+  verifyConversationsStoppingMessageSend: () => void;
 };
 
-export const Inbox = ({ hasInitialLoadCompleted }: PropsType): JSX.Element => {
+export const Inbox = ({
+  cancelMessagesPendingConversationVerification,
+  conversationsStoppingMessageSendBecauseOfVerification,
+  hasInitialLoadCompleted,
+  i18n,
+  numberOfMessagesPendingBecauseOfVerification,
+  renderSafetyNumber,
+  verifyConversationsStoppingMessageSend,
+}: PropsType): JSX.Element => {
   const hostRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<InboxViewType | undefined>(undefined);
 
@@ -47,5 +67,30 @@ export const Inbox = ({ hasInitialLoadCompleted }: PropsType): JSX.Element => {
     }
   }, [hasInitialLoadCompleted, viewRef]);
 
-  return <div className="inbox index" ref={hostRef} />;
+  let safetyNumberChangeDialog: ReactNode;
+  if (conversationsStoppingMessageSendBecauseOfVerification.length) {
+    const confirmText: string =
+      numberOfMessagesPendingBecauseOfVerification === 1
+        ? i18n('safetyNumberChangeDialog__pending-messages--1')
+        : i18n('safetyNumberChangeDialog__pending-messages--many', [
+            numberOfMessagesPendingBecauseOfVerification.toString(),
+          ]);
+    safetyNumberChangeDialog = (
+      <SafetyNumberChangeDialog
+        confirmText={confirmText}
+        contacts={conversationsStoppingMessageSendBecauseOfVerification}
+        i18n={i18n}
+        onCancel={cancelMessagesPendingConversationVerification}
+        onConfirm={verifyConversationsStoppingMessageSend}
+        renderSafetyNumber={renderSafetyNumber}
+      />
+    );
+  }
+
+  return (
+    <>
+      <div className="inbox index" ref={hostRef} />
+      {safetyNumberChangeDialog}
+    </>
+  );
 };

ts/components/conversation/MessageDetail.stories.tsx

@@ -61,7 +61,6 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
   interactionMode: 'keyboard',
 
-  sendAnyway: action('onSendAnyway'),
   showSafetyNumber: action('onShowSafetyNumber'),
 
   checkForAccount: action('checkForAccount'),

ts/components/conversation/MessageDetail.tsx

@@ -53,7 +53,6 @@ export type PropsData = {
   receivedAt: number;
   sentAt: number;
 
-  sendAnyway: (contactId: string, messageId: string) => unknown;
   showSafetyNumber: (contactId: string) => void;
   i18n: LocalizerType;
 } & Pick<MessagePropsType, 'interactionMode'>;
@@ -145,7 +144,7 @@ export class MessageDetail extends React.Component<Props> {
   }
 
   public renderContact(contact: Contact): JSX.Element {
-    const { i18n, message, showSafetyNumber, sendAnyway } = this.props;
+    const { i18n, showSafetyNumber } = this.props;
     const errors = contact.errors || [];
 
     const errorComponent = contact.isOutgoingKeyError ? (
@@ -157,13 +156,6 @@ export class MessageDetail extends React.Component<Props> {
         >
           {i18n('showSafetyNumber')}
         </button>
-        <button
-          type="button"
-          className="module-message-detail__contact__send-anyway"
-          onClick={() => sendAnyway(contact.id, message.id)}
-        >
-          {i18n('sendAnyway')}
-        </button>
       </div>
     ) : null;
     const unidentifiedDeliveryComponent = contact.isUnidentifiedDelivery ? (