Message Requests: Add new "Report spam and block" button

ts/components/CompositionArea.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -61,7 +61,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   conversationType: 'direct',
   onAccept: action('onAccept'),
   onBlock: action('onBlock'),
-  onBlockAndDelete: action('onBlockAndDelete'),
+  onBlockAndReportSpam: action('onBlockAndReportSpam'),
   onDelete: action('onDelete'),
   onUnblock: action('onUnblock'),
   messageRequestsEnabled: boolean(

ts/components/CompositionArea.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -147,7 +147,7 @@ export const CompositionArea = ({
   name,
   onAccept,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onDelete,
   onUnblock,
   phoneNumber,
@@ -374,7 +374,7 @@ export const CompositionArea = ({
         conversationType={conversationType}
         isBlocked={isBlocked}
         onBlock={onBlock}
-        onBlockAndDelete={onBlockAndDelete}
+        onBlockAndReportSpam={onBlockAndReportSpam}
         onUnblock={onUnblock}
         onDelete={onDelete}
         onAccept={onAccept}
@@ -428,7 +428,7 @@ export const CompositionArea = ({
         i18n={i18n}
         conversationType={conversationType}
         onBlock={onBlock}
-        onBlockAndDelete={onBlockAndDelete}
+        onBlockAndReportSpam={onBlockAndReportSpam}
         onDelete={onDelete}
         onAccept={onAccept}
         name={name}

ts/components/Modal.tsx

@@ -9,6 +9,7 @@ import { LocalizerType } from '../types/Util';
 import { ModalHost } from './ModalHost';
 import { Theme } from '../util/theme';
 import { getClassNamesFor } from '../util/getClassNamesFor';
+import { useHasWrapped } from '../util/hooks';
 
 type PropsType = {
   children: ReactNode;
@@ -85,19 +86,29 @@ export function Modal({
   );
 }
 
-Modal.ButtonFooter = ({
+Modal.ButtonFooter = function ButtonFooter({
   children,
   moduleClassName,
 }: Readonly<{
   children: ReactNode;
   moduleClassName?: string;
-}>): ReactElement => (
-  <div
-    className={getClassNamesFor(
-      BASE_CLASS_NAME,
-      moduleClassName
-    )('__button-footer')}
-  >
-    {children}
-  </div>
-);
+}>): ReactElement {
+  const [ref, hasWrapped] = useHasWrapped<HTMLDivElement>();
+
+  const className = getClassNamesFor(
+    BASE_CLASS_NAME,
+    moduleClassName
+  )('__button-footer');
+
+  return (
+    <div
+      className={classNames(
+        className,
+        hasWrapped ? `${className}--one-button-per-line` : undefined
+      )}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+};

ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx

@@ -21,7 +21,7 @@ story.add('Default', () => (
   <ContactSpoofingReviewDialog
     i18n={i18n}
     onBlock={action('onBlock')}
-    onBlockAndDelete={action('onBlockAndDelete')}
+    onBlockAndReportSpam={action('onBlockAndReportSpam')}
     onClose={action('onClose')}
     onDelete={action('onDelete')}
     onShowContactModal={action('onShowContactModal')}

ts/components/conversation/ContactSpoofingReviewDialog.tsx

@@ -18,7 +18,7 @@ import { assert } from '../../util/assert';
 type PropsType = {
   i18n: LocalizerType;
   onBlock: () => unknown;
-  onBlockAndDelete: () => unknown;
+  onBlockAndReportSpam: () => unknown;
   onClose: () => void;
   onDelete: () => unknown;
   onShowContactModal: (contactId: string) => unknown;
@@ -30,7 +30,7 @@ type PropsType = {
 export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> = ({
   i18n,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onClose,
   onDelete,
   onShowContactModal,
@@ -56,7 +56,7 @@ export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> = ({
       <MessageRequestActionsConfirmation
         i18n={i18n}
         onBlock={onBlock}
-        onBlockAndDelete={onBlockAndDelete}
+        onBlockAndReportSpam={onBlockAndReportSpam}
         onUnblock={onUnblock}
         onDelete={onDelete}
         name={possiblyUnsafeConversation.name}

ts/components/conversation/MandatoryProfileSharingActions.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -28,7 +28,7 @@ const getBaseProps = (
     ? text('name', 'NYC Rock Climbers')
     : text('name', 'Cayce Bollard'),
   onBlock: action('block'),
-  onBlockAndDelete: action('onBlockAndDelete'),
+  onBlockAndReportSpam: action('onBlockAndReportSpam'),
   onDelete: action('delete'),
   onAccept: action('accept'),
 });

ts/components/conversation/MandatoryProfileSharingActions.tsx

@@ -19,7 +19,7 @@ export type Props = {
 } & Omit<ContactNameProps, 'module' | 'i18n'> &
   Pick<
     MessageRequestActionsConfirmationProps,
-    'conversationType' | 'onBlock' | 'onBlockAndDelete' | 'onDelete'
+    'conversationType' | 'onBlock' | 'onBlockAndReportSpam' | 'onDelete'
   >;
 
 export const MandatoryProfileSharingActions = ({
@@ -29,7 +29,7 @@ export const MandatoryProfileSharingActions = ({
   name,
   onAccept,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onDelete,
   phoneNumber,
   profileName,
@@ -43,7 +43,7 @@ export const MandatoryProfileSharingActions = ({
         <MessageRequestActionsConfirmation
           i18n={i18n}
           onBlock={onBlock}
-          onBlockAndDelete={onBlockAndDelete}
+          onBlockAndReportSpam={onBlockAndReportSpam}
           onUnblock={() => {
             throw new Error(
               'Should not be able to unblock from MandatoryProfileSharingActions'

ts/components/conversation/MessageRequestActions.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -27,7 +27,7 @@ const getBaseProps = (isGroup = false): MessageRequestActionsProps => ({
     : text('name', 'Cayce Bollard'),
   onBlock: action('block'),
   onDelete: action('delete'),
-  onBlockAndDelete: action('blockAndDelete'),
+  onBlockAndReportSpam: action('blockAndReportSpam'),
   onUnblock: action('unblock'),
   onAccept: action('accept'),
 });

ts/components/conversation/MessageRequestActions.tsx

@@ -30,7 +30,7 @@ export const MessageRequestActions = ({
   name,
   onAccept,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onDelete,
   onUnblock,
   phoneNumber,
@@ -45,7 +45,7 @@ export const MessageRequestActions = ({
         <MessageRequestActionsConfirmation
           i18n={i18n}
           onBlock={onBlock}
-          onBlockAndDelete={onBlockAndDelete}
+          onBlockAndReportSpam={onBlockAndReportSpam}
           onUnblock={onUnblock}
           onDelete={onDelete}
           name={name}

ts/components/conversation/MessageRequestActionsConfirmation.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -19,7 +19,7 @@ export type Props = {
   conversationType: 'group' | 'direct';
   isBlocked?: boolean;
   onBlock(): unknown;
-  onBlockAndDelete(): unknown;
+  onBlockAndReportSpam(): unknown;
   onUnblock(): unknown;
   onDelete(): unknown;
   state: MessageRequestState;
@@ -31,7 +31,7 @@ export const MessageRequestActionsConfirmation = ({
   i18n,
   name,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onChangeState,
   onDelete,
   onUnblock,
@@ -64,16 +64,20 @@ export const MessageRequestActionsConfirmation = ({
           />
         }
         actions={[
+          ...(conversationType === 'direct'
+            ? [
+                {
+                  text: i18n('MessageRequests--block-and-report-spam'),
+                  action: onBlockAndReportSpam,
+                  style: 'negative' as const,
+                },
+              ]
+            : []),
           {
             text: i18n('MessageRequests--block'),
             action: onBlock,
             style: 'negative',
           },
-          {
-            text: i18n('MessageRequests--block-and-delete'),
-            action: onBlockAndDelete,
-            style: 'negative',
-          },
         ]}
       >
         {i18n(`MessageRequests--block-${conversationType}-confirm-body`)}

ts/components/conversation/Timeline.stories.tsx

@@ -280,7 +280,7 @@ const actions = () => ({
   ),
 
   onBlock: action('onBlock'),
-  onBlockAndDelete: action('onBlockAndDelete'),
+  onBlockAndReportSpam: action('onBlockAndReportSpam'),
   onDelete: action('onDelete'),
   onUnblock: action('onUnblock'),
 

ts/components/conversation/Timeline.tsx

@@ -110,7 +110,7 @@ type PropsActionsType = {
   loadNewestMessages: (messageId: string, setFocus?: boolean) => unknown;
   markMessageRead: (messageId: string) => unknown;
   onBlock: () => unknown;
-  onBlockAndDelete: () => unknown;
+  onBlockAndReportSpam: () => unknown;
   onDelete: () => unknown;
   onUnblock: () => unknown;
   selectMessage: (messageId: string, conversationId: string) => unknown;
@@ -1168,7 +1168,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       isGroupV1AndDisabled,
       items,
       onBlock,
-      onBlockAndDelete,
+      onBlockAndReportSpam,
       onDelete,
       onUnblock,
       showContactModal,
@@ -1314,7 +1314,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
           <ContactSpoofingReviewDialog
             i18n={i18n}
             onBlock={onBlock}
-            onBlockAndDelete={onBlockAndDelete}
+            onBlockAndReportSpam={onBlockAndReportSpam}
             onClose={closeContactSpoofingReview}
             onDelete={onDelete}
             onShowContactModal={showContactModal}