240 lines
8.5 KiB
JavaScript
240 lines
8.5 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
TouchableOpacity,
|
|
Platform,
|
|
View,
|
|
Text,
|
|
Image,
|
|
Alert,
|
|
Modal
|
|
} from 'react-native';
|
|
import {
|
|
Container,
|
|
FormControl,
|
|
Stack,
|
|
Input
|
|
} from 'native-base';
|
|
import { connect } from "react-redux";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Elements from '../../components/elements.js';
|
|
import IconX from '../../components/icons.js';
|
|
import REQUEST from '../../components/api/';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
|
|
const styles = {
|
|
centeredView: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: '#00000090',
|
|
padding: 30
|
|
},
|
|
bottomView: {
|
|
flex: 1,
|
|
justifyContent: "flex-end",
|
|
alignItems: "center",
|
|
backgroundColor: '#00000090',
|
|
padding: 0
|
|
},
|
|
modalView: {
|
|
backgroundColor: '#fff',
|
|
padding: 20
|
|
},
|
|
modalTitle: {
|
|
padding: 5,
|
|
fontSize: 18,
|
|
fontWeight: 'bold'
|
|
},
|
|
modalText: {
|
|
padding: 5,
|
|
fontSize: 16,
|
|
color: 'gray',
|
|
marginTop: 10
|
|
}
|
|
}
|
|
|
|
class ApplyCardDetails extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.card = props.route.params || {}
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
modalvisible: false,
|
|
pin: null,
|
|
valid: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
proceed = () => {
|
|
this.props.navigation.navigate("EnrollForm", {
|
|
card_number: this.card.card_number,
|
|
pin: this.state.pin,
|
|
transactionType: this.props.route.params?.transactionType
|
|
})
|
|
}
|
|
|
|
onNext = async () => {
|
|
this.setState({ loading: true })
|
|
let body = {
|
|
card_number: this.card.card_number,
|
|
pin: this.state.pin
|
|
}
|
|
await REQUEST("send_card_pin", "post", {}, {}, body, (res) => {
|
|
this.setState({ loading: false })
|
|
if(res.status == 0){
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Error", res.message)
|
|
}, 300) : Alert.alert("Error", res.message)
|
|
} else {
|
|
this.proceed()
|
|
}
|
|
}, (error) => {
|
|
this.setState({ loading: false })
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Error", error.message)
|
|
}, 300) : Alert.alert("Error", error.message)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loader visible={this.state.loading} />
|
|
<CustomHeader title="" menu={false} back={true} backscreen="EnrollActivate" navigation={this.props.navigation} />
|
|
<Container style={{flex: 1, padding: 30}}>
|
|
<View style={{flex: 0, justifyContent: 'center', alignItems: 'center', marginTop: '15%'}}>
|
|
<Text style={{fontFamily: "Arial", fontSize: 22, fontWeight: "bold", marginBottom: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black}}>Enter Your Pin</Text>
|
|
<Text style={{fontFamily: "Arial", fontSize: 15, textAlign: 'center', width: '80%', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black}}>Please see the PIN at the back of your card
|
|
<IconX.AntDesign name="infocirlce" size={15} color="gray" onPress={() => this.setState({ modalvisible: true })} />
|
|
</Text>
|
|
|
|
</View>
|
|
<FormControl style={{marginTop: '20%', marginBottom: '5%'}}>
|
|
<Stack floatingLabel>
|
|
<FormControl.Label style={{fontSize: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black}}>PIN Code</FormControl.Label>
|
|
<Input style={{ color: this.props.app_theme?.theme.colors.text }} keyboardType="number-pad" maxLength={8} onChangeText={(val) => this.setState({ pin: val, valid: val.length == 8 ? true : false })} />
|
|
</Stack>
|
|
</FormControl>
|
|
<TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext() } style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + 15, borderRadius: 5}}>
|
|
<Text style={{textAlign: 'center', color: "#fff", fontSize: 18, padding: 15}}>Submit</Text>
|
|
</TouchableOpacity>
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={this.state.modalvisible}>
|
|
<TouchableOpacity activeOpacity={1} onPress={() => this.setState({ modalvisible: false })} style={{...styles.centeredView, borderRadius: 12}}>
|
|
<TouchableOpacity activeOpacity={1} style={{...styles.modalView, backgroundColor: '00000090', padding: 0, borderRadius: 12}}>
|
|
<Image source={Assets.guidecard} style={{width: Theme.screen.w - 40, height: Theme.screen.h / 3, resizeMode: 'stretch', borderRadius: 12}} />
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
</Container>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ApplyCardDetails)
|
|
|
|
// export default function ApplyCardDetails(navigation) {
|
|
|
|
// const card = navigation.route.params || {}
|
|
// const [loading, setloading] = useState(false)
|
|
// const [modalvisible, setmodalvisible] = useState(false)
|
|
// const [pin, setpin] = useState(null)
|
|
// const [valid, setvalid] = useState(false)
|
|
|
|
// const init = async () => {
|
|
// console.log(card)
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// init()
|
|
// }, [])
|
|
|
|
// const Proceed = () => {
|
|
// navigation.navigation.navigate("EnrollForm", {
|
|
// card_number: card.card_number,
|
|
// pin: pin,
|
|
// transactionType: navigation.route.params?.transactionType
|
|
// })
|
|
// }
|
|
|
|
// const onNext = async () => {
|
|
// setloading(true)
|
|
// let body = {
|
|
// card_number: card.card_number,
|
|
// pin: pin
|
|
// }
|
|
// // alert(JSON.stringify(body))
|
|
// await REQUEST("send_card_pin", "post", {}, {}, body, function(res){
|
|
// console.log("RESULT", res)
|
|
// setloading(false)
|
|
// if(res.status == 0){
|
|
// Platform.OS == 'ios' ? setTimeout(() => {
|
|
// Alert.alert("Error", res.message)
|
|
// }, 300) : Alert.alert("Error", res.message)
|
|
// }else{
|
|
// Proceed()
|
|
// }
|
|
// }, function(error){
|
|
// console.log(error)
|
|
// setloading(false)
|
|
// })
|
|
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <Elements.loader visible={loading} />
|
|
// <CustomHeader title="" menu={false} back={true} backscreen="EnrollActivate" navigation={navigation} />
|
|
// <Content style={{padding: 30}}>
|
|
// <View style={{flex: 0, justifyContent: 'center', alignItems: 'center', marginTop: '15%'}}>
|
|
// <Text style={{fontFamily: "Arial", fontSize: 22, fontWeight: "bold", marginBottom: 15}}>Enter Your Pin</Text>
|
|
// <Text style={{fontFamily: "Arial", fontSize: 15, textAlign: 'center', width: '80%'}}>Please see the PIN at the back of your card
|
|
// <IconX.AntDesign name="infocirlce" size={15} color="gray" onPress={() => setmodalvisible(true)} />
|
|
// </Text>
|
|
|
|
// </View>
|
|
// <Form style={{marginTop: '20%', marginBottom: '5%'}}>
|
|
// <Item floatingLabel>
|
|
// <Label style={{fontSize: 15}}>PIN Code</Label>
|
|
// <Input keyboardType="number-pad" maxLength={8} onChangeText={(val) => setpin(val)} />
|
|
// </Item>
|
|
// </Form>
|
|
// <TouchableOpacity onPress={() => onNext() } style={{backgroundColor: Theme.colors.primary, borderRadius: 5}}>
|
|
// <Text style={{textAlign: 'center', color: "#fff", fontSize: 18, padding: 15}}>Next</Text>
|
|
// </TouchableOpacity>
|
|
// <Modal
|
|
// animationType="none"
|
|
// transparent={true}
|
|
// visible={modalvisible}
|
|
// >
|
|
// <TouchableOpacity activeOpacity={1} onPress={() => setmodalvisible(false)} style={{...styles.centeredView, borderRadius: 12}}>
|
|
// <TouchableOpacity activeOpacity={1} style={{...styles.modalView, backgroundColor: '00000090', padding: 0, borderRadius: 12}}>
|
|
// <Image source={Assets.guidecard} style={{width: Theme.screen.w - 40, height: Theme.screen.h / 3, resizeMode: 'stretch', borderRadius: 12}} />
|
|
// </TouchableOpacity>
|
|
// </TouchableOpacity>
|
|
// </Modal>
|
|
// </Content>
|
|
// </SafeAreaView>
|
|
// );
|
|
// }
|