[$500] Add Track expense follow up questions as rows in details view of a Tracked expense

shawnborton commented 2 days ago

Problem: When a user Tracks an expense in NewDot, they are presented with four options at the end of the flow: send to someone, share with an accountant, categorize it, or do nothing for now. If a user decides to do nothing for now, they will never be able to send or share the expense in NewDot in the future if they change their mind because those options only appeared as a whisper message and will never reappear: CleanShot 2024-10-23 at 20 46 37@2x

The only way they can do this is to switch back to Classic or to delete the expense and start over. This is bad because our core business strategy relies on users being able to easily send expenses to anyone to increase the viral nature of the product.

Solution: Add the track expense options into the details view of a tracked expense. We currently use the details view of an expense to surface other actions like Delete or Download, so this is a natural place to include the other missing track options. This will then allow users to go back to their tracked expenses and easily send them or share them when they wish.

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021849411242829996514
Upwork Job ID: 1849411242829996514
Last Price Increase: 2024-10-24

Issue Owner

Current Issue Owner: @aimane-chnaif

melvin-bot[bot] commented 2 days ago

@shawnborton the AutoAssignerTriage label has been deprecated. Please use Bug for issue triage. See https://stackoverflowteams.com/c/expensify/questions/14418 for more details.

melvin-bot[bot] commented 2 days ago

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

shawnborton commented 2 days ago

cc @anmurali

twilight2294 commented 2 days ago

Proposal

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

Add Track expense follow up questions as rows in details view of a Tracked expense

What is the root cause of that problem?

Feature request, we need to update ReportDetailsPage to show the options in the mock for track expesnes

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

In ReportDetailsPage, we need to push new item to items which is derived from ReportDetailsPageMenuItem if isTrackExpenseReport is true, we already have the languages copies in actionableMentionTrackExpense here for both english and spanish, so we need to only add options and update the icons and define actions:

        if (isTrackExpenseReport) {
            items.push({
                key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
                translationKey: 'actionableMentionTrackExpense.submit',
                icon: Expensicons.Send,
                isAnonymousAction: false,
                shouldShowRightIcon: true,
                action: () => {
                    ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.SUBMIT, action.reportActionID);
                },
            });
            items.push({
                key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
                translationKey: 'actionableMentionTrackExpense.categorize',
                icon: Expensicons.Folder,
                isAnonymousAction: false,
                shouldShowRightIcon: true,
                action: () => {
                    ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.CATEGORIZE, action.reportActionID);
                },
            });
            items.push({
                key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
                translationKey: 'actionableMentionTrackExpense.share',
                icon: Expensicons.UserPlus,
                isAnonymousAction: false,
                shouldShowRightIcon: true,
                action: () => {
                    ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.SHARE, action.reportActionID);
                },
            });
        }

Note that we should also update the backTo routes on the next pages as now we will fallback to the reportdetailspage instead of main chat, that can be done during PR phase

Result

shahinyan11 commented 2 days ago

Proposal

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

Add Track expense follow up questions as rows in details view of a Tracked expense

What is the root cause of that problem?

New feature

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

Add below keys in REPORT_DETAILS_MENU_ITEM

REPORT_DETAILS_MENU_ITEM: {
....

SUBMIT_TO_SOMEONE: 'submitToSomeone',
CATEGORIZE_IT: 'categorizeIt',
SHARE_WITH_ACCOUNTANT: 'shareWithAccountant',
NOTHING_FOR_NOW: 'nothingForNow',
}

Add bellow code here

if( isTrackExpenseReport && parentReport && parentReportAction ){
const transactionID = getTransactionID(report.reportID);

items.push(
    {
        key: CONST.REPORT_DETAILS_MENU_ITEM.SUBMIT_TO_SOMEONE,
        translationKey: 'actionableMentionTrackExpense.submit',
        icon: Expensicons.Bug,
        action: () => ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', parentReport.reportID, CONST.IOU.ACTION.SUBMIT, parentReportAction.reportActionID),
        isAnonymousAction: false,
     },
    {
        key: CONST.REPORT_DETAILS_MENU_ITEM.CATEGORIZE_IT,
        translationKey: 'actionableMentionTrackExpense.categorize',
        icon: Expensicons.Bug,
        action: () => ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', parentReport.reportID, CONST.IOU.ACTION.CATEGORIZE, parentReportAction.reportActionID),
        isAnonymousAction: false,
    },
    {
        key: CONST.REPORT_DETAILS_MENU_ITEM.SHARE_WITH_ACCOUNTANT,
        translationKey: 'actionableMentionTrackExpense.share',
        icon: Expensicons.Bug,
        action: () => ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', parentReport.reportID, CONST.IOU.ACTION.SHARE, parentReportAction.reportActionID),
        isAnonymousAction: false,
    },
    {
        key: CONST.REPORT_DETAILS_MENU_ITEM.NOTHING_FOR_NOW,
        translationKey: 'actionableMentionTrackExpense.nothing',
        icon: Expensicons.Bug,
        action: () => Report.dismissTrackExpenseActionableWhisper(parentReport.reportID, parentReportAction),
        isAnonymousAction: false,
    },
 );
}

We also need to use corresponding icons instead "Expensicons.Bug" in above code

What alternative solutions did you explore? (Optional)

NJ-2020 commented 1 day ago

Proposal

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

What is the root cause of that problem?

New feature

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

Add track expense options inside the ReportDetailsPage if the it is track expense report and actionable track expense isTrackExpenseReport && ReportActionsUtils.isActionableTrackExpense(actionableWhisperReportAction)
We will use the ReportActionsUtils.getTrackExpenseActionableWhisper to get the whisperAction of the track expense
For the reportID we can use parentReport?.reportID or we can use the ReportUtils.getOriginalReportID function and pass the parentReportAction as reportAction value
We will use the same function and translations like inside ReportActionItem when pressing one of the option of the track expense https://github.com/Expensify/App/blob/8e13bcc227cbc330b80bdfdb6bd6c87b232dd6d1/src/pages/home/report/ReportActionItem.tsx#L429-L431

Here's the code:

const iouTransactionID = ReportActionsUtils.isMoneyRequestAction(requestParentReportAction)
    ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID ?? ''
    : '';
const whisperAction = ReportActionsUtils.getTrackExpenseActionableWhisper(iouTransactionID, moneyRequestReport?.reportID ?? '0');
const actionableWhisperReportActionID = whisperAction?.reportActionID ?? '0';
const actionableWhisperReportAction = ReportActionsUtils.getReportAction(moneyRequestReport?.reportID ?? '', actionableWhisperReportActionID);

if (isTrackExpenseReport && ReportActionsUtils.isActionableTrackExpense(actionableWhisperReportAction)) {
    const actionReportID = ReportUtils.getOriginalReportID(report.reportID, parentReportAction) ?? '0';
    items.push({
        key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
        translationKey: 'actionableMentionTrackExpense.submit',
        icon: Expensicons.Send,
        isAnonymousAction: false,
        shouldShowRightIcon: true,
        action: () => {
            ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(iouTransactionID, actionReportID, CONST.IOU.ACTION.SUBMIT, actionableWhisperReportActionID);
        },
    });
    items.push({
        key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
        translationKey: 'actionableMentionTrackExpense.categorize',
        icon: Expensicons.Folder,
        isAnonymousAction: false,
        shouldShowRightIcon: true,
        action: () => {
            ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(iouTransactionID, actionReportID, CONST.IOU.ACTION.CATEGORIZE, actionableWhisperReportActionID);
        },
    });
    items.push({
        key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
        translationKey: 'actionableMentionTrackExpense.share',
        icon: Expensicons.UserPlus,
        isAnonymousAction: false,
        shouldShowRightIcon: true,
        action: () => {
            ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(iouTransactionID, actionReportID, CONST.IOU.ACTION.SHARE, actionableWhisperReportActionID);
        },
    });
}

Result

https://github.com/user-attachments/assets/a204a45f-1358-4f99-b2ca-6f59618d5bb9

What alternative solutions did you explore? (Optional)

melvin-bot[bot] commented 1 day ago

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

melvin-bot[bot] commented 1 day ago

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)

twilight2294 commented 1 day ago

@aimane-chnaif I would like to point out that I proposed the first solution here, other contributors elaborated in detail based on my proposal , but the basic idea of other proposals is the same as my proposal🙏

shahinyan11 commented 1 day ago

@aimane-chnaif I would like to point out that I proposed the first solution here, other contributors elaborated in detail based on my proposal , but the basic idea of other proposals is the same as my proposal🙏

@twilight2294 I disagree with you, it's not quite right, you just made a "quick proposal" without all the necessary changes to be first, but we spent a little more time to provide detailed proposal with all necessary changes

Expensify / App