- Wiring up nom and phone registration bits

- Added guided registration

app/api/helpers.js

@@ -33,6 +33,11 @@ export const formatPostData = (body) => {
     return postData;
 };
 
+export const formatJsonData = (body) => {
+    console.log('formateJsonBody:', body);
+    return body; //JSON.stringify(body);
+};
+
 const parseQueryParamsString = (queryParams) => {
     if (typeof queryParams !== 'string') {
         return null;

app/api/index.js

@@ -1,6 +1,7 @@
 import {
     constructUrl,
     formatPostData,
+    formatJsonData,
     parseQueryParams,
     request,
     unwrapJson,
@@ -74,9 +75,15 @@ export const requestPost = (options) => {
         queryParams = [],
         requestOptions = {},
         isFormattedPostData = false,
+        shouldUseFormData = false,
     } = options;
 
     const params = parseQueryParams(queryParams || []);
+    let postData = isFormattedPostData ? body : null;
+
+    if (!postData) {
+        postData = shouldUseFormData ? formatPostData(body) : formatJsonData(body);
+    }
 
     if (params === null) {
         throw new Error('invalid queryParams');
@@ -88,7 +95,7 @@ export const requestPost = (options) => {
         ...DefaultRequestOptions,
         ...requestOptions,
         method: 'POST',
-        body: isFormattedPostData ? body : formatPostData(body),
+        body: postData,
     })
         .then(validateResponse)
         .then(unwrapJson);

app/api/profile.js

@@ -1,7 +1,7 @@
 import { API_ENDPOINTS, requestGet, requestPost } from './index.js';
 
 export const getEmailAvailability = (email) =>
-    requestGet(`${API_ENDPOINTS.VALIDATE_SIGNUP_EMAIL}/&{encodeURI(email)}`);
+    requestGet(`${API_ENDPOINTS.VALIDATE_SIGNUP_EMAIL}/${encodeURI(email)}`);
 
 export const getNomAvailaibility = (nomDeBid) =>
     requestGet(`${API_ENDPOINTS.VALIDATE_SIGNUP_NOM}/${encodeURI(nomDeBid)}`);

app/components/Profile/EditNomDeBid.js

@@ -22,21 +22,21 @@ export default function EditNomDeBid({
     updateNomDeBid,
 }) {
     const [newNom, setNomDeBid] = useState(isGeneratedNomDeBid || !nomDeBid ? '' : nomDeBid);
-    const [isNomValid, setValidNom] = useState(false);
+    const [isNomValid, setValidNom] = useState(null);
 
-    const _handleEndEditing = (nomDeBid) => {
+    const _handleEndEditing = () => {
-        getNomAvailaibility(nomDeBid).then((result) => {
+        getNomAvailaibility(newNom).then((result) => {
             setValidNom(result.available);
 
             if (isStandalone) {
-                updateNomDeBid({ nomDeBid });
+                updateNomDeBid(newNom);
             }
         });
     };
 
     const _handleSubmitNom = () => {
         if (isNomValid) {
-            updateNomDeBid({ newNom });
+            updateNomDeBid(newNom);
         }
     };
 
@@ -48,12 +48,19 @@ export default function EditNomDeBid({
         <View style={styles.profileFormWrap}>
             <Text style={styles.hintText}>{explanationString}</Text>
             <TextInput
+                autoCapitalize="none"
                 onChangeText={(text) => setNomDeBid(text)}
-                onEndEditing={(text) => _handleEndEditing(text)}
+                onEndEditing={() => _handleEndEditing()}
                 placeholder="nom de bid"
                 style={[styles.textInput, styles.requiredInput]}
                 value={newNom}
             />
+            {isNomValid === false && (
+                <Text style={{color:'red'}}>Nom De Bid is taken!</Text>
+            )}
+            {isNomValid === true && (
+                <Text style={{color:'green'}}>Nom De Bid is available!</Text>
+            )}
             {!isStandalone && (
                 <Button
                     title={STRINGS.SUBMIT_NOM}

app/components/Profile/EditProfile.js

@@ -11,10 +11,12 @@ import PhoneListInput from './PhoneInput/PhoneListInput.js';
 import styles from './Profile.styles.js';
 
 const STRINGS = {
+    AVATAR_HEADING: 'Want to add a picture?',
     CANCEL: 'Cancel',
-    NOM_HEADING: 'Nom de Bid',
+    EMAIL_HEADING: 'Email (this will be your username)',
-    PASSWORD_HEADING: 'Password',
+    NOM_HEADING: 'and a Nom de Bid - your bidding alias!',
-    PERSONAL_HEADING: 'A bit about you...',
+    PASSWORD_HEADING: 'For security, let\'s choose a password',
+    PERSONAL_HEADING: 'Great! And now a bit about you...',
     SAVE_PROFILE: 'Save profile',
 };
 
@@ -28,6 +30,7 @@ export default class EditProfile extends Component {
             firstName: PropTypes.string,
             initials: PropTypes.string,
             isGeneratedNomDeBid: PropTypes.bool,
+            isGuided: PropTypes.bool,
             isRegsiteredAccount: PropTypes.bool,
             lastName: PropTypes.string,
             nomDeBid: PropTypes.string,
@@ -46,6 +49,7 @@ export default class EditProfile extends Component {
             firstName: null,
             initials: null,
             isGeneratedNomDeBid: false,
+            isGuided: false,
             isRegsiteredAccount: false,
             lastName: null,
             nomDeBid: null,
@@ -55,6 +59,16 @@ export default class EditProfile extends Component {
         };
     }
 
+    static validatePasswordMatch(password, passwordCheck) {
+        if ((!password || !passwordCheck) ||
+            (password || passwordCheck && password.length === passwordCheck.length)
+        ){
+            return null;
+        }
+
+        return password === passwordCheck;
+    }
+
     constructor(props) {
         super(props);
 
@@ -64,11 +78,10 @@ export default class EditProfile extends Component {
             email: this.props.email,
             firstName: this.props.firstName,
             lastName: this.props.lastName,
-            invalidEmail: false,
+            invalidEmail: null,
-            invalidNomDeBid: false,
             nomDeBid: this.props.nomDeBid,
             password: this.props.password,
-            passwordsMismatch: false,
+            passwordCheck: null,
             phones: this.props.phones,
         };
 
@@ -78,32 +91,22 @@ export default class EditProfile extends Component {
 
     _validateEmail() {
         getEmailAvailability(this.state.email)
-            .then(({ available = false }) =>
+            .then((result) => {
-                this.setState('invalidEmail', !available),
+                console.log(`_validateEmail => getEmailAvailability(${this.state.email}):`, result);
-            );
+                this.setState({ invalidEmail: !result.available });
-    }
+            });
-
-    _validateNomDeBid() {
-        getNomAvailability(this.state.nomDeBid)
-            .then(({ available = false }) =>
-                this.setState('invalidNomDeBid', !available),
-            );
-    }
-
-    _validatePasswordMatch(password) {
-        this.setState({ passwordsMismatch: this.state.password !== password });
     }
 
     getProfileFromState() {
         return {
-            addresses: this.state.addresses,
+            addresses: this.state.addresses.toArray(),
             avatar: this.state.avatar,
             email: this.state.email,
             firstName: this.state.firstName,
             lastName: this.state.lastName,
             nomDeBid: this.state.nomDeBid,
             password: this.state.password,
-            phones: this.state.phones,
+            phones: this.state.phones.toArray(),
         };
     }
 
@@ -123,7 +126,7 @@ export default class EditProfile extends Component {
 
     isFormComplete() {
         const { showPasswordEntry } = this.props;
-        const { password } = this.state;
+        const { password, passwordCheck } = this.state;
 
         return (
             !this.state.invalidEmail &&
@@ -133,96 +136,130 @@ export default class EditProfile extends Component {
             !!this.state.email &&
             !!this.state.nomDeBid &&
             !!this.state.phones.size &&
-            ((showPasswordEntry && !!password) || !showPasswordEntry)
+            ((showPasswordEntry && EditProfile.validatePasswordMatch(password, passwordCheck)) || !showPasswordEntry)
         );
     }
 
     render() {
-        const { isGeneratedNomDeBid, isRegsiteredAccount, showPasswordEntry } = this.props;
+        const { isGeneratedNomDeBid, isGuided, isRegsiteredAccount, showPasswordEntry } = this.props;
-        const { addresses, avatar, firstName, lastName, phones } = this.state;
+        const { addresses, avatar, firstName, invalidEmail, lastName, password, passwordCheck, phones } = this.state;
         const addressesTitle = 'Addresses';
         const numbersTitle = 'Numbers';
 
         return (
             <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.sectionWrap, styles.nameWrap]}>
-                    <Text style={styles.groupHeading}>{STRINGS.PERSONAL_HEADING}</Text>
-                    <TextInput
-                        onChange={(text) => this.setState({ firstName: text })}
-                        placeholder="first name"
-                        style={[styles.textInput, styles.requiredInput]}
-                        value={this.state.firstName}
-                    />
-                    <TextInput
-                        onChange={(text) => this.setState({ lastName: text })}
-                        placeholder="last name"
-                        style={[styles.textInput, styles.requiredInput]}
-                        value={this.state.lastName}
-                    />
-                </View>
                 <View style={[styles.sectionWrap, styles.emailWrap, styles.requiredWrap]}>
+                    <Text style={styles.groupHeading}>{STRINGS.EMAIL_HEADING}</Text>
                     <TextInput
+                        autoCapitalize="none"
                         keyboardType="email-address"
                         onChangeText={(text) => this.setState({ email: text })}
                         onEndEditing={(text) => this._validateEmail(text)}
                         placeholder="email address"
                         style={[styles.textInput, styles.requiredInput]}
-                        value={this.state.email}
+                        value={this.state.email || ''}
                     />
-                </View>
+                    {invalidEmail === true && (
-                {showPasswordEntry && (
+                        <View style={styles.emailTaken}>
-                    <View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
+                            <Text style={{color:'red'}}>{`You've already registered!`}</Text>
-                        <Text style={styles.groupHeading}>{STRINGS.PASSWORD_HEADING}</Text>
+                            <Button title="Forgot Password" onPress={() => {}} />
-                        <TextInput
+                        </View>
-                            onChangeText={(text) => this.setState({ password: text })}
+                    )}
-                            placeholder="password"
+                    {invalidEmail === false && (
-                            secureTextEntry
+                        <Text style={{color:'green'}}>{`Great, lets add a bit more detail...`}</Text>
-                            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
-                            nomDeBid={this.state.nomDeBid}
-                            updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
-                        />
-                    </View>
-                )}
-                <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.sectionWrap, styles.addressesWrap]}>
-                    <Text style={styles.groupHeading}>{addressesTitle}</Text>
-                    {addresses !== null && addresses.size > 0 && (
-                        /* LIST ADDRESSES */
-                        <View />
                     )}
-                    <Button title="Add address" onPress={() => false} />
                 </View>
-                <View style={styles.register}>
+                {(!isGuided || (isGuided && invalidEmail === false)) && (
-                    <Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
+                    <View style={styles.rollDownPanel}>
+                        <View style={[styles.sectionWrap, styles.nameWrap]}>
+                            <Text style={styles.groupHeading}>{STRINGS.PERSONAL_HEADING}</Text>
+                            <TextInput
+                                onChange={(text) => this.setState({ firstName: text })}
+                                placeholder="first name"
+                                style={[styles.textInput, styles.requiredInput]}
+                                value={this.state.firstName || ''}
+                            />
+                            <TextInput
+                                onChange={(text) => this.setState({ lastName: text })}
+                                placeholder="last name"
+                                style={[styles.textInput, styles.requiredInput]}
+                                value={this.state.lastName || ''}
+                            />
+                        </View>
+                        {showPasswordEntry &&
+                            (!isGuided || (isGuided && firstName !== null && lastName !== null)) &&
+                        (
+                            <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
+                                    onChangeText={(text) => this.setState({ passwordCheck: text })}
+                                    placeholder="re-enter password"
+                                    secureTextEntry
+                                    style={[styles.textInput, styles.requiredInput]}
+                                />
+                                {EditProfile.validatePasswordMatch(password, passwordCheck) === true && (
+                                    <Text style={{ color: 'green' }}>{`That's a match!`}</Text>
+                                )}
+                                {EditProfile.validatePasswordMatch(password, passwordCheck) === false && (
+                                    <Text style={{ color: 'red' }}>{`Well that's not a match...`}</Text>
+                                )}
+                            </View>
+                        )}
+                        {(isGeneratedNomDeBid || !isRegsiteredAccount) &&
+                            (!isGuided || (isGuided && EditProfile.validatePasswordMatch(password, passwordCheck) === true)) &&
+                        (
+                            <View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
+                                <Text style={styles.groupHeading}>{STRINGS.NOM_HEADING}</Text>
+                                <EditNomDeBid
+                                    isGeneratedNomDeBid={isGeneratedNomDeBid}
+                                    isStandalone
+                                    nomDeBid={this.state.nomDeBid}
+                                    updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
+                                />
+                            </View>
+                        )}
+                        {(!isGuided || (isGuided && this.state.nomDeBid !== null)) && (
+                            <View style={styles.rollDownPanel}>
+                                <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.sectionWrap, styles.addressesWrap]}>
+                                    <Text style={styles.groupHeading}>{addressesTitle}</Text>
+                                    {addresses !== null && addresses.size > 0 && (
+                                        /* LIST ADDRESSES */
+                                        <View />
+                                    )}
+                                    <Button title="Add address" onPress={() => false} />
+                                </View>
+                                <View style={[styles.sectionWrap, styles.avatarWrap]}>
+                                    <Text style={styles.groupHeading}>{STRINGS.AVATAR_HEADING}</Text>
+                                    {avatar !== null ? (
+                                        <Avatar source={{ uri: this.state.avatar }} showEditButton />
+                                    ) : (
+                                        <Avatar title={this.props.initials} showEditButton />
+                                    )}
+                                </View>
+                            </View>
+                        )}
+                        {(!isGuided || (isGuided && phones !== null && phones.size > 0)) && (
+                            <View style={styles.register}>
+                                <Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
+                            </View>
+                        )}
+                    </View>
+                )}
+                <View style={styles.cancelWrap}>
                     <Button title={STRINGS.CANCEL} onPress={this.handleCancel} />
                 </View>
             </ScrollView>

app/components/Profile/PhoneInput/PhoneListInput.js

@@ -34,7 +34,12 @@ export default class PhoneListInput extends Component {
 
     constructor(props) {
         super(props);
+
         this.state = { ...defaultState };
+
+        this.handleAdd = this.handleAdd.bind(this);
+        this.handleEdit = this.handleEdit.bind(this);
+        this.handleEditCancel = this.handleEditCancel.bind(this);
     }
 
     handleAdd() {
@@ -78,8 +83,8 @@ export default class PhoneListInput extends Component {
                         {phones.map((phone, index) =>
                             <PhoneListItem
                                 index={index}
-                                label={phone.get('label')}
+                                label={phone.label}
-                                number={phone.get('number')}
+                                number={phone.number}
                                 handleDelete={this.props.handleDelete}
                                 handleEdit={this.props.handleEdit ? this.handleEdit : null}
                                 handleEditStart={this.handleEditStart}
@@ -88,7 +93,7 @@ export default class PhoneListInput extends Component {
                     </View>
                 )}
                 <TextInput
-                    onChangeText={(text) => this.setState({ editingPhone: text })}
+                    onChangeText={(text) => this.setState({ newPhone: text })}
                     placeholder="phone number"
                     style={[styles.textInput, styles.requiredInput]}
                     value={this.state.newPhone}
@@ -97,13 +102,19 @@ export default class PhoneListInput extends Component {
                     onValueChange={(type, index) => this.setState({ newPhoneType: type })}
                     selectedValue={this.state.newPhoneType}
                 >
-                    {PHONE_TYPES.map((type) => <Picker.Item label={type.label} value={type.value} />)}
+                    {PHONE_TYPES.map((type) => <Picker.Item key={type.value} {...type} />)}
                 </Picker>
                 <Button
                     disabled={!this.state.newPhone && !this.state.newPhoneType}
                     onPress={isEditing ? () => this.handleEdit(index) : this.handleAdd}
                     title={isEditing ? 'update' : 'add number'}
                 />
+                {isEditing && (
+                    <Button
+                        onPress={this.handleEditCancel}
+                        title="cancel"
+                    />
+                )}
             </View>
         );
     }

app/components/Profile/PhoneInput/PhoneListItem.js

@@ -9,12 +9,12 @@ export default function PhoneListItem({ index, label, number, handleDelete, hand
     return (
         <View style={styles.listItem}>
             <View style={styles.listValue}>
-                <Text style={styles.value}>{phone.get('number')}</Text>
+                <Text style={styles.value}>{number}</Text>
-                <Text style={styles.label}>{phone.get('label')}</Text>
+                <Text style={styles.label}>{label}</Text>
             </View>
             <View style={styles.listActions}>
-                {handleEdit !== null && <Button title={`Edit`} onPress={() => this.handleEditStart(index)} />}
+                {handleEdit !== null && <Button title={`Edit`} onPress={() => handleEditStart(index)} />}
-                <Button title={`X`} onPress={() => this.props.handleDelete(index)} />
+                <Button title={`X`} onPress={() => handleDelete(index)} />
             </View>
         </View>
     );

app/components/Profile/Profile.js

@@ -7,6 +7,7 @@ import ViewProfile from './ViewProfile.container.js';
 
 export default function Profile({
     cancelEditAction,
+    isGuidedRegistration,
     isInEditMode,
     saveProfileAction,
     saveProfileLabel,
@@ -28,6 +29,7 @@ export default function Profile({
             {editMode ? (
                 <EditProfile
                     cancelEditAction={_cancelEditAction}
+                    isGuided={isGuidedRegistration}
                     saveProfileAction={_saveProfileAction}
                     saveProfileLabel={saveProfileLabel}
                 />
@@ -40,12 +42,14 @@ export default function Profile({
 
 Profile.propTypes = {
     cancelEditAction: PropTypes.func.isRequired,
+    isGuidedRegistration: PropTypes.bool,
     isInEditMode: PropTypes.bool,
     saveProfileAction: PropTypes.func.isRequired,
     saveProfileLabel: PropTypes.string,
 };
 
 Profile.defaultProps = {
+    isGuidedRegistration: false,
     isInEditMode: false,
     saveProfileLabel: null,
 };

app/components/Profile/Profile.styles.js

@@ -12,9 +12,9 @@ export default StyleSheet.create({
     sectionWrap: {
         marginBottom: 15,
     },
-    avatarWrap: {
+    emailWrap: {
         marginBottom: 40,
-        marginTop: 30,
+        marginTop: 20,
         textAlign: 'center',
     },
     groupHeading: {

app/constants/constants.js

@@ -52,10 +52,10 @@ export const PERMISSIONS = {
     FACEBOOK: ['email', 'public_profile'],
 };
 
-export const PHONE_TYPES = {
+export const PHONE_TYPES = [
-    HOME: { label: 'home', value: 'home' },
+    { label: 'home', value: 'home' },
-    MOBILE: { label: 'mobile', value: 'mobile' },
+    { label: 'mobile', value: 'mobile' },
-    WORK: { label: 'work', value: 'work' },
+    { label: 'work', value: 'work' },
-};
+];
 
-export const PHONE_TYPE_DEFAULT = PHONE_TYPES.HOME.value;
+export const PHONE_TYPE_DEFAULT = PHONE_TYPES[0].value;

app/screens/Register.js

@@ -22,6 +22,7 @@ export default function Register({ doRegistration, navigation }) {
             <Text style={styles.heading}>{title}</Text>
             <EditProfile
                 cancelEditAction={() => navigation.goBack()}
+                isGuided
                 saveProfileAction={_doRegistration}
                 saveProfileLabel="Register"
                 showPasswordEntry