Spam Reporting UI changes

ts/components/conversation/MessageRequestActionsConfirmation.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import type { PropsType as ContactNameProps } from './ContactName';
+import type { ContactNameData } from './ContactName';
 import { ContactName } from './ContactName';
 import { ConfirmationDialog } from '../ConfirmationDialog';
 import { Intl } from '../Intl';
@@ -12,38 +12,53 @@ export enum MessageRequestState {
   blocking,
   deleting,
   unblocking,
+  reportingAndMaybeBlocking,
+  acceptedOptions,
   default,
 }
 
-export type Props = {
-  acceptConversation(conversationId: string): unknown;
-  blockAndReportSpam(conversationId: string): unknown;
-  blockConversation(conversationId: string): unknown;
+export type MessageRequestActionsConfirmationBaseProps = {
+  addedByName: ContactNameData | null;
   conversationId: string;
   conversationType: 'group' | 'direct';
-  deleteConversation(conversationId: string): unknown;
-  i18n: LocalizerType;
-  isBlocked?: boolean;
-  onChangeState(state: MessageRequestState): unknown;
-  state: MessageRequestState;
-} & Omit<ContactNameProps, 'module'>;
+  conversationName: ContactNameData;
+  isBlocked: boolean;
+  isReported: boolean;
+  acceptConversation(conversationId: string): void;
+  blockAndReportSpam(conversationId: string): void;
+  blockConversation(conversationId: string): void;
+  reportSpam(conversationId: string): void;
+  deleteConversation(conversationId: string): void;
+};
+
+export type MessageRequestActionsConfirmationProps =
+  MessageRequestActionsConfirmationBaseProps & {
+    i18n: LocalizerType;
+    state: MessageRequestState;
+    onChangeState(state: MessageRequestState): void;
+  };
 
 export function MessageRequestActionsConfirmation({
+  addedByName,
+  conversationId,
+  conversationType,
+  conversationName,
+  i18n,
+  isBlocked,
+  state,
   acceptConversation,
   blockAndReportSpam,
   blockConversation,
-  conversationId,
-  conversationType,
+  reportSpam,
   deleteConversation,
-  i18n,
   onChangeState,
-  state,
-  title,
-}: Props): JSX.Element | null {
+}: MessageRequestActionsConfirmationProps): JSX.Element | null {
   if (state === MessageRequestState.blocking) {
     return (
       <ConfirmationDialog
+        key="messageRequestActionsConfirmation.blocking"
         dialogName="messageRequestActionsConfirmation.blocking"
+        moduleClassName="MessageRequestActionsConfirmation"
         i18n={i18n}
         onClose={() => {
           onChangeState(MessageRequestState.default);
@@ -54,7 +69,13 @@ export function MessageRequestActionsConfirmation({
               i18n={i18n}
               id="icu:MessageRequests--block-direct-confirm-title"
               components={{
-                title: <ContactName key="name" title={title} />,
+                title: (
+                  <ContactName
+                    key="name"
+                    {...conversationName}
+                    preferFirstName
+                  />
+                ),
               }}
             />
           ) : (
@@ -62,21 +83,18 @@ export function MessageRequestActionsConfirmation({
               i18n={i18n}
               id="icu:MessageRequests--block-group-confirm-title"
               components={{
-                title: <ContactName key="name" title={title} />,
+                title: (
+                  <ContactName
+                    key="name"
+                    {...conversationName}
+                    preferFirstName
+                  />
+                ),
               }}
             />
           )
         }
         actions={[
-          ...(conversationType === 'direct'
-            ? [
-                {
-                  text: i18n('icu:MessageRequests--block-and-report-spam'),
-                  action: () => blockAndReportSpam(conversationId),
-                  style: 'negative' as const,
-                },
-              ]
-            : []),
           {
             text: i18n('icu:MessageRequests--block'),
             action: () => blockConversation(conversationId),
@@ -91,10 +109,62 @@ export function MessageRequestActionsConfirmation({
     );
   }
 
+  if (state === MessageRequestState.reportingAndMaybeBlocking) {
+    return (
+      <ConfirmationDialog
+        key="messageRequestActionsConfirmation.reportingAndMaybeBlocking"
+        dialogName="messageRequestActionsConfirmation.reportingAndMaybeBlocking"
+        moduleClassName="MessageRequestActionsConfirmation"
+        i18n={i18n}
+        onClose={() => {
+          onChangeState(MessageRequestState.default);
+        }}
+        title={i18n('icu:MessageRequests--ReportAndMaybeBlockModal-title')}
+        actions={[
+          ...(!isBlocked
+            ? ([
+                {
+                  text: i18n(
+                    'icu:MessageRequests--ReportAndMaybeBlockModal-reportAndBlock'
+                  ),
+                  action: () => blockAndReportSpam(conversationId),
+                  style: 'negative',
+                },
+              ] as const)
+            : []),
+          {
+            text: i18n('icu:MessageRequests--ReportAndMaybeBlockModal-report'),
+            action: () => reportSpam(conversationId),
+            style: 'negative',
+          },
+        ]}
+      >
+        {/* eslint-disable-next-line no-nested-ternary */}
+        {conversationType === 'direct' ? (
+          i18n('icu:MessageRequests--ReportAndMaybeBlockModal-body--direct')
+        ) : addedByName == null ? (
+          i18n(
+            'icu:MessageRequests--ReportAndMaybeBlockModal-body--group--unknown-contact'
+          )
+        ) : (
+          <Intl
+            i18n={i18n}
+            id="icu:MessageRequests--ReportAndMaybeBlockModal-body--group"
+            components={{
+              name: <ContactName key="name" {...addedByName} preferFirstName />,
+            }}
+          />
+        )}
+      </ConfirmationDialog>
+    );
+  }
+
   if (state === MessageRequestState.unblocking) {
     return (
       <ConfirmationDialog
+        key="messageRequestActionsConfirmation.unblocking"
         dialogName="messageRequestActionsConfirmation.unblocking"
+        moduleClassName="MessageRequestActionsConfirmation"
         i18n={i18n}
         onClose={() => {
           onChangeState(MessageRequestState.default);
@@ -104,7 +174,9 @@ export function MessageRequestActionsConfirmation({
             i18n={i18n}
             id="icu:MessageRequests--unblock-direct-confirm-title"
             components={{
-              name: <ContactName key="name" title={title} />,
+              name: (
+                <ContactName key="name" {...conversationName} preferFirstName />
+              ),
             }}
           />
         }
@@ -126,7 +198,9 @@ export function MessageRequestActionsConfirmation({
   if (state === MessageRequestState.deleting) {
     return (
       <ConfirmationDialog
+        key="messageRequestActionsConfirmation.deleting"
         dialogName="messageRequestActionsConfirmation.deleting"
+        moduleClassName="MessageRequestActionsConfirmation"
         i18n={i18n}
         onClose={() => {
           onChangeState(MessageRequestState.default);
@@ -142,7 +216,13 @@ export function MessageRequestActionsConfirmation({
               i18n={i18n}
               id="icu:MessageRequests--delete-group-confirm-title"
               components={{
-                title: <ContactName key="name" title={title} />,
+                title: (
+                  <ContactName
+                    key="name"
+                    {...conversationName}
+                    preferFirstName
+                  />
+                ),
               }}
             />
           )
@@ -165,5 +245,42 @@ export function MessageRequestActionsConfirmation({
     );
   }
 
+  if (state === MessageRequestState.acceptedOptions) {
+    return (
+      <ConfirmationDialog
+        key="messageRequestActionsConfirmation.acceptedOptions"
+        dialogName="messageRequestActionsConfirmation.acceptedOptions"
+        moduleClassName="MessageRequestActionsConfirmation"
+        i18n={i18n}
+        onClose={() => {
+          onChangeState(MessageRequestState.default);
+        }}
+        actions={[
+          {
+            text: i18n('icu:MessageRequests--reportAndMaybeBlock'),
+            action: () =>
+              onChangeState(MessageRequestState.reportingAndMaybeBlocking),
+            style: 'negative',
+          },
+          {
+            text: i18n('icu:MessageRequests--block'),
+            action: () => onChangeState(MessageRequestState.blocking),
+            style: 'negative',
+          },
+        ]}
+      >
+        <Intl
+          i18n={i18n}
+          id="icu:MessageRequests--AcceptedOptionsModal--body"
+          components={{
+            name: (
+              <ContactName key="name" {...conversationName} preferFirstName />
+            ),
+          }}
+        />
+      </ConfirmationDialog>
+    );
+  }
+
   return null;
 }