b

view/Auth.js

@@ -53,6 +53,7 @@ import RewardHistory from './RewardHistory';
 import WelcomeReg from './WelcomeReg';
 import WelcomeLog from './WelcomeLog';
 import RatingOrder from './RatingOrder';
+import UseBalance from './UseBalance';
 
 enableScreens();
 
@@ -435,6 +436,21 @@ class Auth extends React.Component {
                       }, title: 'RATING ORDER'
                     }}
                   />
+                   <Stack.Screen name="UseBalance" component={UseBalance}
+                    options={{
+                      headerStyle: { backgroundColor: '#CFB368' },
+                      headerTitleContainerStyle: { alignContent: 'center' },
+                      headerTitleAlign: 'center',
+                      headerTintColor: '#fff',
+                      headerTitleStyle: {
+                        alignSelf: 'center',
+                        fontFamily: 'Gotham-Black',
+                        fontSize: 20,
+                        color: 'white',
+                        textAlign: 'center'
+                      }, title: 'USE BALANCE'
+                    }}
+                  />
 
                 </>
               )

view/Home.js

@@ -204,6 +204,9 @@ class Home extends React.Component {
   }
 
 
+  
+
+
   render() {
     console.log(this.state.images)
     return (
@@ -382,9 +385,9 @@ class Home extends React.Component {
                     <Text style={{ textAlign: 'center', color: 'white', fontFamily: 'Gotham-Black', fontSize: 16 }}>TOP BALANCE </Text>
                   </View>
                 </TouchableOpacity>
-                <TouchableOpacity
+                <TouchableOpacity 
                   // style={styles.submitUpgradePemium} 
-                  activeOpacity={.5}>
+                  activeOpacity={.5} onPress={() => this.props.navigation.navigate('UseBalance')}>
                   <View style={styles.topUseBalance}>
                     <Text style={{ textAlign: 'center', color: 'white', fontFamily: 'Gotham-Black', fontSize: 16 }}>USE BALANCE </Text>
                   </View>

view/OrderDetail.js

@@ -330,13 +330,13 @@ class OrderDetail extends React.Component {
 
                     {
                         this.state.trans_status == 4 ? (
-                            <TouchableOpacity style={{ justifyContent: 'center' }} onPress={() => this.props.navigation.navigate('RatingOrder', { idTrans: item.id })}>
-                                <View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', justifyContent: 'center', marginRight: 20, marginLeft: 20, marginTop: 50 }}>
-                                    <Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center', paddingHorizontal: 5 }}>Rating Order</Text>
-                                </View>
-                            </TouchableOpacity>
+                           null
                         ) : (
-                                null
+                            <TouchableOpacity style={{ justifyContent: 'center' }} onPress={() => this.props.navigation.navigate('RatingOrder', { idTrans: item.id })}>
+                            <View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', justifyContent: 'center', marginRight: 20, marginLeft: 20, marginTop: 50 }}>
+                                <Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center', paddingHorizontal: 5 }}>Rating Order</Text>
+                            </View>
+                        </TouchableOpacity>
                             )
                     }
 

view/UseBalance.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert, TouchableOpacity, Image } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import ActionType from '../redux/globalActionType';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+class UseBalance extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            current_balance: '',
+            redeem:'',
+        }
+    }
+
+
+    componentDidMount(){
+        this._getProfile()
+    }
+    _getProfile() {
+        let params = {
+            session_id: this.props.session_id
+        }
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
+            console.log('ini res ' + JSON.stringify(res.data))
+            const dataCard = res.data
+
+            let balance = dataCard.kaspro_balance
+            let expired = dataCard.expire_date
+            let c_renew_until = dataCard.expire_date
+
+            var date_string = c_renew_until
+            var date_arr = date_string.split('-');
+            var date = new Date(date_arr[0], date_arr[1], date_arr[2]);
+            
+            date.setFullYear(date.getFullYear() + 1);
+            let date_nextyear_string = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate()
+            
+            this.setState({
+                current_balance: balance,
+                expired: expired,
+                renew_until: date_nextyear_string
+            })
+
+
+
+        }).catch(error => {
+            // console.log('ini error ' + error)
+        })
+    }
+
+
+    redeem(){
+        if (this.state.current_balance > this.state.redeem) {
+            
+            Alert.alert('','Balance tidak cukup !')
+        }else{
+            Alert.alert('','Balance cukup')
+        }
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={{ flex: 3 }}>
+                    <View style={{ flex: 1, marginRight: 30, marginLeft: 30, top: 50 }}>
+                        <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3 }}>Current Balance</Text>
+                        <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10, borderRadius: 10, borderColor: 'grey', fontFamily: 'Gotham-Black', textAlign: 'center', color: 'grey', fontWeight: 'bold', fontSize: 20 }}
+                            onChangeText={(current_balance) => this.setState({ current_balance })}
+                            keyboardType='email-address'>IDR. {this.state.current_balance}</TextInput>
+                        <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3 }}>Redeem</Text>
+                        <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10, borderRadius: 10, borderColor: 'grey', fontFamily: 'Gotham-Black', textAlign: 'center', color: 'grey', fontWeight: 'bold', fontSize: 20 }}
+                            onChangeText={(redeem) => this.setState({ redeem })}
+                            autoCapitalize="none"
+                            keyboardType='numeric'>IDR.</TextInput>
+                        <TouchableOpacity style={{ height: 100 }} onPress={()=> this.redeem()}>
+                            <View style={{ backgroundColor: '#CFB368', height: 40, top: 20, borderRadius: 10, marginRight: 50, marginLeft: 50 }}>
+                                <Text style={{ alignSelf: 'center', top: 10, color: 'white', fontFamily: 'Gotham-Black', fontSize: 20 }}>REDEEM</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        top: 40,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 40,
+        margin: 10,
+
+    },
+    logo: {
+        alignSelf: 'flex-start',
+        marginTop: 50,
+        width: 290,
+        height: 290,
+        bottom: 145,
+
+    },
+    v_logo: {
+        flex: 2,
+        flexDirection: 'column-reverse',
+        alignContent: 'flex-start',
+    }
+
+})
+
+const mapStateToProps = (state) => {
+    return {
+        session_id: state.session_id,
+        language: state.language,
+        pageEmailConfirmation: state.pageEmailConfirmation
+    }
+}
+
+export default connect(mapStateToProps)(UseBalance);