Open Expensify Travel In A Webview Within The Classic App

Jul 18, 2025 by gitftunila 58 views

This article delves into the proposed solution for opening Expensify Travel within the classic Expensify app using a webview, rather than redirecting users to a new browser tab. This enhancement aims to provide a more seamless and integrated user experience, particularly for key clients like Warby Parker. By embedding Expensify Travel directly within the app, users can access travel functionalities without disrupting their workflow, leading to improved satisfaction and engagement. This article will explore the problem statement, the importance of the solution, the proposed implementation details, and the benefits of this approach. Join us as we explore how this enhancement can transform the user experience and streamline travel management within Expensify.

Problem Statement: Disjointed User Experience

Currently, when users click on the "travel" option in the classic Expensify app, Expensify Travel opens in a new browser tab. This action takes users away from the app's interface, creating a disjointed experience. The context switch can be jarring and disruptive, making it harder for users to manage their travel arrangements efficiently. This redirection not only interrupts the user's workflow but also diminishes the feeling of a cohesive, integrated platform. For frequent travelers and users who rely heavily on the app, this disruption can become a significant pain point. The goal is to provide a more streamlined experience that keeps users engaged within the app, enhancing their overall satisfaction and productivity.

The Core Issue: Context Switching

The primary problem lies in the context switch required when users are redirected to a new browser tab. Each time a user clicks on "travel," they are taken out of the Expensify app and into a separate browsing session. This break in the user experience can lead to a feeling of disconnect and make it more difficult to manage multiple tasks simultaneously. Imagine a user who is in the middle of reconciling expenses and needs to quickly check their travel itinerary. The need to switch between the app and a new browser tab adds unnecessary friction to the process. By eliminating this context switch, users can stay focused and complete their tasks more efficiently.

Impact on User Workflow

The disjointed experience significantly impacts the user's workflow. The constant switching between the app and a separate browser tab can lead to a loss of focus and a decrease in productivity. Users may find it harder to keep track of their tasks and may experience frustration due to the interruptions. This is especially problematic for users who need to access travel information frequently as part of their expense management routine. A seamless integration of Expensify Travel within the app would allow users to manage their travel arrangements without disrupting their primary workflow, leading to a more efficient and satisfying experience.

Specific User Scenarios

Consider a user who is preparing for a business trip. They are likely to be using the Expensify app to track their expenses, submit reports, and manage their travel plans. If each time they need to check their travel itinerary, they are redirected to a new browser tab, the process becomes cumbersome. They have to navigate away from their expense report, find the correct browser tab, and then return to the app when they are done. This back-and-forth can be time-consuming and frustrating. By embedding Expensify Travel within the app, users can access all the necessary information in one place, streamlining the entire travel management process.

Why This Improvement Matters: Catering to Key Clients and Enhancing the User Experience

This enhancement is crucial for several reasons. Firstly, it directly addresses a request from Warby Parker, a significant client for Expensify. Meeting the specific needs of marquee customers is vital for maintaining strong relationships and securing future business. Secondly, this change represents a general improvement to the user experience, making the app more cohesive and user-friendly. By embedding Expensify Travel within the app, users benefit from a more seamless and integrated experience, eliminating the disruption of switching between the app and a separate browser tab. This enhancement not only improves efficiency but also enhances user satisfaction, making Expensify a more attractive platform for travel and expense management.

Warby Parker's Request

The specific request from Warby Parker underscores the importance of this improvement. As a marquee customer, Warby Parker's satisfaction is paramount. Their feedback provides valuable insight into the needs of large organizations that rely on Expensify for their travel and expense management. By addressing their request to integrate Expensify Travel within the app, Expensify demonstrates a commitment to customer satisfaction and a willingness to tailor the platform to meet specific requirements. This responsiveness strengthens the relationship with Warby Parker and sets a positive precedent for future collaborations.

General User Experience Improvement

Beyond the specific request from Warby Parker, integrating Expensify Travel within the app provides a general improvement to the user experience. The seamless transition between expense management and travel planning creates a more cohesive and intuitive workflow. Users can access all the necessary tools and information in one place, without the need to switch between multiple applications or browser tabs. This integration enhances efficiency, reduces frustration, and makes the overall experience of using Expensify more enjoyable. By prioritizing user experience, Expensify can attract and retain more customers, solidifying its position as a leader in the expense management industry.

Long-Term Benefits

