locales/en.json

@@ -541,7 +541,12 @@
     "hashtagTitle":"Hashtags",
     "hashtagStep":"Step 1 of 4",
     "hashtagInterest":"Some hashtags that may be of interest to you.",
-    "skipStep":"Skip"
+    "skipStep":"Skip",
+    "infoTitle":"Info",
+    "infoStep":"Step 2 of 4",
+    "infoMobileNumber":"Mobile Phone Number",
+    "infoLocation":"Location",
+    "infoDateBirth":"Date of Birth"
   },
   "wallet": {
     "inviteFriend":"Invite a Friend",

src/common/components/Input.js

 import React, { Component } from 'react';
-import {TextInput, Text, View, StyleSheet} from 'react-native';
+import {TextInput, Text, View, StyleSheet, TouchableOpacity} from 'react-native';
 import { ComponentsStyle } from '../../styles/Components';
 import i18n from '../services/i18n.service';
 import { CommonStyle } from '../../styles/Common';
+import IconMC from 'react-native-vector-icons/MaterialCommunityIcons';
+import PhoneInput from 'react-native-phone-input';
+import DateTimePicker from 'react-native-modal-datetime-picker';
 
 export default class Input extends Component {
+
+  state = {
+    datePickerVisible: false,
+  };
+
+  showDatePicker = () => {
+    this.setState({ datePickerVisible: true });
+  }
+
+  dismissDatePicker = () => {
+    this.setState({ datePickerVisible: false });
+  }
+
+  confirmDatePicker = (date) => {
+    this.props.onChangeText(date.toLocaleDateString());
+    this.dismissDatePicker();
+  }
+
+  textInput = () => {
+    return (
+      <TextInput
+        {...this.props}
+        style={[ComponentsStyle.loginInputNew, styles.shadow, this.props.style]}
+        placeholderTextColor="#444"
+        returnKeyType={'done'}
+        autoCapitalize={'none'}
+        underlineColorAndroid='transparent'
+        placeholder=''
+      />
+    );
+  }
+  
+  phoneInput = () => {
+    return (
+      <PhoneInput
+        {...this.props}
+        style={[ComponentsStyle.loginInputNew, styles.shadow, this.props.style]}
+        onChangePhoneNumber={this.props.onChangeText}
+        ref="phoneInput"
+        placeholder=''
+      />
+    );
+  }
+
+  dateInput = () => {
+    return (
+      <View>
+      <TouchableOpacity
+        {...this.props}
+        style={[ComponentsStyle.loginInputNew, styles.shadow, this.props.style]}
+        placeholderTextColor="#444"
+        returnKeyType={'done'}
+        autoCapitalize={'none'}
+        underlineColorAndroid='transparent'
+        placeholder=''
+        onPress={this.showDatePicker}
+      >
+        <Text>{this.props.value}</Text>
+      </TouchableOpacity>
+      <DateTimePicker
+        isVisible={this.state.datePickerVisible}
+        onConfirm={this.confirmDatePicker}
+        date={new Date()}
+        onCancel={this.dismissDatePicker}
+        mode='date'
+      />
+      </View>
+    );
+  }
+
+  renderInput = () => {
+    const inputType = this.props.inputType;
+    if (inputType) {
+      switch(inputType) {
+        case 'textInput':
+          return this.textInput();
+        case 'phoneInput':
+          return this.phoneInput();
+        case 'dateInput':
+          return this.dateInput();
+      }
+    }
+    return this.textInput();
+  }
+
   render() {
+    const optional = (<Text style={[styles.optional, CommonStyle.marginBottom2x]}>{"Optional"}</Text>);
+    const info = (<IconMC name="information-variant" size={16} />);
+
     return (
       <View style={[CommonStyle.flexContainer, CommonStyle.marginTop2x]}>
-        <Text style={[styles.label, CommonStyle.marginBottom2x]}>{this.props.placeholder}</Text>
-        <TextInput
-          {...this.props}
-          style={[ComponentsStyle.loginInputNew, this.props.style]}
-          placeholderTextColor="#444"
-          returnKeyType={'done'}
-          autoCapitalize={'none'}
-          underlineColorAndroid='transparent'
-          placeholder=''
-        />
+        <View style={styles.row}>
+          <View style={styles.row}>
+            <Text style={[styles.label]}>{this.props.placeholder}</Text>
+            {this.props.info && info}
+          </View>
+          {this.props.optional && optional}
+        </View>
+        {this.renderInput()}
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
   label: {
     color: '#9B9B9B',
     fontSize: 14,
     fontFamily: 'Roboto',
     marginLeft: 20,
+    marginRight: 5,
+  },
+  optional: {
+    color: '#9B9B9B',
+    fontSize: 14,
+    fontFamily: 'Roboto-Italic',
+    marginRight: 20,
+  },
+  shadow: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+    elevation: 1,
   },
 });

src/common/components/shapes/Rectangle.js

@@ -35,11 +35,11 @@ const styles = StyleSheet.create({
   shadow: {
     shadowColor: "#000",
     shadowOffset: {
-      width: 5,
-      height: 5,
+      width: 0,
+      height: 0,
     },
-    shadowOpacity: 0.8,
-    shadowRadius: 6.68,
+    shadowOpacity: 0.4,
+    shadowRadius: 10,
     elevation: 11,
   },
   triangle: {

src/onboarding/OnboardingScreenNew.js

@@ -24,7 +24,6 @@ import Wizard from '../common/components/Wizard';
 
 import SuggestedChannelsStep from './steps/SuggestedChannelsStep';
 import SuggestedGroupsStep from './steps/SuggestedGroupsStep';
-import ChannelSetupStep from './steps/ChannelSetupStep';
 import RewardsStep from './steps/RewardsStep';
 import WelcomeStepNew from './steps/WelcomeStepNew';
 import { CommonStyle as CS } from '../styles/Common';
@@ -32,6 +31,7 @@ import navigationService from '../navigation/NavigationService';
 import i18nService from '../common/services/i18n.service';
 import CenteredLoading from '../common/components/CenteredLoading';
 import HashtagsStepNew from './steps/HashtagsStepNew';
+import ChannelSetupStepNew from './steps/ChannelSetupStepNew';
 
 @observer
 @inject('onboarding', 'hashtag')
@@ -74,6 +74,7 @@ export default class OnboardingScreenNew extends Component {
     if (!completed_items.some(r => r == 'suggested_hashtags')) {
       steps.push({component: <HashtagsStepNew onNext={this.onNext}/>});
     }
+    steps.push({component: <ChannelSetupStepNew ref={r => this.channelSetup = r} onNext={this.onNext}/>});
     if (!completed_items.some(r => r == 'suggested_channels')) {
       steps.push({component: <SuggestedChannelsStep/>});
     }
@@ -81,13 +82,6 @@ export default class OnboardingScreenNew extends Component {
       // steps.push({component: <SuggestedGroupsStep/>});
     }
 
-    steps.push({
-      component: <ChannelSetupStep ref={r => this.channelSetup = r}/>,
-      onNext: async() => {
-        return await this.channelSetup.wrappedInstance.save();
-      }
-    });
-
     if (!completed_items.some(r => r == 'tokens_verification')) {
       steps.push({component: <RewardsStep onJoin={() => this.wizard.next()}/>});
     }

src/onboarding/steps/ChannelSetupStepNew.js

+import React, { Component } from 'react';
+
+import {
+  View,
+  Text,
+  TouchableHighlight,
+  StyleSheet,
+} from 'react-native';
+import { observer, inject } from 'mobx-react';
+
+import { CommonStyle as CS } from '../../styles/Common';
+import TagSelect from '../../common/components/TagSelect';
+import TagInput from '../../common/components/TagInput';
+import i18n from '../../common/services/i18n.service';
+import { Button } from 'react-native-elements';
+import { ComponentsStyle } from '../../styles/Components';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import Input from '../../common/components/Input';
+
+@inject('hashtag')
+@observer
+export default class ChannelSetupStepNew extends Component {
+
+  state = {
+    phoneNumber: '+1',
+    location: '',
+    birthDate: '',
+  };
+
+  setPhoneNumber = phoneNumber => this.setState({phoneNumber});
+  setLocation = location => this.setState({location});
+  setBirthDate = birthDate => this.setState({birthDate});
+
+  componentDidMount() {
+    this.props.hashtag.setAll(true);
+    this.props.hashtag.loadSuggested().catch(err => {
+      logService.exception(err);
+    });
+  }
+
+  render() {
+    return (
+      <View style={[CS.flexContainer, CS.columnAlignCenter]}>
+        <View style={styles.textsContainer}>
+          <Text style={[CS.onboardingTitle, CS.marginTop4x, CS.marginBottom3x]}>{i18n.t('onboarding.profileSetup')}</Text>
+          <Text style={CS.onboardingSubtitle}>{i18n.t('onboarding.infoTitle')}</Text>
+          <Text style={CS.onboardingSteps}>{i18n.t('onboarding.infoStep')}</Text>
+        </View>
+        <View style={styles.inputContainer}>
+          <Input
+            placeholder={i18n.t('onboarding.infoMobileNumber')}
+            onChangeText={this.setPhoneNumber}
+            value={this.state.phoneNumber}
+            editable={true}
+            optional={true}
+            info={"Tu hermana"}
+            inputType={'phoneInput'}
+          />
+          <Input
+            placeholder={i18n.t('onboarding.infoLocation')}
+            onChangeText={this.setLocation}
+            value={this.state.location}
+            editable={true}
+            optional={true}
+            info={"Tu hermana"}
+          />
+          <Input
+            placeholder={i18n.t('onboarding.infoDateBirth')}
+            onChangeText={this.setBirthDate}
+            value={this.state.birthDate}
+            editable={true}
+            optional={true}
+            info={"Tu hermana"}
+            inputType={'dateInput'}
+          />
+        </View>
+        <View style={[styles.containerButton]}>
+            <TouchableOpacity style={styles.skip} onPress={this.props.onNext}>
+              <Text style={styles.skipText}>{i18n.t('onboarding.skipStep')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity  style={styles.continue} onPress={this.props.onNext}>
+              <Text style={styles.continueText}>{i18n.t('continue')}</Text>
+            </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  containerButton: {
+    flex: 2,
+    flexDirection: 'row',
+    marginLeft: 10,
+    marginRight: 20,
+    marginBottom: 20,
+    marginTop: 40,
+    justifyContent: 'flex-end',
+    width: '80%',
+  },
+  continue: {
+    backgroundColor: "#5DBAC0",
+    borderRadius: 2,
+    paddingHorizontal: 30,
+    paddingVertical: 10,
+  },
+  continueText: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    lineHeight: 26,
+    fontWeight: "500",
+  },
+  skip: {
+    backgroundColor: "transparent",
+    borderRadius: 2,
+    paddingHorizontal: 30,
+    paddingVertical: 10,
+  },
+  skipText: {
+    color: '#9B9B9B',
+    fontSize: 16,
+    lineHeight: 21,
+  },
+  inputContainer: {
+    flex: 3,
+    marginLeft: 20,
+    marginRight: 20,
+    width: '90%',
+  },
+  textsContainer: {
+    flex: 3,
+    alignItems: 'center',
+  }
+});
\ No newline at end of file

src/onboarding/steps/HashtagsStepNew.js

@@ -14,6 +14,7 @@ import TagInput from '../../common/components/TagInput';
 import i18n from '../../common/services/i18n.service';
 import { Button } from 'react-native-elements';
 import { ComponentsStyle } from '../../styles/Components';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 
 @inject('hashtag')
 @observer
@@ -33,7 +34,7 @@ export default class HashtagsStepNew extends Component {
           <Text style={[CS.onboardingTitle, CS.marginTop4x, CS.marginBottom3x]}>{i18n.t('onboarding.profileSetup')}</Text>
           <Text style={CS.onboardingSubtitle}>{i18n.t('onboarding.hashtagTitle')}</Text>
           <Text style={CS.onboardingSteps}>{i18n.t('onboarding.hashtagStep')}</Text>
-          <Text style={[CS.fontM, CS.marginTop4x, CS.marginBottom3x]}>{i18n.t('onboarding.hashtagInterest')}</Text>
+          <Text style={[CS.linkNew, CS.marginTop4x, CS.marginBottom3x]}>{i18n.t('onboarding.hashtagInterest')}</Text>
         </View>
         <View style={styles.hashtagContainer}>
           <TagSelect
@@ -48,22 +49,12 @@ export default class HashtagsStepNew extends Component {
           />
         </View>
         <View style={[styles.containerButton]}>
-            <Button
-              onPress={this.props.onNext}
-              title={i18n.t('onboarding.skip')}
-              backgroundColor="#FFF"
-              borderRadius={2}
-              containerViewStyle={[styles.button, ComponentsStyle.loginButton]}
-              textStyle={ComponentsStyle.loginButtonText}
-            />
-            <Button
-              onPress={this.props.onNext}
-              title={i18n.t('continue')}
-              backgroundColor="#5DBAC0"
-              borderRadius={2}
-              containerViewStyle={[styles.button, ComponentsStyle.loginButton]}
-              textStyle={ComponentsStyle.loginButtonText}
-            />
+            <TouchableOpacity style={styles.skip} onPress={this.props.onNext}>
+              <Text style={styles.skipText}>{i18n.t('onboarding.skipStep')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity  style={styles.continue} onPress={this.props.onNext}>
+              <Text style={styles.continueText}>{i18n.t('continue')}</Text>
+            </TouchableOpacity>
         </View>
       </View>
     );
@@ -73,15 +64,36 @@ export default class HashtagsStepNew extends Component {
 const styles = StyleSheet.create({
   containerButton: {
     flex: 2,
+    flexDirection: 'row',
     marginLeft: 10,
     marginRight: 20,
     marginBottom: 20,
+    marginTop: 40,
     justifyContent: 'flex-end',
     width: '80%',
   },
-  button: {
-    marginTop: 40,
-    alignSelf: 'stretch',
+  continue: {
+    backgroundColor: "#5DBAC0",
+    borderRadius: 2,
+    paddingHorizontal: 30,
+    paddingVertical: 10,
+  },
+  continueText: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    lineHeight: 26,
+    fontWeight: "500",
+  },
+  skip: {
+    backgroundColor: "transparent",
+    borderRadius: 2,
+    paddingHorizontal: 30,
+    paddingVertical: 10,
+  },
+  skipText: {
+    color: '#9B9B9B',
+    fontSize: 16,
+    lineHeight: 21,
   },
   hashtagContainer: {
     flex: 3,

src/onboarding/steps/WelcomeStepNew.js

@@ -34,13 +34,12 @@ export default class WelcomeStep extends Component {
         <Text style={styles.privacy}>{i18nService.t('onboarding.welcomePrivacy')}</Text>
 
         <View style={[styles.containerButton]}>
-            <Text style={[CS.linkNew, {alignSelf: 'center'}]} onPress={ this.props.onFinish }>{i18nService.t('onboarding.welcomeLater')}</Text>
+            <Text style={[CS.linkNew, styles.later]} onPress={ this.props.onFinish }>{i18nService.t('onboarding.welcomeLater')}</Text>
             <Button
               onPress={this.props.onNext}
               title={i18nService.t('onboarding.welcomeSetup')}
-              backgroundColor="#5DBAC0"
               borderRadius={2}
-              containerViewStyle={[styles.button, ComponentsStyle.loginButton]}
+              buttonStyle={[styles.button]}
               textStyle={ComponentsStyle.loginButtonText}
             />
         </View>
@@ -59,8 +58,9 @@ const styles = StyleSheet.create({
     width: '80%',
   },
   button: {
-    marginTop: 40,
     alignSelf: 'stretch',
+    backgroundColor: "#5DBAC0",
+    borderRadius: 2,
   },
   privacy: {
     color: '#9B9B9B',
@@ -71,5 +71,9 @@ const styles = StyleSheet.create({
     marginRight: 20,
     marginTop: 20,
     marginBottom: 50,
+  },
+  later: {
+    alignSelf: 'center',
+    marginBottom: 40
   }
 });

src/styles/Common.js

@@ -613,4 +613,9 @@ export const CommonStyle = StyleSheet.create({
     fontSize: 11,
     lineHeight: 15,
   },
+  linkNew: {
+    color: '#9B9B9B',
+    fontSize: 15,
+    lineHeight: 20
+  }
 });