Merge pull request Expensify#33665 from ishpaul777/new-feat/actionabl…

…e-whispers

New Feature: Create the UI for Actionable Mention Whispers

src/CONST.ts

@@ -527,6 +527,7 @@ const CONST = {
  TASKCOMPLETED: 'TASKCOMPLETED',
  TASKEDITED: 'TASKEDITED',
  TASKREOPENED: 'TASKREOPENED',
+ ACTIONABLEMENTIONWHISPER: 'ACTIONABLEMENTIONWHISPER',
  POLICYCHANGELOG: {
  ADD_APPROVER_RULE: 'POLICYCHANGELOG_ADD_APPROVER_RULE',
  ADD_BUDGET: 'POLICYCHANGELOG_ADD_BUDGET',
@@ -600,6 +601,10 @@ const CONST = {
  },
  THREAD_DISABLED: ['CREATED'],
  },
+ ACTIONABLE_MENTION_WHISPER_RESOLUTION: {
+ INVITE: 'invited',
+ NOTHING: 'nothing',
+ },
  ARCHIVE_REASON: {
  DEFAULT: 'default',
  ACCOUNT_CLOSED: 'accountClosed',

src/components/ReportActionItem/ActionableItemButtons.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {TranslationPaths} from '@src/languages/types';
+
+type ActionableItem = {
+ isPrimary?: boolean;
+ key: string;
+ onPress: () => void;
+ text: TranslationPaths;
+};
+
+type ActionableItemButtonsProps = {
+ items: ActionableItem[];
+};
+
+function ActionableItemButtons(props: ActionableItemButtonsProps) {
+ const styles = useThemeStyles();
+ const {translate} = useLocalize();
+
+ return (
+ <View style={[styles.flexRow, styles.gap4]}>
+ {props.items?.map((item) => (
+ <Button
+ key={item.key}
+ style={[styles.mt2]}
+ onPress={item.onPress}
+ text={translate(item.text)}
+ small
+ success={item.isPrimary}
+ />
+ ))}
+ </View>
+ );
+}
+
+ActionableItemButtons.displayName = 'ActionableItemButtton';
+
+export default ActionableItemButtons;
+export type {ActionableItem};

src/languages/en.ts

@@ -1966,6 +1966,10 @@ export default {
  levelTwoResult: 'Message hidden from channel, plus anonymous warning and message is reported for review.',
  levelThreeResult: 'Message removed from channel plus anonymous warning and message is reported for review.',
  },
+ actionableMentionWhisperOptions: {
+ invite: 'Invite them',
+ nothing: 'Do nothing',
+ },
  teachersUnitePage: {
  teachersUnite: 'Teachers Unite',
  joinExpensifyOrg: 'Join Expensify.org in eliminating injustice around the world and help teachers split their expenses for classrooms in need!',

src/languages/es.ts

@@ -2430,6 +2430,10 @@ export default {
  copy: 'Copiar',
  copied: '¡Copiado!',
  },
+ actionableMentionWhisperOptions: {
+ invite: 'Invitar',
+ nothing: 'No hacer nada',
+ },
  moderation: {
  flagDescription: 'Todos los mensajes marcados se enviarán a un moderador para su revisión.',
  chooseAReason: 'Elige abajo un motivo para reportarlo:',

src/libs/actions/Report.ts

@@ -341,6 +341,7 @@ function addActions(reportID: string, text = '', file?: File) {
  reportComment?: string;
  file?: File;
  timezone?: string;
+ shouldAllowActionableMentionWhispers?: boolean;
  clientCreatedTime?: string;
  };
 
@@ -350,6 +351,7 @@ function addActions(reportID: string, text = '', file?: File) {
  commentReportActionID: file && reportCommentAction ? reportCommentAction.reportActionID : null,
  reportComment: reportCommentText,
  file,
+ shouldAllowActionableMentionWhispers: true,
  clientCreatedTime: file ? attachmentAction?.created : reportCommentAction?.created,
  };
 
@@ -2585,6 +2587,60 @@ function clearNewRoomFormError() {
  });
 }
 
+function resolveActionableMentionWhisper(reportId: string, reportAction: OnyxEntry<ReportAction>, resolution: ValueOf<typeof CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION>) {
+ const message = reportAction?.message?.[0];
+ if (!message) {
+ return;
+ }
+
+ const updatedMessage: Message = {
+ ...message,
+ resolution,
+ };
+
+ const optimisticData: OnyxUpdate[] = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportId}`,
+ value: {
+ [reportAction.reportActionID]: {
+ message: [updatedMessage],
+ originalMessage: {
+ resolution,
+ },
+ },
+ },
+ },
+ ];
+
+ const failureData: OnyxUpdate[] = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportId}`,
+ value: {
+ [reportAction.reportActionID]: {
+ message: [message],
+ originalMessage: {
+ resolution: null,
+ },
+ },
+ },
+ },
+ ];
+
+ type ResolveActionableMentionWhisperParams = {
+ reportActionID: string;
+ resolution: ValueOf<typeof CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION>;
+ };
+
+ const parameters: ResolveActionableMentionWhisperParams = {
+ reportActionID: reportAction.reportActionID,
+ resolution,
+ };
+
+ API.write('ResolveActionableMentionWhisper', parameters, {optimisticData, failureData});
+}
+
 export {
  searchInServer,
  addComment,
@@ -2649,4 +2705,5 @@ export {
  getDraftPrivateNote,
  updateLastVisitTime,
  clearNewRoomFormError,
+ resolveActionableMentionWhisper,
 };

src/pages/home/report/ReportActionItem.js

@@ -17,6 +17,7 @@ import PressableWithSecondaryInteraction from '@components/PressableWithSecondar
 import EmojiReactionsPropTypes from '@components/Reactions/EmojiReactionsPropTypes';
 import ReportActionItemEmojiReactions from '@components/Reactions/ReportActionItemEmojiReactions';
 import RenderHTML from '@components/RenderHTML';
+import ActionableItemButtons from '@components/ReportActionItem/ActionableItemButtons';
 import ChronosOOOListActions from '@components/ReportActionItem/ChronosOOOListActions';
 import MoneyReportView from '@components/ReportActionItem/MoneyReportView';
 import MoneyRequestAction from '@components/ReportActionItem/MoneyRequestAction';
@@ -305,6 +306,25 @@ function ReportActionItem(props) {
  [props.report, props.action, toggleContextMenuFromActiveReportAction],
  );
 
+ const actionableItemButtons = useMemo(() => {
+ if (!(props.action.actionName === CONST.REPORT.ACTIONS.TYPE.ACTIONABLEMENTIONWHISPER && !lodashGet(props.action, 'originalMessage.resolution', null))) {
+ return [];
+ }
+ return [
+ {
+ text: 'actionableMentionWhisperOptions.invite',
+ key: `${props.action.reportActionID}-actionableMentionWhisper-${CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.INVITE}`,
+ onPress: () => Report.resolveActionableMentionWhisper(props.report.reportID, props.action, CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.INVITE),
+ isPrimary: true,
+ },
+ {
+ text: 'actionableMentionWhisperOptions.nothing',
+ key: `${props.action.reportActionID}-actionableMentionWhisper-${CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.NOTHING}`,
+ onPress: () => Report.resolveActionableMentionWhisper(props.report.reportID, props.action, CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.NOTHING),
+ },
+ ];
+ }, [props.action, props.report]);
+
  /**
  * Get the content of ReportActionItem
  * @param {Boolean} hovered whether the ReportActionItem is hovered
@@ -467,6 +487,17 @@ function ReportActionItem(props) {
  </Text>
  </Button>
  )}
+ {/**
+ These are the actionable buttons that appear at the bottom of a Concierge message
+ for example: Invite a user mentioned but not a member of the room
+ https://github.com/Expensify/App/issues/32741
+ */}
+ {actionableItemButtons.length > 0 && (
+ <ActionableItemButtons
+ action={props.action}
+ items={actionableItemButtons}
+ />
+ )}
  </View>
  ) : (
  <ReportActionItemMessageEdit

src/types/onyx/OriginalMessage.ts

@@ -19,6 +19,7 @@ type OriginalMessageActionName =
  | 'TASKCOMPLETED'
  | 'TASKEDITED'
  | 'TASKREOPENED'
+ | 'ACTIONABLEMENTIONWHISPER'
  | ValueOf<typeof CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG>;
 type OriginalMessageApproved = {
  actionName: typeof CONST.REPORT.ACTIONS.TYPE.APPROVED;
@@ -109,6 +110,18 @@ type OriginalMessageAddComment = {
  };
 };
 
+type OriginalMessageActionableMentionWhisper = {
+ actionName: typeof CONST.REPORT.ACTIONS.TYPE.ACTIONABLEMENTIONWHISPER;
+ originalMessage: {
+ inviteeAccountIDs: number[];
+ inviteeEmails: string;
+ lastModified: string;
+ reportID: number;
+ resolution?: ValueOf<typeof CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION> | null;
+ whisperedTo?: number[];
+ };
+};
+
 type OriginalMessageSubmitted = {
  actionName: typeof CONST.REPORT.ACTIONS.TYPE.SUBMITTED;
  originalMessage: unknown;
@@ -239,6 +252,7 @@ type OriginalMessage =
  | OriginalMessageApproved
  | OriginalMessageIOU
  | OriginalMessageAddComment
+ | OriginalMessageActionableMentionWhisper
  | OriginalMessageSubmitted
  | OriginalMessageClosed
  | OriginalMessageCreated

src/types/onyx/ReportAction.ts

@@ -53,6 +53,9 @@ type Message = {
 
  /** ID of a task report */
  taskReportID?: string;
+
+ /** resolution for actionable mention whisper */
+ resolution?: ValueOf<typeof CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION> | null;
 };
 
 type ImageMetadata = {