[HOLD for payment 2024-07-17] [$250] Actionable whisper - Whisper options are interactable when the expense is deleted offline

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when validating #43020
Version Number: 1.4.82-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Go offline.
3. Go to Self DM.
4. Track an expense.
5. Go to transaction thread.
6. Delete the expense.
7. Back in 1:1 DM, click on any option in actionable whisper.

Expected Result:

The actionable whisper should not be interactable when the expense is deleted offline.

Actual Result:

The actionable whisper is interactable when the expense is deleted offline and the options (except Nothing for now) lead to not here page.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6510127_1718153439897.20240612_084634.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0102bf6b299104a911
• Upwork Job ID: 1801628978700613798
• Last Price Increase: 2024-06-14
• Automatic offers:
• rojiphil | Reviewer | 102784394
• truph01 | Contributor | 102784396

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (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.

[m-natarajan]

@CortneyOfstad FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[m-natarajan]

We think that this bug might be related to #vip-vsb

[Krishna2323]

Proposal

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

Actionable whisper - Whisper options are interactable when the expense is deleted offline

What is the root cause of that problem?

We don't have any logic to disable the buttons when the transaction is deleted.

App/src/pages/home/report/ReportActionItem.tsx

Lines 401 to 417 in 79e619a

	const actionableItemButtons: ActionableItem[] = useMemo(() => {
	if (!isActionableWhisper && (!ReportActionsUtils.isActionableJoinRequest(action) || action.originalMessage.choice !== ('' as JoinWorkspaceResolution))) {
	return [];
	}
	if (ReportActionsUtils.isActionableTrackExpense(action)) {
	const transactionID = action?.originalMessage?.transactionID;
	return [
	{
	text: 'actionableMentionTrackExpense.submit',
	key: `${action.reportActionID}-actionableMentionTrackExpense-submit`,
	onPress: () => {
	ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID, report.reportID, CONST.IOU.ACTION.SUBMIT, action.reportActionID);
	},
	isMediumSized: true,
	},
	{

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

We should get the transaction using transactionID and if the transaction doesn't exist, we will disable the buttons. In order to make this work we need to follow few steps.

1. Get all transactions using useOnyx in ReportActionItem.

const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION);

2. Get the transaction details using the transactionID.

const transactionID = action?.originalMessage?.transactionID;
const transaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] ?? null;

App/src/pages/home/report/ReportActionItem.tsx

Lines 401 to 410 in 79e619a

	const actionableItemButtons: ActionableItem[] = useMemo(() => {
	if (!isActionableWhisper && (!ReportActionsUtils.isActionableJoinRequest(action) || action.originalMessage.choice !== ('' as JoinWorkspaceResolution))) {
	return [];
	}
	if (ReportActionsUtils.isActionableTrackExpense(action)) {
	const transactionID = action?.originalMessage?.transactionID;
	return [
	{
	text: 'actionableMentionTrackExpense.submit',

3. Add isDisabled property in the objects in actionableItemButtons array.

{
    text: 'actionableMentionTrackExpense.submit',
    key: `${action.reportActionID}-actionableMentionTrackExpense-submit`,
    onPress: () => {
        ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID, report.reportID, CONST.IOU.ACTION.SUBMIT, action.reportActionID);
    },
    isMediumSized: true,
    isDisabled: !transactions,
},

4. Update ActionableItemButtton to pass the isDisabled prop.
   

   App/src/components/ReportActionItem/ActionableItemButtons.tsx

   Lines 28 to 36 in 79e619a

   	<Button
   	key={item.key}
   	onPress={item.onPress}
   	text={translate(item.text)}
   	small={!item.isMediumSized}
   	medium={item.isMediumSized}
   	success={item.isPrimary}
   	/>
   	))}

<Button
    key={item.key}
    onPress={item.onPress}
    text={translate(item.text)}
    small={!item.isMediumSized}
    medium={item.isMediumSized}
    success={item.isPrimary}
    isDisabled={item.isDisabled}
/>

Optional: We can wrap the Whisper message with OfflineWithFeedback.

App/src/pages/home/report/ReportActionItem.tsx

Line 767 in 79e619a

<ReportActionItemSingle

<OfflineWithFeedback pendingAction={ReportActionsUtils.isActionableTrackExpense(action) && !transaction && 'delete'}>

Note: We also need to update the type files.

What alternative solutions did you explore? (Optional)

1. We can also get the action transaction using the withOnyx HOC.
2. Instead of making the buttons disabled we can hide the buttons by returning empty array if transaction is falsy value.

Result

Monosnap.screencast.2024-06-12.21-08-45.mp4

[melvin-bot]

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

[melvin-bot]

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