Spam Reporting UI changes

ts/components/conversation/MessageRequestActions.tsx

@@ -2,52 +2,57 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import type { PropsType as ContactNameProps } from './ContactName';
 import { ContactName } from './ContactName';
 import { Button, ButtonVariant } from '../Button';
-import type { Props as MessageRequestActionsConfirmationProps } from './MessageRequestActionsConfirmation';
+import type { MessageRequestActionsConfirmationProps } from './MessageRequestActionsConfirmation';
 import {
   MessageRequestActionsConfirmation,
   MessageRequestState,
 } from './MessageRequestActionsConfirmation';
 import { Intl } from '../Intl';
 import type { LocalizerType } from '../../types/Util';
+import { strictAssert } from '../../util/assert';
 
 export type Props = {
   i18n: LocalizerType;
-  isHidden?: boolean;
-} & Omit<ContactNameProps, 'module'> &
-  Omit<
-    MessageRequestActionsConfirmationProps,
-    'i18n' | 'state' | 'onChangeState'
-  >;
+  isHidden: boolean | null;
+} & Omit<
+  MessageRequestActionsConfirmationProps,
+  'i18n' | 'state' | 'onChangeState'
+>;
 
 export function MessageRequestActions({
+  addedByName,
+  conversationId,
+  conversationType,
+  conversationName,
+  i18n,
+  isBlocked,
+  isHidden,
+  isReported,
   acceptConversation,
   blockAndReportSpam,
   blockConversation,
-  conversationId,
-  conversationType,
+  reportSpam,
   deleteConversation,
-  firstName,
-  i18n,
-  isHidden,
-  isBlocked,
-  title,
 }: Props): JSX.Element {
   const [mrState, setMrState] = React.useState(MessageRequestState.default);
 
-  const name = (
-    <strong
-      key="name"
-      className="module-message-request-actions__message__name"
-    >
-      <ContactName firstName={firstName} title={title} preferFirstName />
-    </strong>
-  );
+  const nameValue =
+    conversationType === 'direct' ? conversationName : addedByName;
 
   let message: JSX.Element | undefined;
   if (conversationType === 'direct') {
+    strictAssert(nameValue != null, 'nameValue is null');
+    const name = (
+      <strong
+        key="name"
+        className="module-message-request-actions__message__name"
+      >
+        <ContactName {...nameValue} preferFirstName />
+      </strong>
+    );
+
     if (isBlocked) {
       message = (
         <Intl
@@ -87,39 +92,26 @@ export function MessageRequestActions({
     <>
       {mrState !== MessageRequestState.default ? (
         <MessageRequestActionsConfirmation
+          addedByName={addedByName}
+          conversationId={conversationId}
+          conversationType={conversationType}
+          conversationName={conversationName}
+          i18n={i18n}
+          isBlocked={isBlocked}
+          isReported={isReported}
+          state={mrState}
           acceptConversation={acceptConversation}
           blockAndReportSpam={blockAndReportSpam}
           blockConversation={blockConversation}
-          conversationId={conversationId}
-          conversationType={conversationType}
+          reportSpam={reportSpam}
           deleteConversation={deleteConversation}
-          i18n={i18n}
           onChangeState={setMrState}
-          state={mrState}
-          title={title}
         />
       ) : null}
       <div className="module-message-request-actions">
         <p className="module-message-request-actions__message">{message}</p>
         <div className="module-message-request-actions__buttons">
-          <Button
-            onClick={() => {
-              setMrState(MessageRequestState.deleting);
-            }}
-            variant={ButtonVariant.SecondaryDestructive}
-          >
-            {i18n('icu:MessageRequests--delete')}
-          </Button>
-          {isBlocked ? (
-            <Button
-              onClick={() => {
-                setMrState(MessageRequestState.unblocking);
-              }}
-              variant={ButtonVariant.SecondaryAffirmative}
-            >
-              {i18n('icu:MessageRequests--unblock')}
-            </Button>
-          ) : (
+          {!isBlocked && (
             <Button
               onClick={() => {
                 setMrState(MessageRequestState.blocking);
@@ -129,6 +121,36 @@ export function MessageRequestActions({
               {i18n('icu:MessageRequests--block')}
             </Button>
           )}
+          {(isReported || isBlocked) && (
+            <Button
+              onClick={() => {
+                setMrState(MessageRequestState.deleting);
+              }}
+              variant={ButtonVariant.SecondaryDestructive}
+            >
+              {i18n('icu:MessageRequests--delete')}
+            </Button>
+          )}
+          {!isReported && (
+            <Button
+              onClick={() => {
+                setMrState(MessageRequestState.reportingAndMaybeBlocking);
+              }}
+              variant={ButtonVariant.SecondaryDestructive}
+            >
+              {i18n('icu:MessageRequests--reportAndMaybeBlock')}
+            </Button>
+          )}
+          {isBlocked && (
+            <Button
+              onClick={() => {
+                setMrState(MessageRequestState.unblocking);
+              }}
+              variant={ButtonVariant.SecondaryAffirmative}
+            >
+              {i18n('icu:MessageRequests--unblock')}
+            </Button>
+          )}
           {!isBlocked ? (
             <Button
               onClick={() => acceptConversation(conversationId)}