add checkout summary

view/Auth.js

@@ -189,7 +189,7 @@ class Auth extends React.Component {
         <Stack.Screen name="News Detail" component={NewsDetail} />
         {/* <Stack.Screen name="Delivery Address" component={DeliveryAddress} /> */}
         
-        <Stack.Screen name="Menu Confirmation" component={MenuConfirmation} />
+        <Stack.Screen name="Confirm Your Order" component={MenuConfirmation} />
         
        
 

view/MenuConfirmation.js

 import React from 'react';
-import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
-
-export default class MenuConfirmation extends React.Component {
-    submit() {
-        console.log('hai');
+import { View, Text, TextInput, StyleSheet, Button, ScrollView } from 'react-native';
+import Axios from 'axios'
+import { connect } from 'react-redux'
+class MenuConfirmation extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            kasproBalance: '',
+            kasproPoint: '',
+            checkedBalance: false,
+            checkedPoint: false,
+            checkedBalancePoint: false,
+            balanceused: 0,
+            pointsused: 0,
+            ongkir: 0,
+            diskon: 0,
+            isDelivery: false,
+            isPickUp: false
+            // dummyBalance : 155000,
+            // dummyPoint : 20000
+        }
     }
 
     render() {
+        console.log(this.props)
         return (
-            <View style={styles.container}>
-                <View style={styles.header}>
-                    <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>Menu Confirmation</Text>
+            <ScrollView style={styles.container}>
+                {
+                    this.props.order_item.map((item, index) => {
+
+                        return (
+                            <View style={{ margin: 10 }} key={index}>
+                                <View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-around' }}>
+                                    <View style={{ flex: 0.3, alignItems: 'center' }}>
+                                        <Text>{item.quantity}</Text>
+                                    </View>
+                                    <View style={{ flex: 0.1, alignItems: 'flex-start' }}>
+                                        <Text>x</Text>
+                                    </View>
+                                    <View style={{ flex: 0.3, alignItems: 'baseline' }}>
+                                        <Text>{item.name} </Text>
+                                    </View>
+                                    <View style={{ flex: 0.3, alignItems: 'flex-end' }}>
+                                        <Text>{item.quantity * item.price} </Text>
+                                    </View>
+                                </View>
+                            </View>
+                        )
+                    })
+                }
+                <View style={{ alignItems: 'flex-end', borderTopWidth: 1, margin: 10, padding: 10 }}>
+                    <Text>0</Text>
+                </View>
+                <View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between' }}>
+                    <View style={{ margin: 10 }}>
+                        <Text>Voucher Discount</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <Text>0</Text>
+                    </View>
+                </View>
+                <View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between' }}>
+                    <View style={{ margin: 10 }}>
+                        <Text>Delivery Charge</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <Text>0</Text>
+                    </View>
+                </View>
+                <View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between', borderTopWidth: 1 }}>
+                    <View style={{ margin: 10 }}>
+                        <Text>Total</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <Text>0</Text>
+                    </View>
                 </View>
-                <View style={styles.body}>
-                    <View style={styles.images}>
-
-                    </View>
-                    <View style={styles.content}>
-                        <Text style={{ margin: 20, textAlign: 'justify' }}>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                        </Text>
-                        <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 20 }}>RP.50000</Text>
-                        <View style={{ margin: 20 }}>
-                            <Button title="Tambah" />
-                        </View>
+                <View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between', borderTopWidth: 1 }}>
+                    <View style={{ margin: 10 }}>
+                        <Text>Balance Used</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <Text>{this.props.route.params.balanceUsed}</Text>
+                    </View>
+                </View>
+                <View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between'}}>
+                    <View style={{ margin: 10 }}>
+                        <Text>Point Used</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <Text>{this.props.route.params.pointused}</Text>
                     </View>
                 </View>
-            </View>
+            </ScrollView>
         )
     }
 }
@@ -56,4 +119,20 @@ const styles = StyleSheet.create({
         flex: 3,
     },
 
-})
\ No newline at end of file
+})
+
+const mapStateToProps = (state) => {
+    console.log(state)
+    return {
+        session_id: state.session_id,
+        outlet_id: state.outlet_id,
+        order_quantity: state.order_quantity,
+        order_total: state.order_total,
+        order_item: state.order_item,
+        quantity: state.quantity,
+        address: state.address
+    }
+}
+
+
+export default connect(mapStateToProps)(MenuConfirmation)

view/ShoppingCart.js

@@ -460,7 +460,7 @@ class ShoppingCart extends React.Component {
                         </View>
                     </View>
                     <View style={{ margin: 20, }}>
-                        <Button title='Checkout' color='#ccb46c' />
+                        <Button title='Checkout' color='#ccb46c' onPress={() => this.props.navigation.navigate('Confirm Your Order', {balanceUsed: this.state.balanceused, pointused : this.state.pointsused})} />
                     </View>
                 </View>
             </ScrollView>