edit header home

src/assets/images.js

@@ -59,6 +59,8 @@ const images = {
   noti: require('./images/noti1.png'),
   iconCopy: require('./images/iconCopy.png'),
   iconIntroduct: require('./images/iconIntroduct.png'),
+  iconBtnGreen: require('./images/iconBtnGreen.png'),
+  iconCheck: require('./images/iconCheck.png'),
 };
 
 export default images;

src/components/Header/HeaderHome.js

@@ -26,12 +26,85 @@ import {
   TRANSFER,
   HISTORY,
   PROFILE,
+  AccountVerification,
 } from '../../routers/ScreenNames';
 
-const HeaderHome = (props) => {
+const renderWallet = (status) => {
   const navigate = useNavigation();
+  if (status == 3)
+    return (
+      <View style={{flex: 1, flexDirection: 'row'}}>
+        <View style={styles.containerWallet}>
+          <Text style={styles.txtWallet}>Tài khoản ví</Text>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
+            <Text style={styles.txtUnit}>Đ</Text>
+          </View>
+        </View>
+        <View style={{width: 1, backgroundColor: '#EDEDF1', height: '100%'}} />
+
+        <View style={styles.containerWallet}>
+          <Text style={styles.txtWallet}>Tài khoản CQG</Text>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
+            <Text style={styles.txtUnit}>Đ</Text>
+          </View>
+        </View>
+      </View>
+    );
+  if (status == 4)
+    return (
+      <View style={{flex: 1, flexDirection: 'row'}}>
+        <View style={styles.containerWallet}>
+          <Text style={styles.txtWallet}>Tài khoản ví</Text>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
+            <Text style={styles.txtUnit}>Đ</Text>
+          </View>
+        </View>
+        <View style={{width: 1, backgroundColor: '#EDEDF1', height: '100%'}} />
 
-  console.log();
+        <View style={styles.containerWallet}>
+          <TouchableOpacity style={styles.btn}>
+            <Text style={styles.txtWhite}>Mở tài khoản thật</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <TouchableOpacity
+        disabled={status == 2 ? true : false}
+        onPress={() => navigate.navigate(AccountVerification)}>
+        <ImageBackground
+          imageStyle={{borderRadius: 10}}
+          style={{
+            width: 320,
+            height: 60,
+            borderRadius: 10,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          source={R.images.iconBtnGreen}>
+          <Text style={{fontSize: getFontXD(52), color: 'white'}}>
+            {status == 2 ? 'Chờ xác minh' : 'Xác minh tài khoản'}
+          </Text>
+        </ImageBackground>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const renderLabel = (status) => {
+  if (status == 1) return <Text style={{color: '#E3434F'}}>Chưa xác minh</Text>;
+  if (status == 2) return <Text style={{color: '#FFB721'}}>Chờ xác minh</Text>;
+  if (status == 3) return <Text style={{color: '#17B217'}}>Đã xác minh</Text>;
+};
+
+const HeaderHome = (props) => {
+  const navigate = useNavigation();
+  console.log(props.user.status);
 
   const copyToClipboard = () => {
     Alert.alert('Đã sao chép!');
@@ -43,13 +116,25 @@ const HeaderHome = (props) => {
       <ImageBackground style={styles.img} source={R.images.headerHome}>
         <StatusBar backgroundColor="transparent" translucent={true} />
       </ImageBackground>
-      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+      <View
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
         <View style={styles.containerTop}>
           <View style={styles.containerInfor}>
             <Image source={R.images.avartar} style={styles.imgAvatar} />
             <View style={styles.wrapRight}>
               <TouchableOpacity onPress={() => navigate.navigate(PROFILE)}>
+                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                   <Text style={styles.txtName}>{props.user.fullname}</Text>
+                  {props.user.status == 3 ? (
+                    <Image
+                      source={R.images.iconCheck}
+                      style={{width: 20, height: 20, marginLeft: 20}}
+                    />
+                  ) : null}
+                </View>
               </TouchableOpacity>
 
               <View style={styles.row1}>
@@ -61,18 +146,13 @@ const HeaderHome = (props) => {
                   />
                 </TouchableOpacity>
               </View>
+              {renderLabel(props.user.status)}
             </View>
           </View>
-          {/* <View style={styles.row}>
-            <Text style={styles.txtMoney}>
-              {' '}
-              {props.user.current_money == 0
-                ? 0
-                : toPriceVnd(props.user.current_money)}
-            </Text>
-            <Text style={styles.txtTitle}> Đ</Text>
-          </View> */}
 
+          <View style={styles.wrapWallet}>
+            {renderWallet(props.user.status)}
+          </View>
           <View style={styles.containerMenu}>
             <TouchableOpacity
               onPress={() => navigate.navigate(CHOOSEMETHOD)}
@@ -116,7 +196,12 @@ export default connect(mapStateToProps, {})(HeaderHome);
 
 const styles = StyleSheet.create({
   container: {},
-
+  wrapWallet: {
+    height: 80,
+    width: '100%',
+    borderBottomWidth: 1,
+    borderBottomColor: '#EDEDF1',
+  },
   img: {
     height: Platform.OS == 'ios' ? HEIGHTXD(728) : HEIGHTXD(808),
     width: '100%',
@@ -125,9 +210,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   containerTop: {
+    backgroundColor: 'white',
     height: HEIGHTXD(856),
     width: '90%',
-    backgroundColor: 'white',
     borderRadius: 10,
     shadowColor: '#000',
     shadowOffset: {
@@ -165,6 +250,11 @@ const styles = StyleSheet.create({
     fontSize: getFontXD(36),
     color: R.colors.txtMain,
   },
+  txtWallet: {
+    fontSize: getFontXD(36),
+    color: R.colors.txtMain,
+    marginBottom: 5,
+  },
   txtName: {
     fontSize: getFontXD(52),
     color: '#00359C',
@@ -214,4 +304,38 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
+  containerWallet: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+  txtMoney: {
+    fontSize: getFontXD(46),
+    color: '#FFB721',
+  },
+  txtUnit: {
+    fontSize: getFontXD(46),
+    marginLeft: 10,
+    color: '#A2A2A2',
+  },
+  txtWhite: {
+    fontSize: getFontXD(36),
+    color: R.colors.white,
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+  },
+  btn: {
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    backgroundColor: R.colors.main,
+    borderRadius: 10,
+    shadowColor: '#AFA9A9',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 1.84,
+    elevation: 1,
+  },
 });

src/routers/StackNavigation.js

@@ -48,7 +48,7 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.PACKETCQG}>
+      initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />