[HOLD for payment 2024-12-11] [$250] Expense - On creating split expense via QAB, instead of next&save button split expense shown

[IuliiaHerets]

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

---

Version Number: 9.0.60-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Issue reported by: Applause Internal Team

Action Performed:

Pre:condition:

1. Create a room
2. Invite few members
3. Create a split expense

Steps:

1. Launch app
2. Tap fab - split expense via QAB
3. Enter an amount
4. Note instead "next" button split expense button displayed
5. Tap on split expense
6. Tap amount
7. Note instead "save" button split expense button displayed

Expected Result:

On creating split expense via QAB, instead of next&save button, split expense button must not be shown.

Actual Result:

On creating split expense via QAB, instead of next&save button, split expense button is shown.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6662094_1731384329996.Screenrecorder-2024-11-12-09-31-56-914.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021858387880530531401
• Upwork Job ID: 1858387880530531401
• Last Price Increase: 2024-11-25

Issue Owner

Current Issue Owner: @adelekennedy

[melvin-bot]

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

[Krishna2323]

Proposal


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

Expense - On creating split expense via QAB, instead of next&save button split expense shown

What is the root cause of that problem?

• The manual group split can't be skipped but the button text is set to iou.splitExpense when iouType === CONST.IOU.TYPE.SPLIT is true.
  

  App/src/pages/iou/MoneyRequestAmountForm.tsx

  Lines 234 to 246 in cd3f30f

  	const buttonText: string = useMemo(() => {
  	if (skipConfirmation) {
  	if (iouType === CONST.IOU.TYPE.SPLIT) {
  	return translate('iou.splitExpense');
  	}
  	if (iouType === CONST.IOU.TYPE.TRACK) {
  	return translate('iou.trackExpense');
  	}
  	return translate('iou.submitExpense');
  	}
  	return isEditing ? translate('common.save') : translate('common.next');
  	}, [skipConfirmation, iouType, isEditing, translate]);

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


• We should update this if block to (skipConfirmation && iouType !== CONST.IOU.TYPE.SPLIT) and remove this part.
• For consistency we will also check IOURequestStepAmount, IOURequestStepScan & IOURequestStepDistance.

What alternative solutions did you explore? (Optional)

• We can create shouldSkipConfirmation variable like we do in IOURequestStepDistance and use it instead of skipConfirmation directly.
• We can also remove this check in IOURequestStepDistance .
  

  App/src/pages/iou/request/step/IOURequestStepDistance.tsx

  Lines 158 to 170 in cd3f30f

  	// For quick button actions, we'll skip the confirmation page unless the report is archived or this is a workspace
  	// request and the workspace requires a category or a tag
  	const shouldSkipConfirmation: boolean = useMemo(() => {
  	if (!skipConfirmation || !report?.reportID) {
  	return false;
  	}
  	return (
  	iouType !== CONST.IOU.TYPE.SPLIT &&
  	!ReportUtils.isArchivedRoom(report, reportNameValuePairs) &&
  	!(ReportUtils.isPolicyExpenseChat(report) && ((policy?.requiresCategory ?? false) || (policy?.requiresTag ?? false)))
  	);
  	}, [report, skipConfirmation, policy, reportNameValuePairs, iouType]);

Result

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-11-19 08:52:22 UTC.

Proposal

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

Expense - On creating split expense via QAB, instead of next&save button split expense shown

What is the root cause of that problem?

We will only return the save or next button if the skipConfirmation is false

App/src/pages/iou/MoneyRequestAmountForm.tsx

Lines 234 to 244 in cd3f30f

	const buttonText: string = useMemo(() => {
	if (skipConfirmation) {
	if (iouType === CONST.IOU.TYPE.SPLIT) {
	return translate('iou.splitExpense');
	}
	if (iouType === CONST.IOU.TYPE.TRACK) {
	return translate('iou.trackExpense');
	}
	return translate('iou.submitExpense');
	}
	return isEditing ? translate('common.save') : translate('common.next');

Since we split the expense from QAB, we pass skipConfirmation true here

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 271 to 274 in cd3f30f

	case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
	case CONST.QUICK_ACTIONS.SPLIT_SCAN:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, quickActionReportID, undefined, true), true);
	return;

App/src/libs/actions/IOU.ts

Lines 386 to 392 in cd3f30f

	function clearMoneyRequest(transactionID: string, skipConfirmation = false) {
	Onyx.set(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`, skipConfirmation);
	Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, null);
	}
	function startMoneyRequest(iouType: ValueOf<typeof CONST.IOU.TYPE>, reportID: string, requestType?: IOURequestType, skipConfirmation = false) {
	clearMoneyRequest(CONST.IOU.OPTIMISTIC_TRANSACTION_ID, skipConfirmation);

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

We should pass skipConfirmation false

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 271 to 274 in cd3f30f

	case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
	case CONST.QUICK_ACTIONS.SPLIT_SCAN:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, quickActionReportID, undefined, true), true);
	return;

We can also do the same approach for other request if needed

What alternative solutions did you explore? (Optional)

We can pass skipConfirmation false if it's manual/distance split

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 271 to 274 in cd3f30f

	case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
	case CONST.QUICK_ACTIONS.SPLIT_SCAN:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, quickActionReportID, undefined, true), true);
	return;

case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
case CONST.QUICK_ACTIONS.SPLIT_DISTANCE:
    selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, quickActionReportID, undefined, false), true);
    return;
case CONST.QUICK_ACTIONS.SPLIT_SCAN:
    selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, quickActionReportID, undefined, true), true);
    return;

[bernhardoj]

Proposal

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

When creating split expense from QAB, Split Expense is shown on the amount page Button instead of next/save.

What is the root cause of that problem?

When we select split bill from QAB, we pass skipConfirmation as true.

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 271 to 273 in 058b3af

	case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
	case CONST.QUICK_ACTIONS.SPLIT_SCAN:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, quickActionReportID, undefined, true), true);

If it's true, then we show Split Expense as the text.

App/src/pages/iou/MoneyRequestAmountForm.tsx

Lines 234 to 245 in 058b3af

	const buttonText: string = useMemo(() => {
	if (skipConfirmation) {
	if (iouType === CONST.IOU.TYPE.SPLIT) {
	return translate('iou.splitExpense');
	}
	if (iouType === CONST.IOU.TYPE.TRACK) {
	return translate('iou.trackExpense');
	}
	return translate('iou.submitExpense');
	}
	return isEditing ? translate('common.save') : translate('common.next');
	}, [skipConfirmation, iouType, isEditing, translate]);

However, pressing the button won't split the expense immediately and instead going to the confirm page. If we look at this comment, we only want to skip split if it's unconfigurable, and only scan is unconfigurable.

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Lines 181 to 183 in 058b3af

	// Only skip confirmation when the split is not configurable, for now Smartscanned splits cannot be configured
	if (iouType === CONST.IOU.TYPE.SPLIT && transaction?.iouRequestType === CONST.IOU.REQUEST_TYPE.SCAN) {
	playSound(SOUNDS.DONE);

This means that we shouldn't skip confirmation for the manual amount.

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

Since we only want to skip split scan expense, we can remove this code for split scan because it's inside the manual amount page.

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Lines 180 to 201 in 058b3af

	if (shouldSkipConfirmation) {
	// Only skip confirmation when the split is not configurable, for now Smartscanned splits cannot be configured
	if (iouType === CONST.IOU.TYPE.SPLIT && transaction?.iouRequestType === CONST.IOU.REQUEST_TYPE.SCAN) {
	playSound(SOUNDS.DONE);
	IOU.splitBill({
	participants,
	currentUserLogin: currentUserPersonalDetails.login ?? '',
	currentUserAccountID: currentUserPersonalDetails.accountID,
	amount: backendAmount,
	comment: '',
	currency,
	merchant: CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT,
	tag: '',
	category: '',
	created: transaction?.created ?? '',
	billable: false,
	iouRequestType: CONST.IOU.REQUEST_TYPE.MANUAL,
	existingSplitChatReportID: report?.reportID,
	});
	return;
	}

And then update shouldSkipConfirmation to return false when it's split bill.

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Lines 78 to 84 in 058b3af

	const shouldSkipConfirmation: boolean = useMemo(() => {
	if (!skipConfirmation || !report?.reportID) {
	return false;
	}
	return !(ReportUtils.isArchivedRoom(report, reportNameValuePairs) || ReportUtils.isPolicyExpenseChat(report));
	}, [report, skipConfirmation, reportNameValuePairs]);

const shouldSkipConfirmation: boolean = useMemo(() => {
    if (isSplitBill || !skipConfirmation || !report?.reportID) {
        return false;
    }

    return !(ReportUtils.isArchivedRoom(report, reportNameValuePairs) || ReportUtils.isPolicyExpenseChat(report));
}, [report, skipConfirmation, reportNameValuePairs]);

[melvin-bot]

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

[adelekennedy]

external

[melvin-bot]

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