Skip to content

C
clone_excelso
Commit ed90d159 authored by Prasetya Saputra's avatar Prasetya Saputra
Browse files
Options

update tampilan aktivasi kartu

parent 685c919a
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 15 deletions
lib/en.json
View file @ ed90d159
......@@ -237,6 +237,7 @@
"alertDetailAddress": "Detail field is required",
"alertVoucher":"Voucher cannot be used with point",
"alertemailblank":"Email cannot be empty",
"check":"Check Card",
"waCallCenter":"Hello, I have a problem with trans no",
"renewal_notEnoughBalance": "You don't have enough balance",
......
lib/id.json
View file @ ed90d159
......@@ -237,6 +237,7 @@
"alertDetailAddress": "Detail alamat harus diisi!",
"alertVoucher":"Voucher tidak bisa digunakan dengan point",
"alertemailblank":"Email tidak boleh kosong",
"check":"Cek Kartu",
"waCallCenter":"Halo, saya ada masalah dengan trans no",
"renewal_notEnoughBalance": "Saldo anda tidak mencukupi.",
......
view/CardActivation.js
View file @ ed90d159
......@@ -2,6 +2,8 @@ import Axios from 'axios';
import i18n from 'i18n-js';
import React from 'react';
import { Alert, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { ListItem, CheckBox, Body } from 'native-base';
import Spinner from 'react-native-loading-spinner-overlay';
import { connect } from 'react-redux';
import ActionType from '../redux/globalActionType';
......@@ -20,8 +22,32 @@ class CardActivation extends React.Component {
onclick: false,
spinner: false,
caretHidden: true,
TextInputDisableStatus: true, // Modifikasi Aktivasi Kartu | Disable Edit
}
}
onPressButton = () => {
// Modifikasi Aktivasi Kartu | Function Disable Edit + Check Card API
let params = {
session_id: this.props.session_id,
card_number: this.state.card_number,
}
Axios.post(this.props.BASE_URL + 'crm/v2/card/series_info', params).then(res => {
// disini set link ke text TNC
this.setState({ TextInputDisableStatus: false })
}).catch(error => {
let response = error.response.data;
Alert.alert(
'',
response.msg,
[
{
text: "OK",
onPress: () => this.setState({ spinner: false }) }
],
);
})
}
componentDidMount() {
......@@ -94,9 +120,9 @@ class CardActivation extends React.Component {
})
}
handleToken() {
if (this.state.mobile_phone == '') {
Alert.alert('',i18n.t('inputPhoneNumber'))
handleToken() {
if (this.state.mobile_phone == '') {
Alert.alert('', i18n.t('inputPhoneNumber'))
} else {
this.setState({ spinner: true })
let params = {
......@@ -112,7 +138,7 @@ class CardActivation extends React.Component {
text: 'OK', onPress: () => {
this.setState({
onclick: true,
spinner:false
spinner: false
})
this.interval = setInterval(
......@@ -162,7 +188,7 @@ class CardActivation extends React.Component {
spinner: false,
timer: 80
})
this.interval = setInterval(
() => this.setState((prevState) => ({ timer: prevState.timer - 1 })),
1000
......@@ -287,6 +313,10 @@ class CardActivation extends React.Component {
}
checkboxPressed() {
this.setState({ terms_condition: !this.state.terms_condition });
}
render() {
return (
<ScrollView style={styles.container}>
......@@ -321,11 +351,11 @@ class CardActivation extends React.Component {
</View>
</View>
{
this.state.onclick === true ? (<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Black',color:'red' }}> 0:{this.state.timer} </Text>) : (
this.state.onclick === true ? (<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Black', color: 'red' }}> 0:{this.state.timer} </Text>) : (
null
)
}
{
......@@ -337,27 +367,39 @@ class CardActivation extends React.Component {
</TouchableOpacity>
) : (null)}
{/* Modifikasi Aktivasi Kartu | Disable Edit */}
<View style={styles.field_email}>
<View style={{ flex: 1, margin: 10 }}>
<Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 19, textAlign: 'center', marginBottom: 5 }}>{i18n.t('cardNumber')}</Text>
{this.state.card_nums == "" ? (
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 10, textAlign: 'center', fontFamily: 'Gotham-Black', color: 'grey', fontSize: 16 }}
style={{ backgroundColor: this.state.TextInputDisableStatus ? '#FFF' : '#e3e3e3', height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 10, textAlign: 'center', fontFamily: 'Gotham-Black', color: 'grey', fontSize: 16 }}
onChangeText={card_number => this.setState({ card_number })}
keyboardType='numeric'
caretHidden={this.state.caretHidden}
onFocus={() => this.setState({ caretHidden: false })}
editable={this.state.TextInputDisableStatus}
/>
) : (
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 10, textAlign: 'center', fontFamily: 'Gotham-Black', color: 'grey', fontSize: 16 }}
style={{ backgroundColor: this.state.TextInputDisableStatus ? '#FFF' : '#e3e3e3', height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 10, textAlign: 'center', fontFamily: 'Gotham-Black', color: 'grey', fontSize: 16 }}
onChangeText={card_nums => this.setState({ card_nums })}
value={this.state.card_nums}
editable={false}
caretHidden={this.state.caretHidden}
onFocus={() => this.setState({ caretHidden: false })}
/>
)}
)
}
</View>
{/* Modifikasi Aktivasi Kartu | Cek Kartu */}
<View style={styles.button}>
<TouchableOpacity style={{ top: 25 }} onPress={this.onPressButton}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center', margin: 10 }}>{i18n.t('check')}</Text>
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.field_email}>
......@@ -373,12 +415,44 @@ class CardActivation extends React.Component {
/>
</View>
</View>
<View style={styles.button}>
<TouchableOpacity onPress={() => this.handleActivate()}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', margin: 20, justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center' }}>{i18n.t('activate')}</Text>
{/* Modifikasi Aktivasi Kartu | Term & Condition */}
{this.state.TextInputDisableStatus ? (
<View style={styles.items4}>
<ListItem style={{ borderBottomColor: 'white', alignItems: 'center', alignContent: 'center' }}>
<CheckBox color="#e3e3e3" />
<Body>
<TouchableWithoutFeedback>
<Text style={{ marginLeft: 16, color: '#e3e3e3', fontWeight: 'bold' }}>{i18n.t('accept_terms_condition')}</Text>
</TouchableWithoutFeedback>
</Body>
</ListItem>
</View>
) : (
<View style={styles.items4}>
<ListItem style={{ borderBottomColor: 'white', alignItems: 'center', alignContent: 'center' }}>
<CheckBox color="#CFB368" checked={this.state.terms_condition} onPress={() => this.checkboxPressed()} />
<Body>
<TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Privacy Statement')}>
<Text style={{ marginLeft: 16, color: '#CFB368', fontWeight: 'bold' }}>{i18n.t('accept_terms_condition')}</Text>
</TouchableWithoutFeedback>
</Body>
</ListItem>
</View>
</TouchableOpacity>
)}
<View style={styles.button}>
{this.state.terms_condition ? (
<TouchableOpacity onPress={() => this.handleActivate()}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', margin: 10, justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center' }}>{i18n.t('activate')}</Text>
</View>
</TouchableOpacity>
) :
(
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#e3e3e3', margin: 10, justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center' }}>{i18n.t('activate')}</Text>
</View>
)}
</View>
</View>
</ScrollView>
......@@ -416,6 +490,13 @@ const styles = StyleSheet.create({
height: 50,
margin: 10,
},
items4: {
flex: 1,
height: 40,
marginTop: 10,
justifyContent: 'center',
alignItems: 'stretch',
}
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment