ilink-world/app/screens/wallet/user/PaymentCarteVersAutreWallet.js

441 lines
16 KiB
JavaScript

import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Animated } from "react-native";
import { Typography } from "../../../config/typography";
import * as Utils from '../../../utils/DeviceUtils';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {optionenvoieautrewalletScreen, optionDepotUserScreen} from '../../../utils/UtilsFunction'
import { Color } from "../../../config/Color";
import route from '../../../route.json';
import I18n from 'react-native-i18n';
import 'moment/locale/fr'
import 'moment/locale/es-us'
import 'moment/locale/en-au'
import 'moment/locale/en-ca'
import 'moment/locale/en-ie'
import 'moment/locale/en-il'
import 'moment/locale/en-nz'
import 'moment/locale/en-gb'
let slugify = require('slugify');
import {IlinkEmitter} from "../../../utils/events";
import { readUser } from "../../../webservice/AuthApi";
class PaymentCarteVersAutreWallet extends Component {
static navigatorStyle = {
navBarBackgroundColor: Color.primaryColor,
statusBarColor: Color.primaryDarkColor,
navBarTextColor: '#FFFFFF',
navBarButtonColor: '#FFFFFF'
};
static navigationOptions = () => {
return {
//onGoBack: () => this.refresh(),
drawerLabel: () => null,
headerTitle: I18n.t('ENVOIE_ARGENT'),
headerTintColor: 'white',
headerStyle: {
backgroundColor: Color.primaryColor,
marginTop: 0,
color: 'white'
},
headerTitleStyle: {
color: "white"
},
title: I18n.t('ENVOIE_ARGENT'),
}
};
constructor(props) {
super(props);
this.state = {
with_linked_card: true,
scrollHeaderY: 0,
};
this.scrollY = new Animated.Value(0);
this.scrollHeaderY = new Animated.Value(0);
this.deltaY = new Animated.Value(0);
this.bgBannerY = new Animated.Value(0);
IlinkEmitter.on("refreshWallet", this.refresh);
}
toggleDrawer = () => {
this.props.navigation.goBack()
}
refresh = () => {
console.debug("blbobloblob... ")
readUser().then((user) => {
if (user) {
if (user !== undefined) {
this.props.getWalletDetailActivated(user.id, null);
}
}
});
}
render() {
return (
<>
{/* transactions */}
<View style={styles.container}>
<Animated.View style={{
position: 'absolute',
width: "100%",
zIndex: 1,
// backgroundColor: Color.primaryColor,
height: 140 - this.state.scrollHeaderY,
top: 40,
}}/>
<ScrollView ref={component => this._scrollView = component}
style={{
paddingHorizontal: 20, position: 'absolute',
width: '100%',
height: '100%',
zIndex: 2
}}
scrollEventThrottle={8}
onScroll={Animated.event([
{
nativeEvent: {
contentOffset: {y: this.scrollY},
},
},
],
{
listener: (event) => {
this.setState({scrollHeaderY: event.nativeEvent.contentOffset.y});
}
})}>
<View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('TRANSACTIONS')}
</Text>
</View>
<View style={styles.container}>
<Text style={styles.subbigtitle}>Choisisez la carte que vous voulez utiliser. </Text>
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => {
this.props.navigation.push(route.carteLier, {
optionSelect: optionenvoieautrewalletScreen,
onGoBack: () => this.refresh(),
lottie: {
source: require("../../../datas/json/wallet_with_cash.json"),
loop: true
}
})
}}
activeOpacity={0.9}>
<Icon name='arrow-bottom-right'
color={Color.primaryColor}
size={30}
style={styles.imageBanner}/>
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('CARD_LINK')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => {
this.props.navigation.push(route.autreCarte, {
optionSelect: optionenvoieautrewalletScreen,
onGoBack: () => this.refresh(),
lottie: {
source: require("../../../datas/json/wallet_with_cash.json"),
loop: true
}
})
}}
activeOpacity={0.9}>
<Icon name='arrow-top-left'
color={Color.primaryColor}
size={30}
style={styles.imageBanner}/>
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('OTHER_CARD')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</ScrollView>
</View>
</>
);
}
}
// function PaymentCarteVersAutreWallet({navigation}) {
// const navigation = useNavigation()
// useEffect(() => {
// IlinkEmitter.on("refreshWallet", refresh);
// return () => {
// IlinkEmitter.off("refreshWallet", refresh);
// };
// }, []);
// // const handleGoBack = () => {
// // console.debug("blbobloblob... ");
// // //props.navigation.push('walletOptionSelect'); // Retour à la page précédente
// // props.navigation.push(route.walletOptionSelect, {
// // optionSelect: optionDepotUserScreen,
// // lottie: {
// // source: require("../../../datas/json/link_card.json"),
// // loop: true
// // },
// // })
// // }
// const refresh = () => {
// console.debug("blbobloblob... ");
// readUser().then((user) => {
// if (user) {
// if (user !== undefined) {
// getWalletDetailActivated(user.id, null);
// }
// }
// });
// }
// return (
// <>
// {/* transactions */}
// <View style={styles.container}>
// <Animated.View
// style={{
// position: 'absolute',
// width: "100%",
// zIndex: 1,
// // backgroundColor: Color.primaryColor,
// height: 140 ,
// top: 40,
// }}
// />
// <ScrollView
// style={{
// paddingHorizontal: 20,
// position: 'absolute',
// width: '100%',
// height: '100%',
// zIndex: 2
// }}
// scrollEventThrottle={8}
// >
// <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
// <Text style={[Typography.title3, Typography.semibold]}>
// {I18n.t('TRANSACTIONS')}
// </Text>
// {/* <TouchableOpacity onPress={handleGoBack}>
// <Text>frjbrjbvrkjv</Text>
// </TouchableOpacity> */}
// </View>
// <View style={styles.container}>
// <Text style={styles.subbigtitle}>Choisissez la carte que vous voulez utiliser. </Text>
// <View style={styles.transactionContainer}>
// <View style={[styles.containerTouch]}>
// <TouchableOpacity
// style={styles.contain}
// onPress={() => {
// navigation.push(route.carteLier, {
// optionSelect: optionenvoieautrewalletScreen,
// onGoBack: refresh,
// lottie: {
// source: require("../../../datas/json/wallet_with_cash.json"),
// loop: true
// }
// })
// }}
// activeOpacity={0.9}
// >
// <Icon name='arrow-bottom-right'
// color={Color.primaryColor}
// size={30}
// style={styles.imageBanner}
// />
// <View style={[styles.content]}>
// <View style={styles.contentTitle}>
// <Text style={[Typography.headline, Typography.semibold]}>
// {I18n.t('CARD_LINK')}
// </Text>
// </View>
// </View>
// </TouchableOpacity>
// </View>
// <View style={[styles.containerTouch]}>
// <TouchableOpacity
// style={styles.contain}
// onPress={() => {
// navigation.push(route.autreCarte, {
// optionSelect: optionenvoieautrewalletScreen,
// onGoBack: refresh,
// lottie: {
// source: require("../../../datas/json/wallet_with_cash.json"),
// loop: true
// }
// })
// }}
// activeOpacity={0.9}
// >
// <Icon name='arrow-top-left'
// color={Color.primaryColor}
// size={30}
// style={styles.imageBanner}
// />
// <View style={[styles.content]}>
// <View style={styles.contentTitle}>
// <Text style={[Typography.headline, Typography.semibold]}>
// {I18n.t('OTHER_CARD')}
// </Text>
// </View>
// </View>
// </TouchableOpacity>
// </View>
// </View>
// </View>
// </ScrollView>
// </View>
// </>
// );
// }
// PaymentCarteVersAutreWallet.navigationOptions = () => ({
// headerStyle: {
// backgroundColor: Color.primaryColor, // Couleur de l'en-tête
// //marginTop: 20,
// },
// headerTintColor: 'white', // Couleur du texte de l'en-tête
// headerTitleStyle: {
// color: 'white', // Style du texte du titre
// },
// headerBackTitle: 'Retour', // Texte du bouton de retour
// headerBackTitleStyle: {
// color: 'white', // Style du texte du bouton de retour
// },
// headerTitle: I18n.t('ENVOIE_ARGENT'),
// headerTintColor: 'white',
// headerStyle: {
// backgroundColor: Color.primaryColor,
// marginTop: 0,
// color: 'white'
// },
// headerTitleStyle: {
// color: "white"
// },
// title: I18n.t('ENVOIE_ARGENT'),
// });
const styles = StyleSheet.create({
container: {
backgroundColor: '#eee',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
checkDefault: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderBottomWidth: 1,
paddingVertical: 10,
marginTop: 5
},
blockView: {
paddingVertical: 10,
borderBottomWidth: 0.5,
},
circlePoint: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 5,
alignItems: 'center',
justifyContent: 'center',
},
transactionContainer: {
flexDirection: 'row',
flex: 1,
paddingTop: 10,
paddingLeft: 10,
paddingRight: 10,
},
containerTouch: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginRight: 1,
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: 5,
}
});
export default PaymentCarteVersAutreWallet;