personlize WalletOptionSelect

android/app/src/main/res/raw/utils_i18n_en.json

@@ -44,7 +44,7 @@
   "DEPOSIT": "Deposit",
   "CONFIRM_DEPOSIT": "Confirm deposit",
   "CONFIRM_WITHDRAWAL": "Confirm withdrawal",
-  "CHANGE_SOURCE_CARD": "Change source",
+  "CHANGE_SOURCE_CARD": "Change the type of entry number",
   "CHOOSE_SOURCE": "Choose source",
   "CREDIT_CARD": "Credit card",
   "NUMERO_DE_SERIE": "Serial number",

android/app/src/main/res/raw/utils_i18n_fr.json

@@ -52,7 +52,7 @@
   "MAKE_DEPOSIT": "Effectuer un dépôt",
   "MAKE_WITHDRAWAL": "Effectuer un retrait",
   "CHOOSE_SOURCE": "Choisir la source",
-  "CHANGE_SOURCE_CARD": "Changer la source",
+  "CHANGE_SOURCE_CARD": "Changer le type du numéro de saisie",
   "CREDIT_CARD": "Carte de crédit",
   "NUMERO_DE_SERIE": "Numéro de série",
   "NUMERO_DE_SERIE_DESCRIPTION": "Veuillez saisir le numéro de série",

screens/wallet/WalletDepot.js

@@ -34,7 +34,6 @@ import style from '../../components/TextInput/styles';
 import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
 import { identityPieces, inputCardSource } from '../../utils/UtilsFunction';
 
-
 const CONTAINER_WIDTH = Dimensions.get("window").width;
 
 class WalletDepot extends Component {
@@ -49,9 +48,18 @@ class WalletDepot extends Component {
      static navigationOptions = ({ navigation }) => {
           return {
                drawerLabel: () => null,
-               title: I18n.t('MAKE_DEPOSIT')
+               title: I18n.t('MAKE_DEPOSIT'),
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 23,
+                    color: 'white'
+
+               },
+               headerTitleStyle: {
+                    color: "white"
                }
           };
+     }
 
      constructor(props) {
           super(props);

screens/wallet/WalletDetail.js

@@ -1193,7 +1193,6 @@ const styles = StyleSheet.create({
           borderRadius: 10,
           backgroundColor: Color.cardBackgroundColor
      },
-
      contain: {
           flexDirection: 'row',
           justifyContent: 'space-between',

screens/wallet/WalletOptionSelect.js

@@ -13,6 +13,8 @@ import { Provider, Appbar } from 'react-native-paper';
 import { readUser } from '../../webservice/AuthApi';
 import { FontWeight, Typography } from '../../config/typography';
 import LottieView from 'lottie-react-native';
+import { isIlinkWorldWallet, optionDepotScreen } from '../../utils/UtilsFunction';
+import chunk from 'lodash/chunk';
 
 export default class WalletOptionSelect extends Component {
 
@@ -44,6 +46,66 @@ export default class WalletOptionSelect extends Component {
                />)
      });
 
+     renderItem = (options, isOneElement) => (
+          isOneElement ?
+               <>
+                    <View style={[styles.containerTouch]}>
+
+                         <TouchableOpacity style={styles.contain}
+                              onPress={() => {
+                                   /* this.props.navigation.push(options.screen) */
+                              }}
+                              activeOpacity={0.9}>
+
+                              <Icon name={options.icon}
+                                   color={Color.primaryColor}
+                                   size={30}
+                                   style={styles.imageBanner} />
+
+                              <View style={[styles.content]}>
+
+                                   <View style={styles.contentTitle}>
+                                        <Text style={[Typography.headline, Typography.semibold]}>
+                                             {options.title}
+                                        </Text>
+                                   </View>
+
+                              </View>
+                         </TouchableOpacity>
+                    </View>
+
+                    <View style={{ flex: 1 }} />
+               </> :
+               <View style={[styles.containerTouch]}>
+
+                    <TouchableOpacity style={styles.contain}
+                         onPress={() => {
+                              /* this.props.navigation.push(options.screen) */
+                         }}
+                         activeOpacity={0.9}>
+
+                         <Icon name={options.icon}
+                              color={Color.primaryColor}
+                              size={30}
+                              style={styles.imageBanner} />
+
+                         <View style={[styles.content]}>
+
+                              <View style={styles.contentTitle}>
+                                   <Text style={[Typography.headline, Typography.semibold]}>
+                                        {options.title}
+                                   </Text>
+                              </View>
+
+                              <View style={{ flex: 1 }}>
+                              </View>
+
+                         </View>
+                    </TouchableOpacity>
+               </View>
+
+     );
+
      updateLangue() {
           this.props.navigation.setParams({ name: I18n.t('WALLET') })
           this.forceUpdate();
@@ -72,13 +134,17 @@ export default class WalletOptionSelect extends Component {
 
                          <View style={styles.container}>
 
-
+                              <View style={{
+                                   justifyContent: 'center',
+                                   alignItems: 'center'
+                              }}>
                                    <LottieView
                                         style={styles.lottie}
                                         source={require("./../../datas/json/wallet_with_cash.json")}
                                         autoPlay
                                         loop={false}
                                    />
+                              </View>
 
                               <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
                                    <Text
@@ -86,6 +152,24 @@ export default class WalletOptionSelect extends Component {
                                         {I18n.t('TRANSACTIONS')}
                                    </Text>
                               </View>
+                              {
+                                   chunk(this.state.options, 2).map((item) => (
+
+                                        <View style={styles.transactionContainer}>
+                                             {
+                                                  item.length === 1 ?
+
+                                                       item.map((wallet) => (
+                                                            this.renderItem(wallet, true)
+                                                       )) :
+                                                       item.map((wallet) => (
+                                                            this.renderItem(wallet, false)
+                                                       ))
+                                             }
+                                        </View>
+                                   ))
+                              }
+
                               {/* <FlatList
                                    contentContainerStyle={{
                                         paddingHorizontal: 20,
@@ -149,8 +233,8 @@ const styles = StyleSheet.create({
           alignItems: "center"
      },
      lottie: {
-          width: 248,
+          width: 540,
-          height: 248
+          height: 240
      },
      checkDefault: {
           flexDirection: "row",
@@ -160,4 +244,43 @@ const styles = StyleSheet.create({
           paddingVertical: 10,
           marginTop: 5
      },
+     transactionContainer: {
+          flexDirection: 'row',
+          paddingTop: 10,
+     },
+     containerTouch: {
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          shadowColor: Color.borderColor,
+          borderColor: Color.borderColor,
+          borderWidth: 0.5,
+          shadowOffset: { width: 1.5, height: 1.5 },
+          shadowOpacity: 1.0,
+          elevation: 5,
+          borderRadius: 10,
+          backgroundColor: Color.cardBackgroundColor
+     },
+
+     contain: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+     },
+     imageBanner: {
+          marginTop: 15,
+          marginLeft: 5,
+          width: Utils.scaleWithPixel(30),
+          height: Utils.scaleWithPixel(30)
+     },
+     content: {
+          height: Utils.scaleWithPixel(60),
+          paddingHorizontal: 10,
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          flex: 1,
+     },
+     contentTitle: {
+          paddingTop: 12,
+     }
+
 });

screens/wallet/WalletRetrait.js

@@ -46,7 +46,15 @@ class WalletRetrait extends Component {
      static navigationOptions = ({ navigation }) => {
           return {
                drawerLabel: () => null,
-               title: I18n.t('MAKE_WITHDRAWAL')
+               title: I18n.t('MAKE_WITHDRAWAL'),
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 23,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
           }
      };