[HOLD for Payment 2024-09-12][$62.50] Add new sub-header to More features page

[joekaufmanexpensify]

Problem

Coming from here, there are concerns that the current More features page on the workspace editor doesn't make it sufficiently clear that enabling a toggle often simply adds a feature to the workspace editor to configure the feature, rather than actually turning it on. This could impact feature adoption, or drive support volume.

Solution

Add a new sub-header directly under More features header on this page of the workspace, that clarifies that toggling something on simply adds the feature to the workspace editor.

Sub-header copy should be: Use the toggles below to enable more features as you grow. Each feature will appear in the navigation menu for further customization.

It should go directly under More features, similar to how the Categories page shown below has a sub-header.

cc @heyjennahay @jamesdeanexpensify @JmillsExpensify @shawnborton @dannymcclain

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0182dc1eaaa54e652c
• Upwork Job ID: 1828148191299361076
• Last Price Increase: 2024-08-26
• Automatic offers:
• rayane-djouah | Reviewer | 103742172
• Krishna2323 | Contributor | 103742174

Issue Owner

Current Issue Owner: @Krishna2323

[melvin-bot[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.

[melvin-bot[bot]]

:warning: It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time :warning:

[melvin-bot[bot]]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[joekaufmanexpensify]

Adjusted price to $62.50, since this is a very, very minor change. Automation didn't work with Upwork, so adjusted the price manually there too

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-08-26 19:26:30 UTC.

Proposal

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

Add new sub-header to More features page

What is the root cause of that problem?

Improvement

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

Below this line we need to add <Text style={[styles.pl5, styles.mb4, styles.mt3, styles.textSupporting]}>{translate('workspace.moreFeatures.subtitle')}</Text>, the translation will be different and will be added in workspace.moreFeatures object in en.ts and es.ts file. https://github.com/Expensify/App/blob/0fd1de0f279fffba0129484801942c3bddb148da/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx#L410

We can also apply maxWidth for the text:

                <Text style={[styles.pl5, styles.mb4, styles.mt3, styles.textSupporting, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                    {translate('workspace.moreFeatures.subtitle')}
                </Text>

What alternative solutions did you explore? (Optional)


Result

[daledah]

Proposal

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

Add new sub-header to More features page

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. We need to add new translation workspace.moreFeatures.subtitle

2. Create a new function and use this in here

   
   const getHeaderText = () => (
       <View style={[styles.ph5, styles.pb5, styles.pt3]}>
           <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.moreFeatures.subtitle')}</Text>
       </View>
   );

### What alternative solutions did you explore? (Optional)

<!---
ATTN: Contributor+

You are the first line of defense in making sure every proposal has a clear and easily understood problem with a "root cause". Do not approve any proposals that lack a satisfying explanation to the first two prompts. It is CRITICALLY important that we understand the root cause at a minimum even if the solution doesn't directly address it. When we avoid this step we can end up solving the wrong problems entirely or just writing hacks and workarounds.

Instructions for how to review a proposal:

1. Address each contributor proposal one at a time and address each part of the question one at a time e.g. if a solution looks acceptable, but the stated problem is not clear then you should provide feedback and make suggestions to improve each prompt before moving on to the next. Avoid responding to all sections of a proposal at once. Move from one question to the next each time asking the contributor to "Please update your original proposal and tag me again when it's ready for review".

4. Limit excessive conversation and moderate issues to keep them on track. If someone is doing any of the following things please kindly and humbly course-correct them:

- Posting PRs.
- Posting large multi-line diffs (this is basically a PR).
- Skipping any of the required questions.
- Not using the proposal template at all.
- Suggesting that an existing issue is related to the current issue before a problem or root cause has been established.
- Excessively wordy explanations.

5. Choose the first proposal that has a reasonable answer to all the required questions.
-->

[Krishna2323]

Proposal Updated

• Added screenshot and optional change

[rayane-djouah]

@Krishna2323's proposal looks good to me.

:ribbon::eyes::ribbon: C+ reviewed

[melvin-bot[bot]]

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

[rayane-djouah]

@dannymcclain - Do we need to add a max width for the text equal to the sections max width?

Option 1:

Option 2:

[dannymcclain]

Yes I think we should definitely do that! Option 2 all the way.

[shawnborton]

Option 2 does look nice, but I'm curious how we handle this text on other pages? Maybe we just don't have long copy on the other sections... but I think we should consider making them consistent?

[dannymcclain]

but I'm curious how we handle this text on other pages? Maybe we just don't have long copy on the other sections... but I think we should consider making them consistent?

I hear you. The thing is, almost every page that currently has text like this is a table view that takes up the full width (so no max-width) and also has shorter copy. My thinking was the max-width looks much nicer here and might even look nicer on full-width views (just because the line length gets reaaaally long). But alternatively we could say that the text width should match the content width if we wanted to...

Anyways here's an example of a table view page with and without the max-width:

[shawnborton]

Totally, and to be fair, I actually like the max-width here to make the rows easier to scan, I'm just suggesting that we should add it to every workspace editor page and not just here. So let's do it everywhere?!

[dannymcclain]

LET'S GO

[rayane-djouah]

Friendly bump @AndrewGable on https://github.com/Expensify/App/issues/48023#issuecomment-2312916398

[melvin-bot[bot]]

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@joekaufmanexpensify, could you please provide the spanish translation? Or should we ask on slack?

@rayane-djouah, PR ready for review ^

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[rayane-djouah]

This ^ was a very small issue and was addressed in a follow-up PR: https://github.com/Expensify/App/pull/48573

[rayane-djouah]

[!NOTE] The production deploy automation failed: This should be on [HOLD for Payment 2024-09-12] according to https://github.com/Expensify/App/issues/48515 production deploy checklist, confirmed in https://github.com/Expensify/App/pull/48389#issuecomment-2332466521

[rayane-djouah]

@adelekennedy This is due payment

[adelekennedy]

Payouts due:

• [x] Contributor: $62.50 @Krishna2323 Upwork @Krishna2323 please except the offer on Upwork!
• [x] Contributor+: $62.50 @rayane-djouah Upwork

Upwork job is here.

[adelekennedy]

offer still pending @Krishna2323

[Krishna2323]

Sorry for delay @adelekennedy, offer accepted.