- more

app/components/Profile/EditProfile.js

@@ -1,48 +1,57 @@
+import { List } from 'immutable';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Text, TextInput, View } from 'react-native';
+import { Button, Picker, ScrollView, Text, TextInput, View } from 'react-native';
 import { Avatar } from 'react-native-elements';
 
 import { getEmailAvailability, getNomAvailability } from '../../api/profile.js';
 
 import EditNomDeBid from './EditNomDeBid.js';
+import PhoneListInput from './PhoneInput/PhoneListInput.js';
 import styles from './Profile.styles.js';
 
 const STRINGS = {
     CANCEL: 'Cancel',
+    NOM_HEADING: 'Nom de Bid',
+    PASSWORD_HEADING: 'Password',
+    PERSONAL_HEADING: 'A bit about you...',
     SAVE_PROFILE: 'Save profile',
 };
 
 export default class EditProfile extends Component {
     static get propTypes() {
         return {
-            addresses: PropTypes.array,
+            addresses: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
             avatar: PropTypes.string,
             cancelEditAction: PropTypes.func.isRequired,
             email: PropTypes.string,
             firstName: PropTypes.string,
             initials: PropTypes.string,
             isGeneratedNomDeBid: PropTypes.bool,
+            isRegsiteredAccount: PropTypes.bool,
             lastName: PropTypes.string,
             nomDeBid: PropTypes.string,
-            phones: PropTypes.array,
+            phones: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
             saveProfileAction: PropTypes.func.isRequired,
             saveProfileLabel: PropTypes.string,
+            showPasswordEntry: PropTypes.bool,
         };
     }
 
     static get defaultProps() {
         return {
-            addresses: null,
+            addresses: new List(),
             avatar: null,
             email: null,
             firstName: null,
             initials: null,
             isGeneratedNomDeBid: false,
+            isRegsiteredAccount: false,
             lastName: null,
             nomDeBid: null,
-            phones: null,
+            phones: new List(),
             saveProfileLabel: STRINGS.SAVE_PROFILE,
+            showPasswordEntry: false,
         };
     }
 
@@ -59,6 +68,7 @@ export default class EditProfile extends Component {
             invalidNomDeBid: false,
             nomDeBid: this.props.nomDeBid,
             password: this.props.password,
+            passwordsMismatch: false,
             phones: this.props.phones,
         };
 
@@ -67,15 +77,21 @@ export default class EditProfile extends Component {
     }
 
     _validateEmail() {
-        getEmailAvailability(this.state.email, (result) =>
-            this.setState('invalidEmail', !result.available),
-        );
+        getEmailAvailability(this.state.email)
+            .then(({ available = false }) =>
+                this.setState('invalidEmail', !available),
+            );
     }
 
     _validateNomDeBid() {
-        getNomAvailability(this.state.nomDeBid, (result) =>
-            this.setState('invalidNomDeBid', !result.available),
-        );
+        getNomAvailability(this.state.nomDeBid)
+            .then(({ available = false }) =>
+                this.setState('invalidNomDeBid', !available),
+            );
+    }
+
+    _validatePasswordMatch(password) {
+        this.setState({ passwordsMismatch: this.state.password !== password });
     }
 
     getProfileFromState() {
@@ -106,6 +122,9 @@ export default class EditProfile extends Component {
     }
 
     isFormComplete() {
+        const { showPasswordEntry } = this.props;
+        const { password } = this.state;
+
         return (
             !this.state.invalidEmail &&
             !this.state.invalidNomDeBid &&
@@ -113,27 +132,28 @@ export default class EditProfile extends Component {
             !!this.state.lastName &&
             !!this.state.email &&
             !!this.state.nomDeBid &&
-            !!this.state.phones.length &&
-            !!this.state.password
+            !!this.state.phones.size &&
+            ((showPasswordEntry && !!password) || !showPasswordEntry)
         );
     }
 
     render() {
-        const { isGeneratedNomDeBid } = this.props;
-        const { avatar, firstName, lastName } = this.state;
+        const { isGeneratedNomDeBid, isRegsiteredAccount, showPasswordEntry } = this.props;
+        const { addresses, avatar, firstName, lastName, phones } = this.state;
         const addressesTitle = 'Addresses';
         const numbersTitle = 'Numbers';
 
         return (
-            <View style={styles.profileFormWrap}>
-                <View style={styles.avatarWrap}>
+            <ScrollView style={styles.profileFormWrap}>
+                <View style={[styles.sectionWrap, styles.avatarWrap]}>
                     {avatar !== null ? (
                         <Avatar source={{ uri: this.state.avatar }} showEditButton />
                     ) : (
                         <Avatar title={this.props.initials} showEditButton />
                     )}
                 </View>
-                <View style={styles.nameWrap}>
+                <View style={[styles.sectionWrap, styles.nameWrap]}>
+                    <Text style={styles.groupHeading}>{STRINGS.PERSONAL_HEADING}</Text>
                     <TextInput
                         onChange={(text) => this.setState({ firstName: text })}
                         placeholder="first name"
@@ -147,7 +167,7 @@ export default class EditProfile extends Component {
                         value={this.state.lastName}
                     />
                 </View>
-                <View style={[styles.emailWrap, styles.requiredWrap]}>
+                <View style={[styles.sectionWrap, styles.emailWrap, styles.requiredWrap]}>
                     <TextInput
                         keyboardType="email-address"
                         onChangeText={(text) => this.setState({ email: text })}
@@ -157,27 +177,45 @@ export default class EditProfile extends Component {
                         value={this.state.email}
                     />
                 </View>
-                {isGeneratedNomDeBid && (
-                    <View style={[styles.nomWrap, styles.requiredWrap]}>
+                {showPasswordEntry && (
+                    <View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
+                        <Text style={styles.groupHeading}>{STRINGS.PASSWORD_HEADING}</Text>
+                        <TextInput
+                            onChangeText={(text) => this.setState({ password: text })}
+                            placeholder="password"
+                            secureTextEntry
+                            style={[styles.textInput, styles.requiredInput]}
+                        />
+                        <TextInput
+                            onEndEditing={(text) => this._validatePasswordMatch(text)}
+                            placeholder="re-enter password"
+                            secureTextEntry
+                            style={[styles.textInput, styles.requiredInput]}
+                        />
+                    </View>
+                )}
+                {(isGeneratedNomDeBid || !isRegsiteredAccount) && (
+                    <View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
+                        <Text style={styles.groupHeading}>{STRINGS.NOM_HEADING}</Text>
                         <EditNomDeBid
                             isGeneratedNomDeBid={isGeneratedNomDeBid}
-                            isStandalone={false}
+                            isStandalone
                             nomDeBid={this.state.nomDeBid}
                             updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
                         />
                     </View>
                 )}
-                <View style={styles.phonesWrap}>
-                    <Text style={[styles.groupLabel, styles.requiredLabel]}>{numbersTitle}</Text>
-                    {this.props.phones.length > 0 && (
-                        /* LIST PHONES */
-                        <View />
-                    )}
-                    <Button title="Add number" onPress={() => false} />
+                <View style={[styles.sectionWrap, styles.phonesWrap]}>
+                    <PhoneListInput
+                        handleAdd={(phones) => this.setState({ phones })}
+                        handleDelete={(phones) => this.setState({ phones })}
+                        handleEdit={(phones) => this.setState({ phones })}
+                        phones={phones}
+                    />
                 </View>
-                <View style={styles.addressesWrap}>
-                    <Text style={styles.groupLabel}>{addressesTitle}</Text>
-                    {this.props.addresses.length > 0 && (
+                <View style={[styles.sectionWrap, styles.addressesWrap]}>
+                    <Text style={styles.groupHeading}>{addressesTitle}</Text>
+                    {addresses !== null && addresses.size > 0 && (
                         /* LIST ADDRESSES */
                         <View />
                     )}
@@ -187,7 +225,7 @@ export default class EditProfile extends Component {
                     <Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
                     <Button title={STRINGS.CANCEL} onPress={this.handleCancel} />
                 </View>
-            </View>
+            </ScrollView>
         );
     }
 }