Merge pull request #3639 from Expensify/horus-connect-new-workspace-page

Connect New Workspace Page with the backend
Expensify · Jun 18, 2021 · 52c9ff3 · 52c9ff3
2 parents 7931eea + a9f3625
commit 52c9ff3
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 99 deletions.
diff --git a/assets/images/workspace-default-avatar.svg b/assets/images/workspace-default-avatar.svg
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -372,11 +372,9 @@ export default {
             getTheExpensifyCardAndMore: 'Get the Expensify Card and more',
             welcome: 'Welcome',
             chooseAName: 'Choose a name',
-            helpText: 'Need help getting setup? Request a call below and we’ll have someone reach out to you.',
+            helpText: 'Name your Workspace before enabling your Expensify Cards!',
             getStarted: 'Get started!',
-            editPhoto: 'Edit Photo',
-            uploadPhoto: 'Upload Photo',
-            requestCall: 'Request a call',
+            genericFailureMessage: 'An error occurred creating the workspace, please try again.',
         },
         invite: {
             invitePeople: 'Invite People',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -313,11 +313,9 @@ export default {
             getTheExpensifyCardAndMore: 'Consigue la Expensify Card y más',
             welcome: 'Bienvenido/a',
             chooseAName: 'Elige un nombre',
-            helpText: '¿Necesitas ayuda con la configuración? Pídenos una llamada y una persona de nuestro equipo te ayudará.',
+            helpText: '¡Dale un nombre a tu Workspace antes de activar tus Expensify Cards!',
             getStarted: '¡Empezar!',
-            uploadPhoto: 'Subir Foto',
-            editPhoto: 'Editar Foto',
-            requestCall: 'Concertar una llamada',
+            genericFailureMessage: 'Se ha producido un error al intentar crear el Workspace. Por favor, inténtalo de nuevo.',
         },
         invite: {
             invitePeople: 'Invitar a la gente',

diff --git a/src/libs/API.js b/src/libs/API.js
@@ -912,9 +912,9 @@ function Mobile_GetConstants(parameters) {
 }
 
 /**
- * @param {object} parameters
- * @param {number} [parameters.latitude]
- * @param {number} [parameters.longitude]
+ * @param {Object} parameters
+ * @param {Number} [parameters.latitude]
+ * @param {Number} [parameters.longitude]
  * @returns {Promise}
  */
 function GetPreferredCurrency(parameters) {
@@ -929,6 +929,17 @@ function GetCurrencyList() {
     return Mobile_GetConstants({data: ['currencyList']});
 }
 
+/**
+ * @param {Object} parameters
+ * @param {String} [parameters.type]
+ * @param {String} [parameters.policyName]
+ * @returns {Promise}
+ */
+function Policy_Create(parameters) {
+    const commandName = 'Policy_Create';
+    return Network.post(commandName, parameters);
+}
+
 export {
     Authenticate,
     BankAccount_Create,
@@ -978,4 +989,5 @@ export {
     Wallet_GetOnfidoSDKToken,
     GetPreferredCurrency,
     GetCurrencyList,
+    Policy_Create,
 };
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
@@ -1,11 +1,15 @@
 import _ from 'underscore';
 import Onyx from 'react-native-onyx';
-import {GetPolicySummaryList, GetPolicyList, Policy_Employees_Merge} from '../API';
+import {
+    GetPolicySummaryList, GetPolicyList, Policy_Employees_Merge, Policy_Create,
+} from '../API';
 import ONYXKEYS from '../../ONYXKEYS';
 import {formatPersonalDetails} from './PersonalDetails';
 import Growl from '../Growl';
 import CONST from '../../CONST';
 import {translate} from '../translate';
+import Navigation from '../Navigation/Navigation';
+import ROUTES from '../../ROUTES';
 
 const allPolicies = {};
 Onyx.connect({
@@ -141,8 +145,34 @@ function invite(login, welcomeNote, policyID) {
         });
 }
 
+/**
+ * Merges the passed in login into the specified policy
+ *
+ * @param {String} name
+ */
+function create(name) {
+    Policy_Create({type: CONST.POLICY.TYPE.FREE, policyName: name})
+        .then((data) => {
+            if (data.jsonCode !== 200) {
+                // Show the user feedback
+                const errorMessage = translateLocal('workspace.new.genericFailureMessage');
+                Growl.show(errorMessage, CONST.GROWL.ERROR, 5000);
+                return;
+            }
+
+            Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${data.policyID}`, {
+                policyID: data.policyID,
+                type: data.policy.type,
+                name: data.policy.name,
+            });
+
+            Navigation.navigate(ROUTES.getWorkspaceRoute(data.policyID));
+        });
+}
+
 export {
     getPolicySummaries,
     getPolicyList,
     invite,
+    create,
 };
diff --git a/src/pages/workspace/NewWorkspacePage.js b/src/pages/workspace/NewWorkspacePage.js
@@ -12,12 +12,8 @@ import styles from '../../styles/styles';
 import WorkspaceDefaultAvatar from '../../../assets/images/workspace-default-avatar.svg';
 import TextInputWithLabel from '../../components/TextInputWithLabel';
 import Button from '../../components/Button';
-import AttachmentPicker from '../../components/AttachmentPicker';
-import Icon from '../../components/Icon';
-import {DownArrow, Upload} from '../../components/Icon/Expensicons';
-import CreateMenu from '../../components/CreateMenu';
-import Switch from '../../components/Switch';
 import compose from '../../libs/compose';
+import {create} from '../../libs/actions/Policy';
 
 
 const propTypes = {
@@ -32,38 +28,15 @@ class NewWorkspacePage extends React.Component {
         super(props);
 
         this.state = {
-            isEditPhotoMenuVisible: false,
             name: '',
-            requestCall: false,
         };
 
-        this.createMenuItems = this.createMenuItems.bind(this);
+        this.submit = this.submit.bind(this);
     }
 
-    /**
-     * Create menu items list for avatar menu
-     *
-     * @param {Function} openPicker
-     * @returns {Array}
-     */
-    createMenuItems(openPicker) {
-        const menuItems = [
-            {
-                icon: Upload,
-                text: this.props.translate('workspace.new.uploadPhoto'),
-                onSelected: () => {
-                    openPicker({
-                        onPicked: () => {
-                            // TODO: connect with setWorkspaceAvatar function
-                        },
-                    });
-                },
-            },
-        ];
-
-        // TODO: Add option to remove avatar if the user doesn't like the one they chose.
-
-        return menuItems;
+    submit() {
+        const name = this.state.name.trim();
+        create(name);
     }
 
     render() {
@@ -80,38 +53,7 @@ class NewWorkspacePage extends React.Component {
                 />
 
                 <View style={[styles.pageWrapper, styles.flex1]}>
-                    {/* TODO: replace this with the Avatar component once we connect it with the backend */}
-                    <WorkspaceDefaultAvatar height={100} width={100} />
-
-                    <AttachmentPicker>
-                        {({openPicker}) => (
-                            <>
-                                <Button
-                                    style={[styles.alignSelfCenter, styles.mt3]}
-                                    onPress={() => this.setState({isEditPhotoMenuVisible: true})}
-                                    ContentComponent={() => (
-                                        <View style={[styles.flexRow]}>
-                                            <Icon src={DownArrow} />
-                                            <View style={styles.justifyContentCenter}>
-                                                <Text style={[styles.headerText, styles.ml2]}>
-                                                    {this.props.translate('workspace.new.editPhoto')}
-                                                </Text>
-                                            </View>
-                                        </View>
-                                    )}
-                                />
-                                <CreateMenu
-                                    isVisible={this.state.isEditPhotoMenuVisible}
-                                    onClose={() => this.setState({isEditPhotoMenuVisible: false})}
-                                    onItemSelected={() => this.setState({isEditPhotoMenuVisible: false})}
-                                    menuItems={this.createMenuItems(openPicker)}
-                                    anchorPosition={styles.createMenuPositionProfile}
-                                    animationIn="fadeInRight"
-                                    animationOut="fadeOutRight"
-                                />
-                            </>
-                        )}
-                    </AttachmentPicker>
+                    <WorkspaceDefaultAvatar height={80} width={80} />
 
                     <View style={[styles.mt6, styles.w100, styles.flex1]}>
                         <TextInputWithLabel
@@ -120,30 +62,14 @@ class NewWorkspacePage extends React.Component {
                             onChangeText={name => this.setState({name})}
                         />
                         <Text style={[styles.mt6, styles.textP]}>{this.props.translate('workspace.new.helpText')}</Text>
-                        <View
-                            style={[
-                                styles.mt3,
-                                styles.flexRow,
-                                styles.mb6,
-                                styles.justifyContentBetween,
-                                styles.alignItemsCenter,
-                            ]}
-                        >
-                            <View style={styles.flex4}>
-                                <Text style={styles.textMicro}>
-                                    {this.props.translate('workspace.new.requestCall')}
-                                </Text>
-                            </View>
-                            <View style={[styles.flex1, styles.alignItemsEnd]}>
-                                <Switch
-                                    isOn={this.state.requestCall}
-                                    onToggle={requestCall => this.setState({requestCall})}
-                                />
-                            </View>
-                        </View>
                     </View>
 
-                    <Button success style={[styles.w100]} text={this.props.translate('workspace.new.getStarted')} />
+                    <Button
+                        success
+                        style={[styles.w100]}
+                        text={this.props.translate('workspace.new.getStarted')}
+                        onPress={this.submit}
+                    />
                 </View>
             </ScreenWrapper>
         );