App [$250] Tweak UI for deleted message and expense

Problem

Today when you delete a message or expense with threads, the chat message gets replaced with [Deleted message] or [Deleted expense]. This feels a bit unpolished:

CleanShot 2024-12-05 at 13 59 52@2x

Solution

Let's spruce up the UI and reuse our attachement when showing a deleted message or expense:

CleanShot 2024-12-09 at 10 24 35@2x

For the receipt deleted we should use the icon already in our repo (App/assets/images/receipt-slash.svg). For the comment deleted, we should use this new icon: chatbubble-slash.svg.zip

cc @Expensify/design @JmillsExpensify @saracouto

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021864619157987293637
Upwork Job ID: 1864619157987293637
Last Price Increase: 2024-12-05

Issue Owner

Current Issue Owner: @shubham1206agra

Dec 05 '24 04:12 dubielzyk-expensify

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

Dec 05 '24 04:12 melvin-bot[bot]

Edited by proposal-police: This proposal was edited at 2024-12-05 05:53:14 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Tweak UI for deleted message and expense

What is the root cause of that problem?

Improvement

What changes do you think we should make in order to solve the problem?

First we should create a custom rendered in HTMLEngineProviderComponentList, we can call it 'deleted-action': DeletedActionRenderer,. https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/components/HTMLEngineProvider/HTMLRenderers/index.ts#L17-L34
Create a new component DeletedActionRenderer.

import React from 'react';
import {View} from 'react-native';
import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import type {TranslationPaths} from '@src/languages/types';

function DeletedActionRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
    const styles = useThemeStyles();
    const theme = useTheme();
    const {translate} = useLocalize();

    const actionTypes = Object.values(CONST.REPORT.ACTION_TYPE);
    const action = tnode.attributes.action;
    let translation = action;

    if (actionTypes.some((e) => e === action)) {
        translation = translate(`parentReportAction.${action}` as TranslationPaths);
    }

    Object.values(CONST.REPORT.ACTION_TYPE);

    const getIcon = () => {
        // This needs to be updated with new icons
        switch (action) {
            case CONST.REPORT.ACTION_TYPE.DELETED_MESSAGE:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.DELETED_EXPENSE:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.DELETED_REPORT:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.DELETED_TASK:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.HIDDEN_MESSAGE:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.REVERSED_TRANSACTION:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            default:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
        }
    };

    const icon = getIcon();
    return (
        <View style={[styles.p4, styles.mt1, styles.border, {borderColor: theme.border}, styles.flexRow, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap2]}>
            <Icon
                width={icon.height}
                height={icon.width}
                fill={theme.icon}
                src={icon.icon}
            />
            <Text style={(styles.textLabelSupporting, styles.textStrong)}>{translation}</Text>
        </View>
    );
}

DeletedActionRenderer.displayName = 'DeletedActionRenderer';

export default DeletedActionRenderer;

Add the icons in @components/Icon/Expensicons.
From everywhere we are using these values of parentReportAction, we should check if it is being used to render <RenderHTML html={and replace it with<RenderHTML html={<deleted-action action="${CONST.REPORT.ACTION_TYPE.DELETED_MESSAGE}"></deleted-action>} />`. https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/languages/en.ts#L4775-L4782 https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/components/ReportActionItem/MoneyRequestAction.tsx#L114-L122 https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/components/ReportActionItem/TaskPreview.tsx#L88-L90 https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/pages/home/report/ReportActionItem.tsx#L569-L571 https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/pages/home/report/ReportActionItemContentCreated.tsx#L85-L89 https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/pages/home/report/ReportActionItemContentCreated.tsx#L134 https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/pages/home/report/ReportActionItemFragment.tsx#L108-L113
Add the customHTMLElementModel for deleted-action in BaseHTMLEngineProvider it will look similar to alert-text. https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx#L24-L39
Create actions types in CONST file.

        ACTION_TYPE: {
            DELETED_MESSAGE: 'deletedMessage',
            DELETED_REPORT: 'deletedReport',
            DELETED_EXPENSE: 'deletedExpense',
            REVERSED_TRANSACTION: 'reversedTransaction',
            DELETED_TASK: 'deletedTask',
            HIDDEN_MESSAGE: 'hiddenMessage',
        },

TEST BRANCH

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future? 

What alternative solutions did you explore? (Optional)

Dec 05 '24 05:12 Krishna2323

@dubielzyk-expensify, these messages are also shown in similar way, do we want to update these too?

https://github.com/Expensify/App/blob/e25e3fa13b678cf733cd64ab734d73355fc726b8/src/languages/en.ts#L4775-L4782

NOTE: I have hidden my proposal for now, will bring back when we are ready with the designs and this issue is made external.

Dec 05 '24 05:12 Krishna2323

Job added to Upwork: https://www.upwork.com/jobs/~021864619157987293637