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
Show whitespace changes
Inline Side-by-side
Showing with 98 additions and 15 deletions
lib/en.json
View file @ ed90d159
...@@ -237,6 +237,7 @@ ...@@ -237,6 +237,7 @@
"alertDetailAddress": "Detail field is required", "alertDetailAddress": "Detail field is required",
"alertVoucher":"Voucher cannot be used with point", "alertVoucher":"Voucher cannot be used with point",
"alertemailblank":"Email cannot be empty", "alertemailblank":"Email cannot be empty",
"check":"Check Card",
"waCallCenter":"Hello, I have a problem with trans no", "waCallCenter":"Hello, I have a problem with trans no",
"renewal_notEnoughBalance": "You don't have enough balance", "renewal_notEnoughBalance": "You don't have enough balance",
......
lib/id.json
View file @ ed90d159
...@@ -237,6 +237,7 @@ ...@@ -237,6 +237,7 @@
"alertDetailAddress": "Detail alamat harus diisi!", "alertDetailAddress": "Detail alamat harus diisi!",
"alertVoucher":"Voucher tidak bisa digunakan dengan point", "alertVoucher":"Voucher tidak bisa digunakan dengan point",
"alertemailblank":"Email tidak boleh kosong", "alertemailblank":"Email tidak boleh kosong",
"check":"Cek Kartu",
"waCallCenter":"Halo, saya ada masalah dengan trans no", "waCallCenter":"Halo, saya ada masalah dengan trans no",
"renewal_notEnoughBalance": "Saldo anda tidak mencukupi.", "renewal_notEnoughBalance": "Saldo anda tidak mencukupi.",
......
view/CardActivation.js
View file @ ed90d159
...@@ -2,6 +2,8 @@ import Axios from 'axios'; ...@@ -2,6 +2,8 @@ import Axios from 'axios';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import React from 'react'; import React from 'react';
import { Alert, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'; 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 Spinner from 'react-native-loading-spinner-overlay';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ActionType from '../redux/globalActionType'; import ActionType from '../redux/globalActionType';
...@@ -20,8 +22,32 @@ class CardActivation extends React.Component { ...@@ -20,8 +22,32 @@ class CardActivation extends React.Component {
onclick: false, onclick: false,
spinner: false, spinner: false,
caretHidden: true, 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() { componentDidMount() {
...@@ -96,7 +122,7 @@ class CardActivation extends React.Component { ...@@ -96,7 +122,7 @@ class CardActivation extends React.Component {
handleToken() { handleToken() {
if (this.state.mobile_phone == '') { if (this.state.mobile_phone == '') {
Alert.alert('',i18n.t('inputPhoneNumber')) Alert.alert('', i18n.t('inputPhoneNumber'))
} else { } else {
this.setState({ spinner: true }) this.setState({ spinner: true })
let params = { let params = {
...@@ -112,7 +138,7 @@ class CardActivation extends React.Component { ...@@ -112,7 +138,7 @@ class CardActivation extends React.Component {
text: 'OK', onPress: () => { text: 'OK', onPress: () => {
this.setState({ this.setState({
onclick: true, onclick: true,
spinner:false spinner: false
}) })
this.interval = setInterval( this.interval = setInterval(
...@@ -287,6 +313,10 @@ class CardActivation extends React.Component { ...@@ -287,6 +313,10 @@ class CardActivation extends React.Component {
} }
checkboxPressed() {
this.setState({ terms_condition: !this.state.terms_condition });
}
render() { render() {
return ( return (
<ScrollView style={styles.container}> <ScrollView style={styles.container}>
...@@ -321,7 +351,7 @@ class CardActivation extends React.Component { ...@@ -321,7 +351,7 @@ class CardActivation extends React.Component {
</View> </View>
</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 null
) )
...@@ -337,27 +367,39 @@ class CardActivation extends React.Component { ...@@ -337,27 +367,39 @@ class CardActivation extends React.Component {
</TouchableOpacity> </TouchableOpacity>
) : (null)} ) : (null)}
{/* Modifikasi Aktivasi Kartu | Disable Edit */}
<View style={styles.field_email}> <View style={styles.field_email}>
<View style={{ flex: 1, margin: 10 }}> <View style={{ flex: 1, margin: 10 }}>
<Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 19, textAlign: 'center', marginBottom: 5 }}>{i18n.t('cardNumber')}</Text> <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 19, textAlign: 'center', marginBottom: 5 }}>{i18n.t('cardNumber')}</Text>
{this.state.card_nums == "" ? ( {this.state.card_nums == "" ? (
<TextInput <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 })} onChangeText={card_number => this.setState({ card_number })}
keyboardType='numeric' keyboardType='numeric'
caretHidden={this.state.caretHidden} caretHidden={this.state.caretHidden}
onFocus={() => this.setState({ caretHidden: false })} onFocus={() => this.setState({ caretHidden: false })}
editable={this.state.TextInputDisableStatus}
/> />
) : ( ) : (
<TextInput <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 })} onChangeText={card_nums => this.setState({ card_nums })}
value={this.state.card_nums} value={this.state.card_nums}
editable={false} editable={false}
caretHidden={this.state.caretHidden} caretHidden={this.state.caretHidden}
onFocus={() => this.setState({ caretHidden: false })} 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> </View>
<View style={styles.field_email}> <View style={styles.field_email}>
...@@ -373,12 +415,44 @@ class CardActivation extends React.Component { ...@@ -373,12 +415,44 @@ class CardActivation extends React.Component {
/> />
</View> </View>
</View> </View>
{/* 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>
)}
<View style={styles.button}> <View style={styles.button}>
{this.state.terms_condition ? (
<TouchableOpacity onPress={() => this.handleActivate()}> <TouchableOpacity onPress={() => this.handleActivate()}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', margin: 20, justifyContent: 'center' }}> <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> <Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center' }}>{i18n.t('activate')}</Text>
</View> </View>
</TouchableOpacity> </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>
</View> </View>
</ScrollView> </ScrollView>
...@@ -416,6 +490,13 @@ const styles = StyleSheet.create({ ...@@ -416,6 +490,13 @@ const styles = StyleSheet.create({
height: 50, height: 50,
margin: 10, 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