Implement WorkspaceMoreFeaturesPage #37441

rezkiy37 · 2024-02-28T17:18:27Z

Details

The PR introduces a new "More features" page of policy settings. It allows the user to manipulate (enable/disable) with features of paid workspaces like categories, tags, report fields and so on. There is a doc and thread about the feature.

Fixed Issues

$ #37373
PROPOSAL: N/A

Tests

Have access to the page

You need to have a paid workspace, where you are an admin.
Open workspace settings.
Verify that there is a new tab "More features".
Click on the tab.
Verify that a new page (WorkspaceMoreFeaturesPage) opens.
Verify that the page satisfies the design.

Do not have access to the page

You need to have a free workspace or you are not an admin.
Open workspace settings.
Verify that there isn't a new tab "More features".

Enable a feature

Open the new page.
Enable any feature.
Verify that a toggler is active.
Verify that the app redirects you to a feature page (if a feature is "workflows", "categories" or "tags" for now).

Disable a feature

Open the new page.
Enable any feature.
Verify that a toggler is inactive.
Verify that the app removes a feature tab from LHP.

Verify that no errors appear in the JS console

Offline tests

Same as "Tests", but verify that a pending effect is applied for a feature that was enabled/disabled.

QA Steps

Same as "Tests" and "Offline tests".

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android.mp4

Android: mWeb Chrome

Android.Chrome.mp4

iOS: Native

IOS.mp4

iOS: mWeb Safari

IOS.Safari.mp4

MacOS: Chrome / Safari

Chrome.mp4

Chrome.Offline.mp4

MacOS: Desktop

Desktop.mp4

mountiny · 2024-02-28T20:41:23Z

@Expensify/design Could you help @rezkiy37 with the icons for the more features page?

…ture/37373-WorkspaceMoreFeaturesPage

shawnborton · 2024-02-29T13:05:10Z

Let me know if these work: MoreFeatureIcons.zip

rezkiy37 · 2024-02-29T14:21:43Z

Let me know if these work: MoreFeatureIcons.zip

Yes, these icons work. Thank you!

rezkiy37 · 2024-02-29T15:37:45Z

@shawnborton, please provide me subtitles for "Report fields" and "Connections".

dannymcclain · 2024-02-29T16:47:05Z

@rezkiy37 Looking in Figma for them. This is what I found:

We need to get some clarification on if what you have for "Connections" needs to be moved to it's own card like in the above screenshot. @trjExpensify @JmillsExpensify can you help clarify that?

trjExpensify · 2024-02-29T17:04:58Z

Yep, your screenie is correct Danny. Should we hold off on adding the "Integrate" card now and do it in the QBO doc implementation though, @mountiny?

From the detailed of QBO:

Add Integrations Card (and Accounting toggle) to More Features in Settings
We will add an “Integrate” section to the More Features option that is being handled in the Simplified Collect design doc. As that is not yet implemented, we will only say here that we will use the same pattern to create this section as they will be to create the existing sections, display the “Accounting” toggle, and save the enabled/disabled status of the accounting feature in the NVP

dannymcclain · 2024-02-29T18:42:20Z

@trjExpensify Ah! Sounds like we should but I'll wait for @mountiny to weigh in.

…ture/37373-WorkspaceMoreFeaturesPage

rezkiy37 · 2024-03-01T16:18:06Z

@mountiny, looks like there is a gap in the docs. There are 8 items on the page, but in the docs there are only 7. What is a property can I use for "Expensify card"?

luacmartins · 2024-03-01T16:47:34Z

@rezkiy37 hmm I don't think we discussed that and right now, that setting lives outside of the policy. I think for now you can continue this PR temporarily using User.isUsingExpensifyCard. We'll probably have to change this later, but I think that should unblock you for now

luacmartins · 2024-03-01T16:52:44Z

@rezkiy37 just chatted with the team and the Expensify card feature is descoped from this project. So we can go ahead without that option in the list.

luacmartins

Nice start!

mountiny · 2024-03-01T23:21:10Z

We also only need to show the features that are already implemented with their own page, which might be workflows and categories only at the moment @luacmartins

mountiny

@rezkiy37 great job, requested couple of changes!

mountiny · 2024-03-08T21:09:51Z

src/libs/actions/Policy.ts

+    API.write(WRITE_COMMANDS.ENABLE_POLICY_CATEGORIES, parameters, onyxData);
+
+    if (isEnabled) {
+        const navigationAction = getIsNarrowLayout() ? Navigation.goBack : () => Navigation.navigate(ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID));


I think the backTo is not the best solution here. If user deeplinks to the more features page on mobile from a helpsite for example then enabling a feature will take them to wrong page.

I think we need to use the Navigation.navigate with FORCED_UP style to replace the page with workspace settings page

App/src/libs/actions/Report.ts

Line 1128 in 2c5d6c5

Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.preexistingReportID), CONST.NAVIGATION.TYPE.FORCED_UP);

Oh that's a good catch!

Done - 1ec0295.

mountiny · 2024-03-08T21:10:01Z

src/libs/actions/Policy.ts

+
+    if (isEnabled) {
+        const navigationAction = getIsNarrowLayout() ? Navigation.goBack : () => Navigation.navigate(ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID));
+


Suggested change

mountiny · 2024-03-08T21:11:10Z

src/libs/actions/Policy.ts

+
+    if (isEnabled) {
+        const navigationAction = getIsNarrowLayout() ? Navigation.goBack : () => Navigation.navigate(ROUTES.WORKSPACE_TAGS.getRoute(policyID));
+


Suggested change

mountiny · 2024-03-08T21:11:17Z

src/libs/actions/Policy.ts

+    API.write(WRITE_COMMANDS.ENABLE_POLICY_TAGS, parameters, onyxData);
+
+    if (isEnabled) {
+        const navigationAction = getIsNarrowLayout() ? Navigation.goBack : () => Navigation.navigate(ROUTES.WORKSPACE_TAGS.getRoute(policyID));


Same comment as above

mountiny · 2024-03-08T21:11:37Z

src/libs/actions/Policy.ts

+
+    if (isEnabled) {
+        const navigationAction = getIsNarrowLayout() ? Navigation.goBack : () => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS.getRoute(policyID));
+


Suggested change

mountiny · 2024-03-08T21:11:44Z

src/libs/actions/Policy.ts

+    API.write(WRITE_COMMANDS.ENABLE_POLICY_WORKFLOWS, parameters, onyxData);
+
+    if (isEnabled) {
+        const navigationAction = getIsNarrowLayout() ? Navigation.goBack : () => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS.getRoute(policyID));


Same comment as above

mountiny · 2024-03-08T21:13:14Z

src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

+    subtitleTranslationKey: TranslationPaths;
+    isActive: boolean;
+    action: (isEnabled: boolean) => void;
+    pendingAction: PendingAction | undefined;


I see this is resolved but pendingAction is still used

mountiny · 2024-03-08T21:13:51Z

src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

+        {
+            icon: Illustrations.Pencil,
+            titleTranslationKey: 'workspace.moreFeatures.reportFields.title',
+            subtitleTranslationKey: 'workspace.moreFeatures.reportFields.subtitle',
+            isActive: policy?.areReportFieldsEnabled ?? false,
+            pendingAction: policy?.pendingFields?.areReportFieldsEnabled,
+            action: (isEnabled: boolean) => {
+                Policy.enablePolicyReportFields(policy?.id ?? '', isEnabled);
+            },
+        },


Let's remove these until the report fields are implemented

Suggested change

{

icon: Illustrations.Pencil,

titleTranslationKey: 'workspace.moreFeatures.reportFields.title',

subtitleTranslationKey: 'workspace.moreFeatures.reportFields.subtitle',

isActive: policy?.areReportFieldsEnabled ?? false,

pendingAction: policy?.pendingFields?.areReportFieldsEnabled,

action: (isEnabled: boolean) => {

Policy.enablePolicyReportFields(policy?.id ?? '', isEnabled);

},

},

mountiny · 2024-03-08T21:14:20Z

src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

+    const integrateItems: Item[] = [
+        {
+            icon: Illustrations.Accounting,
+            titleTranslationKey: 'workspace.moreFeatures.connections.title',
+            subtitleTranslationKey: 'workspace.moreFeatures.connections.subtitle',
+            isActive: policy?.areConnectionsEnabled ?? false,
+            pendingAction: policy?.pendingFields?.areConnectionsEnabled,
+            action: (isEnabled: boolean) => {
+                Policy.enablePolicyConnections(policy?.id ?? '', isEnabled);
+            },
+        },
+    ];


Let's remove these until the connections settings is implemented

Suggested change

const integrateItems: Item[] = [

{

icon: Illustrations.Accounting,

titleTranslationKey: 'workspace.moreFeatures.connections.title',

subtitleTranslationKey: 'workspace.moreFeatures.connections.subtitle',

isActive: policy?.areConnectionsEnabled ?? false,

pendingAction: policy?.pendingFields?.areConnectionsEnabled,

action: (isEnabled: boolean) => {

Policy.enablePolicyConnections(policy?.id ?? '', isEnabled);

},

},

];

const integrateItems: Item[] = [];

luacmartins · 2024-03-08T22:34:42Z

src/libs/actions/Policy.ts

+        ],
+    };
+
+    const parameters: EnablePolicyCategoriesParams = {policyID, isEnabled};


