[HOLD for payment 2025-02-04] Update the design of the More Features page in the Workspace editor

@JmillsExpensify

Problem:
Our current design of the More features page causes the page to be quite long, which tucks valuable workspace features further down the page and out of sight. We think it may be harming engagement with this page.

Solution
Let's update the More features page to use a more compact design that brings more features into view, and removes some unnecessary copy.

We also want to move Integrate to be directly below Spend, and move Earn (invoices) to the bottom.

cc @Expensify/design @JmillsExpensify @trjExpensify @anmurali @danielrvidal

Issue Owner

Current Issue Owner: @adelekennedy

@jayeshmangwani

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

@adelekennedy

Triggered auto assignment to @adelekennedy (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

Looks good to me! Also, porting over a comment from Slack, based on a comment from Shawn on the positioning of Integrate.

The majority of workspaces have some kind of connection once you get to even a couple of workspace members. It goes even higher with larger workspaces, so I think you're right, there is an argument that Integrate could go right below Spend - especially since it's a way to automatically configure the items in Organize.

🚨 Edited by proposal-police: This proposal was edited at 2025-01-17 10:43:13 UTC.

Proposal

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

Update the design of the More Features page in the Workspace editor

What is the root cause of that problem?

New feature

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

Update the section max width so the section width covers full page by removing workspaceSection style (keep mobile):

https://github.com/Expensify/App/blob/main/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx#L382

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 429 in abe6868

    
           <Text style={[styles.ph5, styles.mb4, styles.mt3, styles.textSupporting, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>

Modify the section's containerStyles here to remove background color & spacing:

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 385 in abe6868

containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}

Update the section's childrenStyles to layout the items (the feature toggle buttons) to grid:

{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12}

Apply background color & border radius to each of the feature items
Remove the subtitle from Section & modify titleStyles
For the new order of sections, we just need to modify it here:

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 324 in abe6868

const sections: SectionObject[] = [

For the detailed spacing, margin, padding, we need Figma to figure them out in details.

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

NA

What alternative solutions did you explore? (Optional)

NA

Reviewing label has been removed, please complete the "BugZero Checklist".

@parasharrajat

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Change design of WorkspaceMoreFeaturePage sections. #55556

If no regressions arise, payment will be issued on 2025-02-04. 🎊

For reference, here are some details about the assignees on this issue:

@parasharrajat requires payment through NewDot Manual Requests
@jayeshmangwani requires payment through NewDot Manual Requests

@parasharrajat

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@parasharrajat / @jayeshmangwani] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
[@adelekennedy] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

Regression Test Proposal

Login to an account that has a workspace.
Navigate to Settings > Workspaces > Select Any Workspace > More Features
Observe the design of the page.
1. Verify that the "Integrate" section appears below the "Spend" section.
2. Verify that the "Earn" section is positioned at the end of the page.
3. On Web: Verify that two cards are displayed per row.
4. On Mobile: Verify that only one card appears per row.

Do we agree 👍 or 👎

@jayeshmangwani

@jayeshmangwani seems right!

@parasharrajat

Payment Summary

Upwork Job

Reviewer: @parasharrajat owed $250 via NewDot
Reviewer: @jayeshmangwani owed $250 via NewDot

BugZero Checklist (@adelekennedy)

I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
I have paid out the Upwork contracts or cancelled the ones that are incorrect
I have verified the payment summary above is correct

@parasharrajat

Contributor: @parasharrajat paid $250 via Upwork
Contributor+: @jayeshmangwani owed $250 via Upwork

@jayeshmangwani

$250 approved for @jayeshmangwani

@parasharrajat

$250 approved for @parasharrajat

Navigation Menu

Repository navigation

[HOLD for payment 2025-02-04] Update the design of the More Features page in the Workspace editor #55390

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

26 remaining items

Regression Test Proposal

Payment Summary

BugZero Checklist (@adelekennedy)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[HOLD for payment 2025-02-04] Update the design of the More Features page in the Workspace editor #55390

Description

Activity

melvin-bot commented on Jan 17, 2025

melvin-bot commented on Jan 17, 2025

JmillsExpensify commented on Jan 17, 2025

mkzie2 commented on Jan 17, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

26 remaining items

melvin-bot commented on Jan 28, 2025

melvin-bot commented on Jan 28, 2025

melvin-bot commented on Jan 28, 2025

jayeshmangwani commented on Jan 29, 2025

Regression Test Proposal

carlosmiceli commented on Feb 3, 2025

melvin-bot commented on Feb 4, 2025

Payment Summary

BugZero Checklist (@adelekennedy)

adelekennedy commented on Feb 4, 2025

garrettmknight commented on Feb 11, 2025

JmillsExpensify commented on Feb 15, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions