- Stuff

app/screens/Profile.container.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import { fetchProfile, updateProfile } from '../actions/profile.js';
-import { getNomDeBid, getProfile, isAllowedToBid } from '../selectors/profile.js';
+import { getProfile, isAllowedToBid } from '../selectors/profile.js';
 
 import Profile from './Profile.js';
 
@@ -13,13 +13,8 @@ const matchStateToProps = (state) => {
         hasLinkedFacebook: profile.get('hasLinkedFacebook'),
         hasLinkedGoogle: profile.get('hasLinkedGoogle'),
         hasLocalAccount: profile.get('hasLocalAccount'),
-        hasRegisteredAcccount: profile.get('hasRegisteredAcccount'),
-        id: profile.get('id'),
         isAllowedToBid: isAllowedToBid(state),
         isVerified: profile.get('isVerified'),
-        lastName: profile.get('lastName'),
-        nomDeBid: getNomDeBid(state),
-        organizationIdentifier: profile.get('organizationIdentifier'),
         paymentToken: profile.get('paymentToken'),
     };
 };

app/screens/Profile.js

@@ -1,26 +1,87 @@
 import React, { Component } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
+
+import ProfileUtility from '../components/Profile/Profile.container.js';
+
+import styles from './Profile.styles.js';
 
 export default class Profile extends Component {
+
+    static get propTypes() {
+        return {
+            hasLinkedApple: PropTypes.bool,
+            hasLinkedFacebook: PropTypes.bool,
+            hasLinkedGoogle: PropTypes.bool,
+            hasLocalAccount: PropTypes.bool,
+            isAllowedToBid: PropTypes.bool,
+            isVerified: PropTypes.bool,
+            paymentToken: PropTypes.string,
+            updateProfile: PropTypes.func.isRequired,
+        };
+    }
+
+    static get defaultProps() {
+        return {
+            hasLinkedApple: false,
+            hasLinkedFacebook: false,
+            hasLinkedGoogle: false,
+            hasLocalAccount: false,
+            isAllowedToBid: false,
+            isVerified: false,
+            paymentToken: null,
+        };
+    }
+
     render() {
+        const {
+            hasLinkedApple,
+            hasLinkedFacebook,
+            hasLinkedGoogle,
+            hasLocalAccount,
+            isAllowedToBid,
+            isVerified,
+            paymentToken,
+            updateProfile,
+        } = this.props;
+
         return (
             <View style={styles.container}>
-                <Text style={styles.title}>Profile</Text>
+                {!isVerified && (
+                    <View style={styles.alertBar}>
+                        <Text style={styles.alert}>
+                            {`Your acount has not been verified, please check your email.`}
+                        </Text>
+                    </View>
+                )}
+
+                <ProfileUtility
+                    cancelEditAction={() => false}
+                    saveProfileAction={updateProfile}
+                    saveProfileLabel="Update profile"
+                />
+
+                {!isAllowedToBid ? (
+                    /* ADD PAYMENT METHOD */
+                ) : (
+                    /* SHOW/EDIT PAYMENT METHOD */
+                )}
+
+                {!hasLocalAccount && (
+                    /* CREATE LOCAL ACCOUNT PASSWORD CTA */
+                )}
+
+                {hasLinkedApple && (
+                    /* APPLE LINK/UNLINK */
+                )}
+
+                {hasLinkedFacebook && (
+                    /* FACEBOOK LINK/UNLINK */
+                )}
+
+                {hasLinkedGoogle && (
+                    /* GOOGLE LINK/UNLINK */
+                )}
             </View>
         );
     }
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#F5FCFF',
-    },
-    title: {
-        fontSize: 20,
-        textAlign: 'center',
-        margin: 10,
-    },
-});

app/screens/Profile.styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    title: {
+        fontSize: 20,
+        textAlign: 'center',
+        margin: 10,
+    },
+});

app/screens/Register.js

@@ -1,132 +1,32 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Text, View } from 'react-native';
 
+import EditProfile from '../components/Profile/EditProfile.container.js';
+
 import styles from './Register.styles.js';
 
-const STRINGS = {
-  NOM_EXPLANATION: 'Selecting a nom de bid allows you to bid anonymously - or not. By default, we\'ll use your first initial and last name.',
-  SUBMIT_REGISTRATION: 'Register',
-};
+export default function Register({ doRegistration, navigation }) {
 
-export default class Register extends Component {
-    static get propTypes() {
-        return {
-            checkEmail: PropTypes.func.isRequired,
-            checkNomDeBid: PropTypes.func.isRequired,
-            doRegistration: PropTypes.func.isRequired,
-            //       invalidEmail: PropTypes.bool.isRequired,
-            //       invalidNomDeBid: PropTypes.bool.isRequired,
-        };
-    }
-
-    constructor() {
-        super(props);
-
-        this.state = {
-            addresses: [],
-            avatar: null,
-            email: null,
-            firstName: null,
-            lastName: null,
-            nomDeBid: null,
-            invalidEmail: false,
-            invalidNomDeBid: false,
-            password: null,
-            phones: [],
-        };
-
-        this._doRegistration = this._doRegistration.bind(this);
-    }
-
-    _doRegistration() {
-        if (!this.isFormComplete()) {
-            console.error('Incomplete form... how did the button become enabled?');
-            alert('Please complete all of the required fields. They have bold labels.');
+    const _doRegistration = (profile) => {
+        if (!profile) {
             return;
         }
 
-        this.props.doRegistration(this.getUserRegistration());
-    }
+        doRegistration(profile);
+    };
 
-    _validateEmail() {
-        this.props.checkEmail(this.state.email, (valid) => this.setState('invalidEmail', valid));
-    }
-
-    _validateNomDeBid() {
-        this.props.checkNomDeBid(this.state.nomDeBid, (valid) =>
-            this.setState('invalidNomDeBid', valid),
-        );
-    }
-
-    getUserRegistration() {
-        return {
-            addresses: this.state.addresses,
-            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,
-        };
-    }
-
-    isFormComplete() {
-        return (
-            !this.state.invalidEmail &&
-            !this.state.invalidNomDeBid &&
-            !!this.state.firstName &&
-            !!this.state.lastName &&
-            !!this.state.email &&
-            !!this.state.nomDeBid &&
-            !!this.state.phones.length &&
-            !!this.state.password
-        );
-    }
-
-  render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.title}>Register</Text>
-        <View style={styles.nameWrap}>
-          <TextInput
-            onChange={(text) => this.setState({ firstName: text })}
-            placeholder="first name"
-            style={styles.textInput}
-            value={this.state.firstName}
+          <Text style={styles.heading}>Register</Text>
+          <EditProfile
+              cancelEditProfile={() => navigation.goBack()}
+              saveProfileAction={doRegistration}
+              saveProfileLabel="Register"
           />
-          <TextInput
-            onChange={(text) => this.setState({ lastName: text })}
-            placeholder="last name"
-            style={styles.textInput}
-            value={this.state.lastName}
-          />
-        </View>
-        <View style={styles.emailWrap}>
-          <TextInput
-            keyboardType="email-address"
-            onChangeText={(text) => _updateState('username', text)}
-            onEndEditing={(text) => this._validateEmail(text)}
-            placeholder="email address"
-            style={styles.textInput}
-            value={this.state.email}
-          />
-        </View>
-        <View style={styles.nomWrap}>
-          <Text style={styles.hintText}>{STRINGS.NOM_EXPLANATION}</Text>
-          <TextInput
-            keyboardType="email-address"
-            onChangeText={(text) => _updateState('username', text)}
-            onEndEditing={(text) => this._validateEmail(text)}
-            placeholder="email address"
-            style={styles.textInput}
-            value={this.state.email}
-          />
-        </View>
-        <View style={styles.register}>
-          <Button title={STRINGS.SUBMIT_REGISTRATION} onPress={this._doRegistration} />
-        </View>
       </View>
     );
-  }
 }
+
+Register.propTypes = {
+    doRegistration: PropTypes.func.isRequired,
+};

app/screens/Register.styles.js

@@ -1,12 +1,9 @@
 import { StyleSheet } from 'react-native';
 
-export default (styles = StyleSheet.create({
+export default StyleSheet.create({
     container: {
         flex: 1,
         flexDirection: 'column',
     },
-    title: {},
-    localLogin: {},
-    services: {},
-    register: {},
-}));
+    heading: {},
+});

app/screens/SignInOrRegister.js

@@ -1,37 +1,24 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
-import { Button } from 'react-native-elements';
 
 import FacebookLogin from '../components/Login/FacebookLogin.container.js';
 import LocalLogin from '../components/Login/LocalLogin.container.js';
 
 import styles from './SignInOrRegister.styles.js';
 
-export default class SignInOrRegister extends Component {
-    constructor() {
-        super(props);
-
-        this._doRegistration = this._doRegistration.bind(this);
-    }
-
-    _doRegistration() {
-        this.props.navigation.navigate('Register');
-    }
-
-    render() {
-        return (
-            <View style={styles.container}>
-                <Text style={styles.title}>Sign In or Register</Text>
-                <View style={styles.localLogin}>
-                    <LocalLogin />
-                </View>
-                <View style={styles.services}>
-                    <FacebookLogin />
-                </View>
-                <View style={styles.register}>
-                    <Button title="Signup with Email" onPress={this._doRegistration} />
-                </View>
+export default function SignInOrRegister({ navigation }) {
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Sign In or Register</Text>
+            <View style={styles.localLogin}>
+                <LocalLogin />
             </View>
-        );
-    }
+            <View style={styles.services}>
+                <FacebookLogin />
+            </View>
+            <View style={styles.register}>
+                <Button title="Signup with Email" onPress={() => navigation.navigate('Register')} />
+            </View>
+        </View>
+    );
 }