benerin bug order detail dan tambah cancel order

view/MenuConfirmation.js

@@ -20,6 +20,7 @@ class MenuConfirmation extends React.Component {
             totalOrder: 0,
             type: '',
             spinner: false,
+            transId: ''
         }
     }
 
@@ -76,6 +77,7 @@ class MenuConfirmation extends React.Component {
 
                 this.setState({
                     spinner: false,
+                    transId: data_order
                 })
                 let transIdProps = {
                     trans_id: data_order
@@ -144,6 +146,7 @@ class MenuConfirmation extends React.Component {
 
                 this.setState({
                     spinner: false,
+                    transId: data_order
                 })
                 let transIdProps = {
                     trans_id: data_order
@@ -194,7 +197,7 @@ class MenuConfirmation extends React.Component {
 
     orderSuccess = () => {
         this.props.setOrderFinish()
-        this.props.navigation.navigate('Order Detail');
+        this.props.navigation.navigate('Order Detail', { idTrans: this.state.transId });
         // this.props.navigation.reset({
         //     routes: [{ name: 'Home' }]
         // })

view/OrderDetail.js

 import React from 'react';
-import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, BackHandler } from 'react-native';
+import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, BackHandler, Modal } from 'react-native';
 import { Card } from 'react-native-shadow-cards'
 import { connect } from 'react-redux';
 import Axios from 'axios';
@@ -21,7 +21,9 @@ class OrderDetail extends React.Component {
             transaction_detail: [],
             numberId: '',
             detail_trans: '',
-            trans_status:''
+            trans_status: '',
+            modalVisible: false,
+            reason:''
         }
 
 
@@ -45,14 +47,37 @@ class OrderDetail extends React.Component {
         return true;
     }
 
-    handleCancel(){
+    handleCancel() {
+        this.setState({
+            modalVisible: true
+        })
+    }
 
+    handleOrderCancel() {
+        // console.log(this.state.reason)
+        
+        let params = {
+            session_id: this.props.session_id,
+            transaction_id: this.props.route.params.idTrans,
+            reason: this.state.reason
+        }
+        // console.log(params)
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/transaction/cancel', params).then(res => {
+            let respon = res.data.status
+            Alert.alert(respon, 'Order was canceled')
+            this.props.navigation.navigate('Home', { screen: 'ORDER' });
+        }).catch(error => {
+            Alert.alert('Error', error.data.msg)
+        })
+        this.setState({
+            modalVisible: false
+        })
     }
 
     getDetailTrans() {
         let params = {
             session_id: this.props.session_id,
-            transaction_id: this.props.trans_id
+            transaction_id: this.props.route.params.idTrans
         }
         // console.log("PARAMETER : " + JSON.stringify(params))
         Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/transaction/detail', params).then(res => {
@@ -67,7 +92,7 @@ class OrderDetail extends React.Component {
                 trans_status_display: data.trans_status_display,
                 transaction_detail: data.transaction_detail,
                 detail_trans: data,
-                trans_status : data.trans_status,
+                trans_status: data.trans_status,
                 numberId: data.id.substring(0, 5).toUpperCase()
 
             })
@@ -89,6 +114,34 @@ class OrderDetail extends React.Component {
         // console.log(this.state.detail_trans.used_reward)
         return (
             <View style={styles.container}>
+                <Modal animationType="slide"
+                    transparent={true}
+                    visible={this.state.modalVisible}
+                    onRequestClose={() => {
+                        this.setState({
+                            modalVisible: false
+                        })
+                    }}>
+                    <View style={styles.centerViewModal}>
+                        <View style={styles.modalView}>
+                            <Text style={{ fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Reason</Text>
+                            <View style={{ margin: 10 }}>
+                                <TextInput
+                                    style={styles.textInput}
+                                    onChangeText={(reason) => this.setState({ reason })}
+                                    value={this.state.reason}
+                                    textAlign='center'
+                                />
+                            </View>
+                            <TouchableOpacity onPress={() => this.handleOrderCancel()}>
+                                <View style={styles.button2}>
+                                    <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 22 }}>Confirm</Text>
+                                </View>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+
+                </Modal>
                 <View style={styles.header}>
                     <Text style={{ fontSize: 16, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>#{this.state.numberId}</Text>
                     <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>{moment(this.state.detail_trans.trans_time).format('DD MMMM YYYY HH:mm:ss')}</Text>
@@ -245,13 +298,13 @@ class OrderDetail extends React.Component {
                     </View>
                     {
                         this.state.trans_status == 0 ? (<TouchableOpacity onPress={() => this.handleCancel()}>
-                        
-                        <View style={styles.button}>
-                            <Text style={{ color: 'white', fontSize: 22, fontFamily: 'Gotham-Black' }}>Cancel</Text>
-                        </View>
-                    </TouchableOpacity>):(null)
+
+                            <View style={styles.button}>
+                                <Text style={{ color: 'white', fontSize: 22, fontFamily: 'Gotham-Black' }}>Cancel</Text>
+                            </View>
+                        </TouchableOpacity>) : (null)
                     }
-                    
+
 
 
 
@@ -318,6 +371,35 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center'
     },
+    centerViewModal: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    modalView: {
+        backgroundColor: "white",
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'grey',
+        padding: 20,
+        alignItems: "center",
+    },
+    textInput: {
+        height: 40,
+        width: 250,
+        borderColor: 'gray',
+        borderWidth: 1,
+        marginHorizontal: 30,
+        borderRadius: 10
+    },
+    button2: {
+        backgroundColor: '#CFB368',
+        padding:20,
+        borderRadius: 10,
+        paddingVertical: 5,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
 })
 
 const mapStateToProps = (state) => {