The correct API param name is enabled. We should change it for this and all other commands

Suggested change

const parameters: EnablePolicyCategoriesParams = {policyID, isEnabled};

const parameters: EnablePolicyCategoriesParams = {policyID, enabled};

…ture/37373-WorkspaceMoreFeaturesPage

luacmartins

I think we're just missing using pendingField instead of pendingAction

…ture/37373-WorkspaceMoreFeaturesPage

rezkiy37 · 2024-03-11T09:52:44Z

I think we're just missing using pendingField instead of pendingAction

The app does not use pendingAction in Onyx anymore. There is only one case where this naming can be seen, it is when we pass props to ToggleSettingOptionRow. This is a component property and it is called pendingAction logically because it takes only for field into account.

Addressed

mountiny

All looking good now, thank you!

mountiny · 2024-03-11T12:34:08Z

src/pages/workspace/WorkspaceInitialPage.tsx

+    if (policy?.areDistanceRatesEnabled) {
+        protectedCollectPolicyMenuItems.push({
+            translationKey: 'workspace.common.distanceRates',
+            icon: Expensicons.Car,
+            action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_DISTANCE_RATES.getRoute(policyID)))),
+            routeName: SCREENS.WORKSPACE.DISTANCE_RATES,
+        });
+    }
+
+    if (policy?.areWorkflowsEnabled) {
+        protectedCollectPolicyMenuItems.push({
            translationKey: 'workspace.common.workflows',
            icon: Expensicons.Workflows,


I guess this dictates the order of the buttons if the features are enabled, we might want to update this a bit in future as we will use it in product

mountiny · 2024-03-11T12:35:00Z

src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

+    subtitleTranslationKey: TranslationPaths;
+    isActive: boolean;
+    action: (isEnabled: boolean) => void;
+    pendingAction: PendingAction | undefined;


@rezkiy37 updated the pendingAction to pendingFields in onyx, this property is for the component, where pendingAction makes more sense

mountiny · 2024-03-11T12:38:39Z

she is beautiful

OSBotify · 2024-03-11T12:44:20Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

luacmartins

Thanks for working on this!

OSBotify · 2024-03-12T18:49:51Z

🚀 Deployed to staging by https://github.com/mountiny in version: 1.4.51-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

MonilBhavsar · 2024-03-13T07:24:14Z

src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

@rezkiy37 looks like changes in this file has caused a regression here #38198
Could you please take a look 🙏

We have a PR handling this #38215

OSBotify · 2024-03-13T19:45:06Z

🚀 Deployed to production by https://github.com/luacmartins in version: 1.4.51-3 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

rezkiy37 added 3 commits February 28, 2024 18:17

add strings

d6fdc99

Implement draft page

042ddb9

connect the page

f0d0fea

shawnborton added the Design label Feb 28, 2024

mountiny mentioned this pull request Feb 28, 2024

[HOLD for payment 2024-03-20] [$500] [Wave Collect] [More Features] Create WorkspaceMoreFeaturesPage in App #37373

Closed

rezkiy37 added 2 commits February 29, 2024 10:42

Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…

21d1e4b

…ture/37373-WorkspaceMoreFeaturesPage

update strings

f46fa4f

rezkiy37 added 4 commits February 29, 2024 16:44

add icons

a00866a

use correct icons

a802093

build draft sections

a144cbe

add strings

719972c

luacmartins self-requested a review March 1, 2024 01:58

rezkiy37 added 4 commits March 1, 2024 16:51

Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…

b5b4c60

…ture/37373-WorkspaceMoreFeaturesPage

add strings

7849b7f

implement integrate section

08e89a4

integrate section renderer

82a7803

connect active values

c64d1a5

luacmartins reviewed Mar 1, 2024

View reviewed changes

mountiny assigned rezkiy37 Mar 1, 2024

mountiny requested changes Mar 8, 2024

View reviewed changes

luacmartins requested changes Mar 8, 2024

View reviewed changes

rezkiy37 added 6 commits March 9, 2024 10:23

Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…

7c6acd9

…ture/37373-WorkspaceMoreFeaturesPage

add bottom padding

54bed63

rename to enabled

4b816cf

remove unimplemented features from the list

d3c611c

add navigate to distance rates

5efcc2d

remove extra empty lines

4c1c1f9

luacmartins previously requested changes Mar 10, 2024

View reviewed changes

Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…

c4e8292

…ture/37373-WorkspaceMoreFeaturesPage

rezkiy37 added 2 commits March 11, 2024 10:55

improve nav flow

1ec0295

move distance rates up

c8282ea

rezkiy37 requested review from luacmartins and mountiny March 11, 2024 09:56

mountiny approved these changes Mar 11, 2024

View reviewed changes

mountiny merged commit fda1b3a into Expensify:main Mar 11, 2024
18 checks passed

luacmartins reviewed Mar 11, 2024

View reviewed changes

github-actions bot mentioned this pull request Mar 12, 2024

Deploy Checklist: New Expensify 2024-03-12 #38162

Closed

84 tasks

lanitochka17 mentioned this pull request Mar 12, 2024

[HOLD for payment 2024-03-26] [$250] [Wave Collect] [More Features] WS features - App returns to the same WS settings page after toggling on a feature #38185

Closed

6 tasks

MonilBhavsar reviewed Mar 13, 2024

View reviewed changes

luacmartins mentioned this pull request Mar 13, 2024

[HOLD for payment 2024-03-26] [$250] [Simplified Collect][More Features] Optimistically set defaults for Workflows if feature is disabled #38250

Closed

rezkiy37 mentioned this pull request Mar 14, 2024

Ensure that disabled feature page cannot be accessed using deep-link #37902

Merged

50 tasks

hayata-suenaga mentioned this pull request Mar 24, 2024

Feat: implement accounting page #38283

Closed

48 tasks

DylanDylann mentioned this pull request Mar 25, 2024

[HOLD for payment 2024-03-25] [Wave Collect] [Workflows] "Delayed Submissions" toggle does not toggle off unless backed out for Collect Policy #38198

Closed

6 tasks


		if (isEnabled) {
		const navigationAction = getIsNarrowLayout() ? Navigation.goBack : () => Navigation.navigate(ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID));

	const parameters: EnablePolicyCategoriesParams = {policyID, isEnabled};
	const parameters: EnablePolicyCategoriesParams = {policyID, enabled};

Implement WorkspaceMoreFeaturesPage #37441

Implement WorkspaceMoreFeaturesPage #37441

Conversation

rezkiy37 commented Feb 28, 2024 • edited

Details

Fixed Issues

Tests

Have access to the page

Do not have access to the page

Enable a feature

Disable a feature

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

mountiny commented Feb 28, 2024

shawnborton commented Feb 29, 2024

rezkiy37 commented Feb 29, 2024

rezkiy37 commented Feb 29, 2024

dannymcclain commented Feb 29, 2024

trjExpensify commented Feb 29, 2024

dannymcclain commented Feb 29, 2024

rezkiy37 commented Mar 1, 2024

luacmartins commented Mar 1, 2024

luacmartins commented Mar 1, 2024

luacmartins left a comment

Choose a reason for hiding this comment

mountiny commented Mar 1, 2024

mountiny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luacmartins Mar 8, 2024 • edited

Choose a reason for hiding this comment

luacmartins left a comment

Choose a reason for hiding this comment

rezkiy37 commented Mar 11, 2024 • edited

mountiny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mountiny commented Mar 11, 2024

OSBotify commented Mar 11, 2024

luacmartins left a comment

Choose a reason for hiding this comment

OSBotify commented Mar 12, 2024

MonilBhavsar Mar 13, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OSBotify commented Mar 13, 2024

rezkiy37 commented Feb 28, 2024 •

edited

luacmartins Mar 8, 2024 •

edited

rezkiy37 commented Mar 11, 2024 •

edited

MonilBhavsar Mar 13, 2024 •

edited