489 lines
18 KiB
JavaScript
489 lines
18 KiB
JavaScript
|
|
||
|
|
import React, { useEffect } 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";
|
||
|
|
import { HeaderBackButton } from "react-navigation-stack";
|
||
|
|
import { color } from "react-native-reanimated";
|
||
|
|
//import { HeaderBackButton } from 'react-navigation';
|
||
|
|
|
||
|
|
// let route = require('./../../../route.json')
|
||
|
|
// 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: 30,
|
||
|
|
// color: 'white'
|
||
|
|
// },
|
||
|
|
// headerTitleStyle: {
|
||
|
|
// color: "white"
|
||
|
|
// },
|
||
|
|
// title: I18n.t('ENVOIE_ARGENT'),
|
||
|
|
// headerLeft: (props) => (
|
||
|
|
// <HeaderBackButton
|
||
|
|
// {...props}
|
||
|
|
// onPress={() => {
|
||
|
|
// navigation.push(route.walletOptionSelect, {
|
||
|
|
// optionSelect: optionDepotUserScreen,
|
||
|
|
// lottie: {
|
||
|
|
// source: require("../../../datas/json/link_card.json"),
|
||
|
|
// loop: true
|
||
|
|
// },
|
||
|
|
// })
|
||
|
|
// console.log('screenName');
|
||
|
|
// }}
|
||
|
|
// />
|
||
|
|
// ),
|
||
|
|
|
||
|
|
// // headerLeft: (props) => (
|
||
|
|
// // <HeaderBackButton
|
||
|
|
// // {...props}
|
||
|
|
// // onPress={() => {
|
||
|
|
// // this.props.navigation.push(route.walletOptionSelect, {
|
||
|
|
// // optionSelect: optionDepotUserScreen,
|
||
|
|
// // lottie: {
|
||
|
|
// // source: require("../../../datas/json/link_card.json"),
|
||
|
|
// // loop: true
|
||
|
|
// // },
|
||
|
|
// // })
|
||
|
|
// // console.log("blbobloblob... ");
|
||
|
|
// // }}
|
||
|
|
|
||
|
|
// // />
|
||
|
|
// // ),
|
||
|
|
// }
|
||
|
|
// };
|
||
|
|
|
||
|
|
|
||
|
|
// 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(props) {
|
||
|
|
|
||
|
|
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={() => {
|
||
|
|
props.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={() => {
|
||
|
|
props.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 = ({navigation}) => ({
|
||
|
|
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: 30,
|
||
|
|
color: 'white'
|
||
|
|
},
|
||
|
|
headerTitleStyle: {
|
||
|
|
color: "white"
|
||
|
|
},
|
||
|
|
title: I18n.t('ENVOIE_ARGENT'),
|
||
|
|
headerLeft: () => (
|
||
|
|
<HeaderBackButton
|
||
|
|
tintColor="#fff" // Couleur du bouton de retour en blanc
|
||
|
|
|
||
|
|
onPress={() => {
|
||
|
|
// navigation.push(route.walletOptionSelect, {
|
||
|
|
// optionSelect: optionDepotUserScreen,
|
||
|
|
// lottie: {
|
||
|
|
// source: require("../../../datas/json/link_card.json"),
|
||
|
|
// loop: true
|
||
|
|
// },
|
||
|
|
// })
|
||
|
|
props.navigation.pop()
|
||
|
|
console.debug('jfbfjbfhbfh')
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
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;
|