rating order

App.js

@@ -69,7 +69,7 @@ export default function App() {
     } else if (data.action_type == 'Transaction') {
       RootNavigation.navigate('Transaction Detail', {idTrans:data.data_id});
     } else if (data.action_type == 'Review') {
-
+      RootNavigation.navigate('RatingOrder', {idTrans:data.data_id});
     } else if (data.action_type == 'WebView') {
 
     } else if (data.action_type == 'Transfer Receive') {

view/Auth.js

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

view/Home.js

@@ -384,7 +384,7 @@ class Home extends React.Component {
                 </TouchableOpacity>
                 <TouchableOpacity
                   // style={styles.submitUpgradePemium} 
-                  activeOpacity={.5} onPress={this.onPress}>
+                  activeOpacity={.5}>
                   <View style={styles.topUseBalance}>
                     <Text style={{ textAlign: 'center', color: 'white', fontFamily: 'Gotham-Black', fontSize: 16 }}>USE BALANCE </Text>
                   </View>

view/OrderHistory.js

@@ -88,6 +88,18 @@ class OrderHistory extends React.Component {
                                                 <View>
                                                     <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 12 }}>{item.trans_status_display}</Text>
                                                 </View>
+                                                {
+                                                    this.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: 12, textAlign: 'center',paddingHorizontal:5}}>Rating Order</Text>
+                                                    </View>
+                                                </TouchableOpacity>
+                                                    ):(
+                                                        null
+                                                    )
+                                                }
+                                               
                                             </View>
                                         </View>
                                     </View>

view/RatingOrder.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert, TouchableOpacity, Image } from 'react-native';
+import { Rating, AirbnbRating } from 'react-native-elements';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import ActionType from '../redux/globalActionType';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+class RatingOrder extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            review: "",
+            rating: 5,
+        }
+    }
+
+    rating(rating){
+
+        this.setState({
+             rating: rating,
+
+        })
+    }
+
+    review(){
+
+            let paramater = {
+                session_id: this.props.session_id,
+                transaction_id: this.props.route.params.idTrans,
+                rating: this.state.rating,
+                review: this.state.review,
+                lat: this.props.lat,
+                long: this.props.long
+            }
+
+            console.log("INI PARAMS"+ JSON.stringify(paramater) );
+    
+            Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/review/transaction', paramater).then(res => {
+                Alert.alert("Terimakasih Atas masukan anda!")
+                this.props.navigation.navigate('Home');
+
+            }).catch(error => {
+                console.log ("INI error " + error)
+                let response = error.response.data;
+                Alert.alert(response.msg);
+            })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <View style={{ flex: 3 }}>
+                    <View style={{ flex: 1, marginRight: 30, marginLeft: 30, top: 50 }}>
+                        <AirbnbRating
+                            count={5}
+                            reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", ]}
+                            onFinishRating={rating => this.rating(rating)}
+                            defaultRating={5}
+                            size={30}
+                        />
+                        <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3,top:10}}>Review</Text>
+                        <TextInput style={{ height: 150, borderWidth: 1, padding: 5, margin: 10, borderRadius: 10, borderColor: 'grey', fontFamily: 'Gotham-Black', textAlign: 'center', color: 'grey', fontWeight: 'bold', fontSize: 20,top:20 }}
+                            onChangeText={(review) => this.setState({ review })}
+                            value={this.state.review}
+                            autoCapitalize="none"
+                            value={this.state.review}
+                        />
+
+                        <TouchableOpacity style={{ height: 100 }} onPress={()=>this.review()}>
+                            <View style={{ backgroundColor: '#CFB368', height: 45, top: 20, borderRadius: 10, marginRight: 50, marginLeft: 50 }}>
+                                <Text style={{ alignSelf: 'center', top: 10, color: 'white', fontFamily: 'Gotham-Black', fontSize: 20 }}>SUBMIT</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+                <View style={{ flex: 1, flexDirection: 'row' }}>
+{/* 
+                    <View style={styles.v_logo}>
+                        <View style={{ flex: 1, alignSelf: 'flex-start' }}>
+                            <Image resizeMode="contain" source={require('../assets/images/daun.png')} style={styles.logo}></Image>
+                        </View>
+                        <View style={{ flex: 1 }}>
+
+                        </View>
+                    </View> */}
+
+                    <View style={{ flex: 0.5 }}>
+
+                    </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,
+        lat: state.lat,
+        long: state.long,
+    }
+}
+
+export default connect(mapStateToProps)(RatingOrder);
+
+