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

[shawnborton]

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

[melvin-bot]

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

[melvin-bot]

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.

[JmillsExpensify]

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.

[mkzie2]

🚨 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?

1. 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]}>

2. 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}

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

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

4. Apply background color & border radius to each of the feature items
5. Remove the subtitle from Section & modify titleStyles
6. 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

[shawnborton]

Cool, I'll update the OP with a new mock and a note about reordering.

[misamikasa]

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?

1. Update this renderSection and renderItem styling base on the mockup

const renderItem = useCallback(
        (item: Item) => (
            <View
                key={item.titleTranslationKey}
                style={[styles.moreFeatureItem]}
            >
                <ToggleSettingOptionRow
                    icon={item.icon}
                    disabled={item.disabled}
                    disabledAction={item.disabledAction}
                    title={translate(item.titleTranslationKey)}
                    titleStyle={styles.textStrong}
                    subtitle={translate(item.subtitleTranslationKey)}
                    switchAccessibilityLabel={translate(item.subtitleTranslationKey)}
                    isActive={item.isActive}
                    pendingAction={item.pendingAction}
                    onToggle={item.action}
                    showLockIcon={item.disabled}
                    errors={item.errors}
                    onCloseError={item.onCloseError}
                />
            </View>
        ),
        [styles, translate],
    );

    const renderSection = useCallback(
        (section: SectionObject) => (
            <View
                key={section.titleTranslationKey}
                style={[styles.p5]}
            >
                <Text style={[styles.textLabelSupporting, styles.mb3]}>
                    {translate(section.titleTranslationKey)}
                </Text>

                <View
                    style={[styles.moreFeatureSection]}
                >
                    {section.items.map(renderItem)}
                </View>
            </View>
        ),
        [shouldUseNarrowLayout, styles, renderItem, translate],
    );

Add on styles/index.ts

        moreFeatureItem: {
            backgroundColor: theme.cardBG,
            borderRadius: variables.componentBorderRadiusMedium,
            padding: 16,
        },

        moreFeatureSection: {
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 12,
        },

2. Reorder the section here base on the mockup

3. Remove subtitleTranslationKey from sections const and also on its type, since no longer used

4. Also remove the subtitle from en and es translation files as well

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

n/a

What alternative solutions did you explore? (Optional)

n/a

[lionuncle]

Proposal

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

The current design of the "More Features" page in the Workspace editor is too long and causes valuable features to be tucked further down the page, resulting in reduced visibility and engagement.

What is the root cause of that problem?

The page layout lacks compactness, with features listed one below the other, requiring excessive scrolling. This layout is not optimized for mobile or tablet users, making the page look lengthy and overwhelming.

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

To address this, we propose the following updates to src/pages/workspace/WorkspaceMoreFeaturesPage.tsx and src/styles/index.ts:

Grid Layout for Feature Toggles:

Implement a grid-based layout for feature toggles to display two toggles per row on desktop and one toggle per row on mobile and tablet.

Reorder Sections:

Update the order of sections by moving Integrate directly below Spend and placing Earn (Invoices) at the bottom of the page to prioritize higher-value features.

General Improvements:

Adjust margins, padding, and background colors for individual feature toggles to enhance the visual hierarchy.

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

Ensure the grid layout renders correctly across all screen sizes: desktop, tablet, and mobile.
Verify that all toggles remain functional after the design changes.
Confirm the reordering of sections persists across updates.
Validate that styles for margins, padding, and background color are applied consistently

What alternative solutions did you explore? (Optional)

Arcadian Dropdown for Mobile:

Introduce dropdowns for mobile views to group and categorize features under expandable sections. This will make the page shorter and help users quickly navigate to specific sections.
For example, the "Spend" and "Organize" categories could be collapsible, reducing visual clutter and improving usability

[parasharrajat]

Proposal

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

Change layout for Workspace more features page.

What is the root cause of that problem?

New UI changes.

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

I don't think we can use grid layout in react-native so using flexbox we can achieve it as follows.

1. We will remove the section subtitle. ( I believe it looks good so we can keep this if needed).
   

   App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

   Line 388 in abe6868

   subtitle={translate(section.subtitleTranslationKey)}

2. Add childrenstyles to Section. And adjust other containerStyles such as remove background and etc to achieve UI look.

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 384 in abe6868

<Section

childrenStyles={{flexDirection: 'row', flexWrap: 'wrap', columnGap: '2%', rowGap: 20, marginTop: 16}}

3. Either remove the Section maxWidth on the Section container to take fluid width of available space or increase it if we want to limit the space where rows can stretch. (I believe we should use limited space as screen size can increase and thus the feature rows will extend which won't look good).
   

   App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

   Line 382 in abe6868

   style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}

Modify the styles.workspaceSection and update maxWidth for the same. On mobile, we will keep it for fluid space. 

4. Now add styles to each feature as per the design which might follow this pattern.

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 356 in abe6868

style={styles.mt7}

					{
                        backgroundColor: theme.cardBG,
                        borderRadius: 16,
                        paddingHorizontal: 16,
                        paddingVertical: 20,
                        minWidth: 400, (prevent option from shrinking from less than this width and wrap to next line).
                        flexGrow: 1,
                        flexShrink: 0,
                        flexBasis: '49%',
                        maxWidth: shouldUseNarrowLayout? '100%' : '49%' (100% on mobile),
                        marginTop: 0
                    }

Actual style rules will be done as per mocks and these styles will be converted to styles objects in the styles file. This suggests the way to achieve the layout.

17.01.2025_21.28.10_REC.mp4

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

None UI changes.

What alternative solutions did you explore? (Optional)

[jayeshmangwani]

I don't think we can use grid layout in react-native so using flexbox we can achieve it as follows.

@parasharrajat , I think we can use the layout grid in React Native Web, and it works perfectly here.

[parasharrajat]

But not on native. We should also consult internally if we are ready to use grid layout or mix styles patterns based on platform.

[jayeshmangwani]

But not on native

But on native, we don’t need to use it, as we have a different UI for native and web here. On native, we’ll use a column layout, so in my opinion, this won’t be an issue.

[jayeshmangwani]

We should also consult internally if we are ready to use grid layout or mix styles patterns based on platform.

Though I don’t think it’s a major issue whether we use a grid or flexRow, I’ll leave this decision to the internal engineer.

[parasharrajat]

Though I don’t think it’s a major issue whether we use a grid or flexRow, I’ll leave this decision to the internal engineer.

It is. It is about adopting new patterns and getting consensus. Just like Async await.... if you know, you know what I am saying. Are we comfortable adopting grid layout yet? I believe not yet. As react-native still not follows it and we don't want two many divergence in code base.

I would suggest you raise this on Slack and we start a discussion there before moving here.

[shubham1206agra]

@jayeshmangwani Don't approve using something which is not supported on React Native since we will start supporting wide layout for tablets soon. I would personally prefer @parasharrajat advice here.

[jayeshmangwani]

Don't approve using something which is not supported on React Native

@shubham1206agra We’re already using the web-specific display styling.

[jayeshmangwani]

I would suggest you raise this on Slack and we start a discussion there before moving here.

Cool, I'll start a discussion on #expensify-open-source to get consensus

[jayeshmangwani]

Let's proceed with @parasharrajat's Proposal. Based on the opinions shared on Slack, everyone agrees to use the flexRow layout instead of the grid layout

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @carlosmiceli, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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.

[jayeshmangwani]

Regression Test Proposal

1. Login to an account that has a workspace.
2. Navigate to Settings > Workspaces > Select Any Workspace > More Features
3. 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 👎

[carlosmiceli]

@jayeshmangwani seems right!

[melvin-bot]

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

[adelekennedy]

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

[garrettmknight]

$250 approved for @jayeshmangwani

[JmillsExpensify]

$250 approved for @parasharrajat