[Awaiting payment] [$250] Align Travel Validation and Error Handling in NewDot

[twisterdotcom]

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: v9.2.3-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: N/A
Email or phone of affected tester (no customers): daniel@onboarding94251.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL: N/A
Issue reported by: @danielrvidal
Slack conversation (hyperlinked to channel name): #convert

Action Performed:

1. User clicks “Book Travel” in NewDot without validating their account.
2. The system displays an unclear error and does not show the expected OTP validation screen or even the same error as Classic:

When verification is needed:

Classic	NewDot

Usually when the NewDot error shows, an Enable issue is created for Concierge but in this instance, it isn't.

Expected Result:

• NewDot should show the OTP code input screen and send the validation email.
• Error messaging should align with other validation flows.
• If validation fails, show the normal error message about OTP validation fails
• Once validation is complete, proceed with the normal onboarding flow for Expensify Travel

Actual Result:

• Error is shown without resolution path.
• No OTP email is sent.
• No issue is created in the backend.

Workaround:

User must validate their account manually before attempting again.

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Above

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021965365167914129161
• Upwork Job ID: 1965365167914129161
• Last Price Increase: 2025-09-16
• Automatic offers:
• ShridharGoel | Contributor | 108805896
• situchan | Contributor | 109113080

Issue Owner

Current Issue Owner: @situchan

[melvin-bot]

Current assignee @twisterdotcom is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[kmwamasali]

Proposal

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

When a user clicks “Book Travel” in the NewDot interface without having validated their account, the system shows an unclear error, does not navigate to the OTP validation screen, fails to send a validation email, and does not create an internal issue for the backend team to follow up.

What is the root cause of that problem?

The code currently fails to detect when a user is unvalidated, leading to a breakdown in the expected flow. Instead of prompting the user to validate their email via OTP and notifying the backend to take action, it simply displays an ambiguous error and halts—all without creating a visibility issue or sending the OTP as expected

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

Introduce a conditional block that checks if the user is validated. If not, the app should:

• Navigate to the OTP validation screen (ROUTES.ONBOARDING_WORK_EMAIL_VALIDATION.getRoute())
• Trigger sending of the OTP/magic code email (if not already handled by navigation)
• Show a clear error message indicating the need to validate the email (translate('onboarding.workEmailValidationError.publicEmail'))
• Create a backend issue (e.g., for Concierge visibility) in case email validation fails

App/src/components/BookTravelButton.tsx

Line 88 in 0c3f071

Suggested pseudo‑code snippet :

 // If user is not validated, show OTP validation screen and send validation email
        if (!isUserValidated) {
            Navigation.navigate(ROUTES.ONBOARDING_WORK_EMAIL_VALIDATION.getRoute());
            // Optionally, trigger backend to send OTP/magic code email here
            // TODO: Implement backend call to send OTP email if not already handled by navigation
            setErrorMessage(translate('onboarding.workEmailValidationError.publicEmail'));
            // TODO: Implement backend issue creation for failed validation
            return;
        }

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

To ensure this flow remains functional, we should add or update automated tests covering:

1. Unvalidated user attempts “Book Travel”

   • Simulate a user without validation.
   • Verify that the app navigates to the OTP validation route.
   • Confirm the validation email is sent (or at least that the navigation triggers the expected backend call).
   • Check that the correct error message (workEmailValidationError.publicEmail) displays.

2. Validated user proceeds normally

   • Simulate a validated user clicking “Book Travel.”
   • Ensure the user advances through the booking workflow without being diverted to validation.

3. Backend failure during validation

   • Simulate email sending failure or backend issue creation failure.
   • Ensure the UI shows an appropriate error message and remains on the validation screen, without navigating away or crashing.

4. Edge cases

   • What if the user has partial validation (e.g., OTP expired)? Ensure proper messaging or navigation.
   • What if the user validates while on the OTP screen, then retries “Book Travel”? The booking flow should proceed as expected.

These tests will guard the branching logic and message clarity, ensuring users always follow a meaningful path forward and issues are surfaced correctly.

---

[trjExpensify]

Just to clarify in this case of an unvalidated user, as I'm not sure that was super clear:

1. Click Book travel > RHP opens with the Book travel page
2. Clicks Book travel
3. OTP magic code input appears in the RHP, email is fired off with the magic code.
4. Enters OTP
   • a) If it fails, standard OTP verification form input errors etc.
   • b) If successful, we proceed to run the travel enablement checks.
