Refactor workspace settings

src/ONYXKEYS.js

@@ -172,6 +172,7 @@ export default {
         ADD_DEBIT_CARD_FORM: 'addDebitCardForm',
         REQUEST_CALL_FORM: 'requestCallForm',
         REIMBURSEMENT_ACCOUNT_FORM: 'reimbursementAccount',
+        WORKSPACE_SETTINGS_FORM: 'workspaceSettingsForm',
     },
 
     // Whether we should show the compose input or not

src/pages/workspace/WorkspacePageWithSections.js

@@ -56,6 +56,9 @@ const propTypes = {
         name: PropTypes.string,
     }).isRequired,
 
+    /** Option to use the default scroll view  */
+    shouldUseScrollView: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -65,6 +68,7 @@ const defaultProps = {
     reimbursementAccount: {},
     footer: null,
     guidesCallTaskID: '',
+    shouldUseScrollView: false,
 };
 
 class WorkspacePageWithSections extends React.Component {
@@ -103,16 +107,20 @@ class WorkspacePageWithSections extends React.Component {
                     onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
                     onCloseButtonPress={() => Navigation.dismissModal()}
                 />
-                <ScrollView
-                    keyboardShouldPersistTaps="handled"
-                    style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
-                >
-                    <View style={[styles.w100, styles.flex1]}>
-
-                        {this.props.children(hasVBA, policyID, isUsingECard)}
-
-                    </View>
-                </ScrollView>
+                {this.props.shouldUseScrollView
+                    ? (
+                        <ScrollView
+                            keyboardShouldPersistTaps="handled"
+                            style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
+                        >
+                            <View style={[styles.w100, styles.flex1]}>
+
+                                {this.props.children(hasVBA, policyID, isUsingECard)}
+
+                            </View>
+                        </ScrollView>
+                    )
+                    : this.props.children(hasVBA, policyID, isUsingECard)}
                 {this.props.footer}
             </ScreenWrapper>
         );

src/pages/workspace/WorkspaceSettingsPage.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
 import Text from '../../components/Text';
 import compose from '../../libs/compose';
 import * as Policy from '../../libs/actions/Policy';
@@ -17,12 +16,12 @@ import defaultTheme from '../../styles/themes/default';
 import CONST from '../../CONST';
 import Picker from '../../components/Picker';
 import TextInput from '../../components/TextInput';
-import FixedFooter from '../../components/FixedFooter';
 import WorkspacePageWithSections from './WorkspacePageWithSections';
 import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
 import {withNetwork} from '../../components/OnyxProvider';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import Form from '../../components/Form';
 
 const propTypes = {
     ...policyPropTypes,
@@ -37,11 +36,6 @@ class WorkspaceSettingsPage extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-            name: props.policy.name,
-            currency: props.policy.outputCurrency,
-        };
-
         this.submit = this.submit.bind(this);
         this.getCurrencyItems = this.getCurrencyItems.bind(this);
         this.validate = this.validate.bind(this);
@@ -58,21 +52,22 @@ class WorkspaceSettingsPage extends React.Component {
         }));
     }
 
-    submit() {
-        if (this.props.policy.isPolicyUpdating || !this.validate()) {
+    submit(values) {
+        if (this.props.policy.isPolicyUpdating) {
             return;
         }
-        const name = this.state.name.trim();
-        const outputCurrency = this.state.currency;
+        const name = values.name.trim();
+        const outputCurrency = values.currency;
         Policy.updateGeneralSettings(this.props.policy.id, name, outputCurrency);
+        Keyboard.dismiss();
     }
 
-    validate() {
+    validate(values) {
         const errors = {};
-        if (!this.state.name.trim().length) {
-            errors.nameError = true;
+        if (!values.name || !values.name.trim().length) {
+            errors.name = this.props.translate('workspace.editor.nameIsRequiredError');
         }
-        return _.size(errors) === 0;
+        return errors;
     }
 
     render() {
@@ -82,25 +77,15 @@ class WorkspaceSettingsPage extends React.Component {
                     headerText={this.props.translate('workspace.common.settings')}
                     route={this.props.route}
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
-                    footer={(
-                        <FixedFooter style={[styles.w100]}>
-                            <OfflineWithFeedback
-                                errors={lodashGet(this.props.policy, 'errorFields.generalSettings')}
-                                onClose={() => Policy.clearWorkspaceGeneralSettingsErrors(this.props.policy.id)}
-                            >
-                                <Button
-                                    success
-                                    isLoading={this.props.policy.isPolicyUpdating}
-                                    text={this.props.translate('workspace.editor.save')}
-                                    onPress={this.submit}
-                                    pressOnEnter
-                                />
-                            </OfflineWithFeedback>
-                        </FixedFooter>
-                    )}
                 >
                     {hasVBA => (
-                        <View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
+                        <Form
+                            formID={ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM}
+                            submitButtonText={this.props.translate('workspace.editor.save')}
+                            style={[styles.mh5, styles.mt5, styles.flexGrow1]}
+                            validate={this.validate}
+                            onSubmit={this.submit}
+                        >
                             <OfflineWithFeedback
                                 pendingAction={lodashGet(this.props.policy, 'pendingFields.avatar', null)}
                                 errors={lodashGet(this.props.policy, 'errorFields.avatar', null)}
@@ -130,27 +115,25 @@ class WorkspaceSettingsPage extends React.Component {
                                 pendingAction={lodashGet(this.props.policy, 'pendingFields.generalSettings')}
                             >
                                 <TextInput
+                                    inputID="name"
                                     label={this.props.translate('workspace.editor.nameInputLabel')}
                                     containerStyles={[styles.mt4]}
-                                    onChangeText={name => this.setState({name})}
-                                    value={this.state.name}
-                                    hasError={!this.state.name.trim().length}
-                                    errorText={this.state.name.trim().length ? '' : this.props.translate('workspace.editor.nameIsRequiredError')}
+                                    defaultValue={this.props.policy.name}
                                 />
                                 <View style={[styles.mt4]}>
                                     <Picker
+                                        inputID="currency"
                                         label={this.props.translate('workspace.editor.currencyInputLabel')}
-                                        onInputChange={currency => this.setState({currency})}
                                         items={this.getCurrencyItems()}
-                                        value={this.state.currency}
                                         isDisabled={hasVBA}
+                                        defaultValue={this.props.policy.outputCurrency}
                                     />
                                 </View>
                                 <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
                                     {this.props.translate('workspace.editor.currencyInputHelpText')}
                                 </Text>
                             </OfflineWithFeedback>
-                        </View>
+                        </Form>
                     )}
                 </WorkspacePageWithSections>
             </FullPageNotFoundView>

src/pages/workspace/bills/WorkspaceBillsPage.js

@@ -21,6 +21,7 @@ const propTypes = {
 
 const WorkspaceBillsPage = props => (
     <WorkspacePageWithSections
+        shouldUseScrollView
         headerText={props.translate('workspace.common.bills')}
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}

src/pages/workspace/card/WorkspaceCardPage.js

@@ -22,6 +22,7 @@ const propTypes = {
 
 const WorkspaceCardPage = props => (
     <WorkspacePageWithSections
+        shouldUseScrollView
         headerText={props.translate('workspace.common.card')}
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}

src/pages/workspace/invoices/WorkspaceInvoicesPage.js

@@ -21,6 +21,7 @@ const propTypes = {
 
 const WorkspaceInvoicesPage = props => (
     <WorkspacePageWithSections
+        shouldUseScrollView
         headerText={props.translate('workspace.common.invoices')}
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}

src/pages/workspace/reimburse/WorkspaceReimbursePage.js

@@ -23,6 +23,7 @@ const propTypes = {
 
 const WorkspaceReimbursePage = props => (
     <WorkspacePageWithSections
+        shouldUseScrollView
         headerText={props.translate('workspace.common.reimburse')}
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}

src/pages/workspace/travel/WorkspaceTravelPage.js

@@ -21,6 +21,7 @@ const propTypes = {
 
 const WorkspaceTravelPage = props => (
     <WorkspacePageWithSections
+        shouldUseScrollView
         headerText={props.translate('workspace.common.travel')}
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}