Spam Reporting UI changes

This commit is contained in:
Jamie Kyle 2024-03-12 09:29:31 -07:00 committed by GitHub
parent e031d136a1
commit 8387f938eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
88 changed files with 2711 additions and 807 deletions

View file

@ -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;
}