5. If the travel enablement checks pass, proceed with travel enablement flow.
6. If the travel enablement checks fail
   • a) return to the book travel page in the RHP
   • b) show the centered modal explaining that we’ve been notified and will reach out.
   • c) Create an internal issue to review

CC: @Expensify/design @twisterdotcom anything to add?

[ShridharGoel]

Proposal

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

When users click "Book Travel" in NewDot, there are two critical issues with the validation and error handling flow:

Missing travel enablement error handling - When travel enablement checks fail after a user accepts terms (like due to company verification issues), users see generic error messages with no clear guidance on next steps or automatic issue creation for support.

What is the root cause of that problem?

OTP Validation Inconsistency:

The IS_TRAVEL_VERIFIED beta flag in BookTravelButton.tsx is there which controls the OTP flow. It just needs to be enabled when testing. OTP feature is already implemented for travel bookings, but it is behind this flag.

App/src/components/BookTravelButton.tsx

Lines 127 to 132 in 57650f7

	} else if (!isBetaEnabled(CONST.BETAS.IS_TRAVEL_VERIFIED)) {
	setVerificationModalVisibility(true);
	if (!travelSettings?.lastTravelSignupRequestTime) {
	requestTravelAccess();
	}
	}

Missing Travel Enablement Error Handling:

The TravelTerms.tsx component only handles ERROR_PERMISSION_DENIED but lacks handling for travel enablement failures that occur after terms acceptance:

App/src/pages/Travel/TravelTerms.tsx

Lines 41 to 44 in 57650f7

	if (travelProvisioning?.error === CONST.TRAVEL.PROVISIONING.ERROR_PERMISSION_DENIED && domain) {
	Navigation.navigate(ROUTES.TRAVEL_DOMAIN_PERMISSION_INFO.getRoute(domain));
	cleanupTravelProvisioningSession();
	}

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

Add Travel Enablement Error Constant

Add a new error type constant for travel enablement failures:

// Add to src/CONST/index.ts
TRAVEL: {
    PROVISIONING: {
        ERROR_PERMISSION_DENIED: 'permissionDenied',
        ERROR_TRAVEL_ENABLEMENT_FAILED: 'travelEnablementFailed', // NEW
    },
}

Enhance TravelTerms.tsx Error Handling

Add comprehensive error handling for travel enablement failures with automatic Concierge issue creation:

// Enhanced error handling in TravelTerms.tsx
import * as Report from '@libs/actions/Report';

const [account] = useOnyx(ONYXKEYS.ACCOUNT);
const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
const [showVerifyCompanyModal, setShowVerifyCompanyModal] = useState(false);

const createTravelEnablementIssue = useCallback(() => {
    const message = translate('travel.verifyCompany.conciergeMessage', {
        domain: account?.primaryLogin?.split('@')[1] || ''
    });
    
    if (conciergeReportID) {
        Report.addComment(conciergeReportID, message);
        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(conciergeReportID));
    } else {
        Report.navigateToConciergeChat();
    }
}, [translate, account?.primaryLogin, conciergeReportID]);

useEffect(() => {
    if (travelProvisioning?.error === CONST.TRAVEL.PROVISIONING.ERROR_TRAVEL_ENABLEMENT_FAILED) {
        setShowVerifyCompanyModal(true);
        cleanupTravelProvisioningSession();
    }
}, [travelProvisioning]);

Add User-Friendly Modal and Translations

Enhance the verifyCompany modal with proper user guidance:

// Enhanced modal in TravelTerms.tsx render
<ConfirmModal
    isVisible={showVerifyCompanyModal}
    onConfirm={() => {
        createTravelEnablementIssue();
        setShowVerifyCompanyModal(false);
        Navigation.goBack();
    }}
    title={translate('travel.verifyCompany.title')}
    prompt={translate('travel.verifyCompany.message')}
    confirmText={translate('travel.verifyCompany.confirmText')}
/>

// Add to src/languages/en.ts based on whatever is decided
verifyCompany: {
    title: "We're reviewing your request...",
    message: `We're running a few checks on our end to verify your account is ready for Expensify Travel. We'll be in touch shortly!`,
    confirmText: 'Got it',
    conciergeMessage: ({domain}) => `Travel enablement failed for domain: ${domain}. Please review and enable travel for this domain.`,
},

BookTravel.mov

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

New tests can be added.