The benefits of this enhancement extend beyond immediate user satisfaction. A seamless integration of Expensify Travel within the app can lead to increased user engagement and retention. When users find the platform easy to use and efficient, they are more likely to continue using it and recommend it to others. This can result in long-term growth and success for Expensify. Additionally, the ability to cater to the specific needs of key clients demonstrates Expensify's commitment to innovation and customer service. This can attract more large organizations to the platform, further strengthening Expensify's market position.

Proposed Solution: Embedding Expensify Travel in a Webview

The proposed solution involves opening Expensify Travel in a webview within the classic Expensify app for users actively engaged in travel arrangements. For other users, the system will redirect them to the New Expensify Travel page. This approach ensures a streamlined experience for those who need it most while maintaining functionality for all users. The solution is conditional, based on specific criteria related to the user's travel settings and policy configurations. This ensures that the webview integration is utilized only when it provides a tangible benefit to the user, optimizing the app's performance and user experience.

Conditional Logic for Webview Integration

The core of the solution lies in a set of conditions that determine whether Expensify Travel should open in a webview or redirect to the New Expensify Travel page. This conditional logic is designed to provide the most efficient and user-friendly experience based on the user's current needs and settings. The conditions include:

User has a travelSettings.spotnanaAccountIDs NVP (Name-Value Pair): This condition checks if the user has travel settings configured for Spotnana, a travel management platform. If the user has Spotnana account IDs, it indicates that they are likely to be actively using travel features.
The primary login is not a phone number: This condition ensures that users with non-phone number logins, typically associated with corporate accounts, receive the webview integration. Phone number logins may have different requirements or configurations, making the webview integration less suitable.
The active policy is a paid group policy: This condition verifies that the user is associated with a paid group policy, which often includes travel management features. Paid group policies are more likely to benefit from the streamlined webview experience.
The active policy has a travelsettings.sportnanaCompanyID: This condition checks if the active policy has a Spotnana company ID, further indicating the use of Spotnana for travel management.
The active policy has a travelsettings.associatedTravelDomainAccountID: This condition ensures that the active policy has an associated travel domain account ID, which is another indicator of active travel arrangements.

Implementation Steps

If all the above conditions are met, the following steps are executed:

Call GenerateSpotnanaToken with the policyID as a parameter: This step generates a token required to access Spotnana's travel services. The policy ID is used to ensure that the token is specific to the user's policy, maintaining security and access control.
Open Expensify Travel in a webview using the specified logic: The webview is opened using existing logic within the Expensify app, ensuring consistency and leveraging established functionality. This logic handles the display of web content within the app's interface, providing a seamless integration.

If any of the conditions are not met, the system will navigate the user to the New Expensify Travel page. This ensures that all users can access travel features, even if they do not meet the criteria for the webview integration.

Benefits of the Conditional Approach

The conditional approach offers several benefits:

Targeted Integration: The webview integration is targeted to users who will benefit most from it, ensuring that the feature enhances their experience without adding unnecessary complexity for other users.
Optimized Performance: By only opening the webview when necessary, the app's performance is optimized. Webviews can be resource-intensive, so limiting their use to specific scenarios helps maintain the app's responsiveness and speed.
Flexibility: The conditional logic allows for flexibility in how Expensify Travel is accessed, ensuring that all users can manage their travel arrangements regardless of their specific settings or policy configurations.

Detailed Implementation Logic

The proposed solution involves a detailed implementation logic to ensure a seamless integration of Expensify Travel within the classic app. This section delves into the specific steps and considerations for embedding the travel functionality in a webview. The implementation is divided into two primary scenarios based on a set of conditions. If the conditions are met, the user will experience Expensify Travel within a webview. If not, they will be directed to the New Expensify Travel page.

Condition Evaluation

The implementation begins with evaluating a series of conditions to determine the appropriate course of action. These conditions are designed to identify users who are actively engaged in travel arrangements and would benefit most from the webview integration. The conditions include:

User has a travelSettings.spotnanaAccountIDs NVP: This checks if the user has configured travel settings with Spotnana, indicating their use of travel features.
Primary login is not a phone number: This ensures that corporate accounts, typically using non-phone number logins, receive the webview experience.
Active policy is a paid group policy: This verifies that the user is associated with a paid group policy, which often includes travel management features.
Active policy has a travelsettings.sportnanaCompanyID: This checks for a Spotnana company ID within the active policy, further indicating Spotnana usage.
Active policy has a travelsettings.associatedTravelDomainAccountID: This confirms the presence of an associated travel domain account ID in the active policy.

Webview Implementation

If all the above conditions are met, the following steps are executed to open Expensify Travel in a webview:

Call GenerateSpotnanaToken: A call is made to GenerateSpotnanaToken with the policyID as a parameter. This token is required to securely access Spotnana's travel services. The token ensures that the user's access is authenticated and authorized.
Open Expensify Travel in a webview: The Expensify Travel functionality is opened within a webview using a predefined logic. This logic, referenced from the existing codebase, ensures a consistent and reliable method for displaying web content within the app's interface. The specific code reference provided ([https://github.com/Expensify/App/blob/main/src/libs/actions/Link.ts#L82-L94](https://github.com/Expensify/App/blob/main/src/libs/actions/Link.ts#L82-L94)) details the steps for constructing the URL and launching the webview.

Redirection to New Expensify Travel

If any of the conditions are not met, the user will be redirected to the New Expensify Travel page. This ensures that all users, regardless of their specific settings or policy configurations, can access the travel functionality. The redirection provides a fallback mechanism, guaranteeing that users can manage their travel arrangements even if the webview integration is not available or appropriate for their situation.

Code Modifications and Considerations

The implementation will require modifications to the existing codebase to incorporate the conditional logic and webview integration. This includes:

Adding condition evaluation logic: Code must be added to evaluate the conditions described above. This will likely involve querying user settings, policy configurations, and other relevant data.
Implementing the GenerateSpotnanaToken call: The code must include a function call to GenerateSpotnanaToken with the appropriate parameters.
Utilizing existing webview logic: The existing logic for opening URLs in a webview, as referenced in the code snippet, should be utilized to ensure consistency and minimize code duplication.
Handling edge cases and errors: The implementation should include error handling and edge case management to ensure a robust and reliable integration.

Beta Checks and Preferred Navigation

In addition to the primary solution, the proposal includes removing beta checks for trips vs. travel, and always preferring travel. This simplifies the navigation and ensures users are directed to the most current and comprehensive travel functionality. This change reflects a commitment to streamlining the user experience and providing access to the latest features. By prioritizing travel over trips, Expensify ensures that users benefit from the most up-to-date tools and information, enhancing their overall experience with the platform.

Removing Beta Checks

The removal of beta checks is a critical step in streamlining the user experience. Beta features are often experimental and may not provide the same level of stability and reliability as fully released features. By removing these checks, Expensify ensures that users are not inadvertently directed to beta versions of the travel functionality, which could lead to confusion or frustration. This simplifies the navigation process and provides a more consistent experience for all users.

Preferring `travel` over `trips`

Preferring travel over trips ensures that users are directed to the most current and comprehensive travel functionality. This decision reflects a strategic move to consolidate and streamline the travel management experience within Expensify. By prioritizing travel, Expensify can focus its resources on maintaining and improving a single, unified travel platform, rather than supporting multiple versions or features. This leads to a more efficient and user-friendly experience, as users can be confident that they are accessing the latest tools and information.

Benefits of the Change

The decision to remove beta checks and prefer travel offers several key benefits:

Simplified Navigation: Users are directed to the most current and comprehensive travel functionality, reducing confusion and streamlining the navigation process.
Consistent Experience: By removing beta checks, Expensify ensures a consistent and reliable experience for all users, regardless of their settings or configurations.
Optimized Resource Allocation: Prioritizing travel allows Expensify to focus its resources on a single, unified travel platform, leading to more efficient development and maintenance.
Enhanced User Satisfaction: Users benefit from a more intuitive and user-friendly travel management experience, leading to increased satisfaction and engagement.

In conclusion, opening Expensify Travel in a webview within the classic app represents a significant improvement to the user experience. By addressing the disjointed experience caused by redirecting users to a new browser tab, Expensify can provide a more seamless and integrated platform for travel and expense management. This enhancement is particularly crucial for key clients like Warby Parker, whose specific request underscores the importance of catering to customer needs. The proposed solution, which involves embedding Expensify Travel in a webview based on a set of conditions, ensures that the integration is targeted and optimized for users actively engaged in travel arrangements. The detailed implementation logic, including the evaluation of conditions, the generation of Spotnana tokens, and the use of existing webview logic, ensures a robust and reliable integration. Additionally, the decision to remove beta checks and prioritize travel over trips further streamlines the user experience and ensures access to the latest features. Overall, this enhancement will not only improve user satisfaction and efficiency but also solidify Expensify's position as a leader in the expense management industry.