Spam Reporting UI changes
This commit is contained in:
parent
e031d136a1
commit
8387f938eb
88 changed files with 2711 additions and 807 deletions
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue