[$250] Update create transaction Manual flow to ask for merchant after asking for amount

[cead22]

Problem
When users create transactions manually, if they hit the Create X expense button after entering the amount, they get an error because the Merchant field is required. The flow looks like this

Create Expense > Manual > Amount > Confirm details > Click Create Expense > Error this field is required & Please enter a valid merchant > Merchant > Save > Create Expense

Solution
Update the UI to prompt for merchant after the user enters the amount, and then send the user to the confirmation screen. The flow would look like this

Create Expense > Manual > Amount > Enter Merchant > Save > Confirm details > Create Expense

cc @JmillsExpensify @puneetlath @dubielzyk-expensify

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

⚠️ @lorretheboy Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[lorretheboy]

Proposal

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

Update create transaction Manual flow to ask for merchant after asking for amount

What is the root cause of that problem?

Improvement

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

For IOURequestStepAmount, We add a new navigateToMerchantPage() function to navigate to the merchant step

@@ -171,6 +171,10 @@ function IOURequestStepAmount({
         }
     };
 
+    const navigateToMerchantPage = () => {
+        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID));
+    };
+
     const navigateToNextPage = ({amount, paymentMethod}: AmountParams) => {
         isSaveButtonPressed.current = true;
         const amountInSmallestCurrencyUnits = convertToBackendAmount(Number.parseFloat(amount));
@@ -252,7 +256,14 @@ function IOURequestStepAmount({
                 setSplitShares(transaction, amountInSmallestCurrencyUnits, currency || CONST.CURRENCY.USD, participantAccountIDs);
             }
             setMoneyRequestParticipantsFromReport(transactionID, report).then(() => {
-                navigateToConfirmationPage();
+                // For manual expenses in policy expense chats, navigate to merchant page first
+                const isManualExpense = iouRequestType === CONST.IOU.REQUEST_TYPE.MANUAL;
+                const isMerchantRequired = isPolicyExpenseChat(report);
+                if (isManualExpense && isMerchantRequired && !isSplitBill) {
+                    navigateToMerchantPage();
+                } else {
+                    navigateToConfirmationPage();
+                }
             });
             return;
         }
@@ -273,7 +284,13 @@ function IOURequestStepAmount({
             const resetToDefaultWorkspace = () => {
                 setTransactionReport(transactionID, {reportID: transactionReportID}, true);
                 setMoneyRequestParticipantsFromReport(transactionID, activePolicyExpenseChat).then(() => {
-                    Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.SUBMIT, transactionID, activePolicyExpenseChat?.reportID));
+                    // For manual expenses in policy expense chats, navigate to merchant page first
+                    const isManualExpense = iouRequestType === CONST.IOU.REQUEST_TYPE.MANUAL;
+                    if (isManualExpense) {
+                        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.SUBMIT, transactionID, activePolicyExpenseChat?.reportID));
+                    } else {
+                        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.SUBMIT, transactionID, activePolicyExpenseChat?.reportID));
+                    }
                 });
             };

For IOURequestStepMerchant, we update to navigate to confirmation after save

@@ -17,6 +17,7 @@ import {isValidInputLength} from '@libs/ValidationUtils';
 import {setDraftSplitTransaction, setMoneyRequestMerchant, updateMoneyRequestMerchant} from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/MoneyRequestMerchantForm';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -109,8 +110,11 @@ function IOURequestStepMerchant({
         setMoneyRequestMerchant(transactionID, newMerchant || CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT, !isEditing);
         if (isEditing) {
             updateMoneyRequestMerchant(transactionID, reportID, newMerchant || CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT, policy, policyTags, policyCategories);
+            navigateBack();
+        } else {
+            // For create flow, navigate to confirmation page after setting merchant
+            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, iouType, transactionID, reportID));
         }
-        navigateBack();
     };
 
     return (

Minor changes (Translations, Redirect route,...) can be discussed in PR phase

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Record.mov

[nkdengineer]

Proposal

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

When users create transactions manually, if they hit the "Create X expense" button after entering the amount, they get an error because the Merchant field is required. The current flow looks like this:
Create Expense > Manual > Amount > Confirm details > Click Create Expense > Error "this field is required" & "Please enter a valid merchant" > Merchant > Save > Create Expense
This creates a poor user experience where users are forced to go back and fix the merchant field after attempting to create the expense, rather than being prompted for it earlier in the flow.

What is the root cause of that problem?

Improvement

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

• Test branch: https://github.com/nkdengineer/App/tree/fix/76050

1. Update IOURequestStepAmount.tsx to navigate to merchant step when required:

• In the navigateToNextPage function, before navigating to confirmation page, check if merchant is required and missing
• If merchant is required and missing, navigate to the merchant step instead using ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute()
• This should happen before the existing logic that navigates to confirmation or participants
  

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

  Line 255 in f0649e5

  navigateToConfirmationPage();

  
  

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

  Line 276 in f0649e5

  Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.SUBMIT, transactionID, activePolicyExpenseChat?.reportID));

2. Update IOURequestStepParticipants.tsx to navigate to merchant step when required:

• In the goToNextStep function, before navigating to confirmation page, check if merchant is required for the selected participants and missing
• If merchant is required and missing, navigate to the merchant step instead of confirmation
• This should happen after participants are set but before navigating to confirmation
  

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

  Line 296 in f0649e5

  const goToNextStep = useCallback(() => {

3. Update IOURequestStepMerchant.tsx to navigate to confirmation after saving:

• Modify the updateMerchant function to check if we're in a create flow (not editing)
• If creating and merchant was successfully saved, navigate to the confirmation page instead of going back
• Use ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute() with the appropriate parameters
• Preserve the existing behavior for editing flows (continue to navigate back)
• Only navigate to confirmation if we came from amount or participants step (not from confirmation page itself)
  

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

  Line 91 in f0649e5

  const updateMerchant = (value: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_MERCHANT_FORM>) => {

What alternative solutions did you explore? (Optional)

Result

• When the participant step is skipped

Screen.Recording.2025-11-26.at.01.24.19.mov

• When the participant step isn't skipped

Screen.Recording.2025-11-26.at.01.24.02.mov

[github-actions]

⚠️ @nkdengineer Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.