237 lines
9.0 KiB
JavaScript
237 lines
9.0 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
Image,
|
|
Alert,
|
|
Platform
|
|
} from 'react-native';
|
|
import { savePlainUserInfo } from "../../redux/actions/AppUserInfoActions";
|
|
import { openModal } from '../../redux/actions/AlertActions';
|
|
import { connect } from "react-redux";
|
|
import NetInfo from "../../components/netstatus";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import DB from '../../components/storage/';
|
|
import REQUEST from '../../components/api/';
|
|
import CustomInput from '../../components/custominput';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
|
|
class AddAccountCard extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
profile: {},
|
|
loading: false,
|
|
cardnumber: "",
|
|
valid: false,
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = () => {
|
|
this.setState({ profile: this.props.route.params.data })
|
|
}
|
|
|
|
setCardNumber = (cn) => {
|
|
this.setState({ valid: cn.length == 16 ? true : false })
|
|
}
|
|
|
|
submitAddAccountCard = async () => {
|
|
let accounts = await DB.accounts();
|
|
let included = accounts.find((account) => {
|
|
return account.data.card_number === this.state.cardnumber
|
|
})
|
|
if(included != undefined && included != null){
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
this.props.openModal({
|
|
open: true,
|
|
title: "Information",
|
|
body: "Account has already been added previously in your profile. Would you like to switch to that account now?",
|
|
yesCB: async () => {
|
|
let process = await DB.switchaccount(0, this.state.cardnumber)
|
|
if(process == true){
|
|
this.props.savePlainUserInfo(included).then(res => {
|
|
// DB.updateProfile(res, function(){}, function(error){})
|
|
})
|
|
|
|
this.props.openModal({
|
|
open: true,
|
|
title: "Account",
|
|
body: "Successfully switched to account",
|
|
yesButtonOnly: true,
|
|
yesText: "Okay",
|
|
theme: this.props.app_theme
|
|
})
|
|
|
|
setTimeout(() => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}],
|
|
});
|
|
}, 700);
|
|
} else {
|
|
Alert.alert("Information", '\n' + JSON.stringify(process))
|
|
}
|
|
},
|
|
theme: this.props.app_theme
|
|
})
|
|
}, 300) : Alert.alert("Information", '\n' + res.message)
|
|
} else {
|
|
this.setState({ loading: true })
|
|
this.validateCard(success => {
|
|
if(success.status == 1) {
|
|
let sessiondata = {
|
|
card_number: success.data.card_number,
|
|
lcard_uuid: success.data.user_id,
|
|
mobile_number: success.data.number
|
|
}
|
|
|
|
this.requestOTP(sessiondata.lcard_uuid, sessiondata.mobile_number, success => {
|
|
this.setState({ loading: false })
|
|
if(success.status == 1) {
|
|
this.props.navigation.navigate("AccountOtp", {
|
|
data: sessiondata,
|
|
callback: this.props.route.params?.callback,
|
|
type: this.props.route.params?.type
|
|
})
|
|
}
|
|
}, err => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
this.setState({ loading: false })
|
|
})
|
|
} else {
|
|
this.setState({ loading: false })
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Information", '\n' + success.message)
|
|
}, 300) : Alert.alert("Information", '\n' + success.message)
|
|
}
|
|
}, err => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
this.setState({ loading: false })
|
|
})
|
|
}
|
|
}
|
|
|
|
validateCard = async (successCallback, errorCallback) => {
|
|
let uuid = await DB.get("deviceUUID")
|
|
await REQUEST("card_validation", "post", {}, {}, {
|
|
card_number: this.state.cardnumber,
|
|
deviceUUID: uuid
|
|
}, function(res){
|
|
successCallback(res)
|
|
}, function(error){
|
|
errorCallback(error)
|
|
}, "CardValidationEnroll", "Submit")
|
|
}
|
|
|
|
onSubmit = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected){
|
|
if(this.state.valid) this.submitAddAccountCard()
|
|
}else{
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
}
|
|
|
|
requestOTP = async (lcard_uuid, mobile_number, successCallback, errorCallback) => {
|
|
this.setState({ loading: true })
|
|
let params = `lcard_uuid=${lcard_uuid}&mobile=${Theme.formatter.PMBL(mobile_number)}&is_resend=false`;
|
|
await REQUEST("requestOTP", "get", {}, params, {},
|
|
function(res){
|
|
successCallback(res)
|
|
}, function(error){
|
|
errorCallback(error)
|
|
}, "OTP", "Request"
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
{/* <Elements.customAlertModal
|
|
open={this.state.openModal.open}
|
|
description={this.state.openModal.track}
|
|
onProceed={() => {
|
|
setOpenModal({
|
|
open: false,
|
|
track: undefined
|
|
})
|
|
}}
|
|
onClose={() => setOpenModal({
|
|
open: false,
|
|
track: undefined
|
|
})}
|
|
/> */}
|
|
<Elements.loaderView
|
|
title="Validating"
|
|
message="Please wait..."
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
backgroundColor={this.props.app_theme?.theme.colors.border}
|
|
color={this.props.app_theme?.theme.colors.text}
|
|
visible={this.state.loading} />
|
|
<CustomHeader title="" navigation={this.props.navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} />
|
|
<View style={{flex: 1}}>
|
|
<View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
|
|
<Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'center'}}>
|
|
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Add Card</Text>
|
|
<Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
|
Enter your 16-digit card number.
|
|
</Text>
|
|
<View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
|
|
<CustomInput
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
onChangeText={(val) => {
|
|
this.setState({ cardnumber: val, valid: val.length == 16 ? true : false })
|
|
}}
|
|
/>
|
|
</View>
|
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
|
|
<TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Submit</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={{alignItems: 'center'}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>or</Text>
|
|
</View>
|
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, marginTop: 5}}>
|
|
<TouchableOpacity onPress={() => this.props.navigation.navigate("AccountEnrollActivate", {callback: this.props.route.params.callback, type: "activatecard"}) } style={{padding: 15, paddingTop: 12, width: Theme.screen.w - 80, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.primary}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.primary}}>Activate your Card</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
userinfo: state.appUserInfoReducer.userinfo,
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
savePlainUserInfo,
|
|
openModal
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(AddAccountCard); |