add reward select

view/Auth.js

@@ -45,8 +45,9 @@ import { enableScreens } from 'react-native-screens';
 import MenuDetail from './MenuDetail';
 import OrderHistory from './OrderHistory';
 import OrderDetail from './OrderDetail';
-import RewardsList from './RewardsList'
+import RewardsList from './RewardsList';
 import RewardDetail from './RewardDetail';
+import RewardSelect from './RewardSelect';
 
 enableScreens();
 
@@ -195,6 +196,7 @@ class Auth extends React.Component {
         <Stack.Screen name="New Register" component={NewRegister} />
         <Stack.Screen name="TopUpInfo" component={TopUpInfo} />
         <Stack.Screen name="Reward Detail" component={RewardDetail} />
+        <Stack.Screen name="Reward Select" component={RewardSelect} />
       </Stack.Navigator>
     )
   }

view/RewardSelect.js

+import React from 'react';
+import { View, Text, Image, StyleSheet, ScrollView, Alert, TouchableOpacity } from 'react-native';
+import { Card } from 'react-native-shadow-cards'
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import moment from 'moment'
+
+class RewardSelect extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            rewardsList: []
+        }
+    }
+
+    componentDidMount() {
+        this.getRewardsList()
+        this._unsubscribe = this.props.navigation.addListener('focus', () => {
+            this.getRewardsList()
+
+        });
+    }
+
+    componentWillUnmount() {
+        this._unsubscribe()
+    }
+
+    handleSelect(){
+        
+    }
+
+    getRewardsList() {
+        let params = {
+            session_id: this.props.session_id
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/reward/get_list', params).then(res => {
+            let data = res.data.rewards
+            // console.log(data)
+            data.map((item,key) => {
+                // console.log(item.expire_time)
+                item.expire_time = moment(item.expire_time).format("DD MMMM YYYY")  
+            })
+            // console.log(data)
+            this.setState({
+                rewardsList: data
+            })
+
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.status, response.msg);
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ color: 'white', textAlign: 'center', fontSize: 28 }}>REWARDS E-VOUCHER</Text>
+                </View>
+                <ScrollView style={styles.body}>
+                    {
+                        this.state.rewardsList.map((item, key) => (
+                            <TouchableOpacity key={key} onPress={() => this.handleSelect()}>
+                                <View style={{ alignItems: 'center' }}>
+                                    <Card style={{ padding: 5, margin: 10 }}>
+                                        <View>
+                                            <Image source={{ uri: item.reward.title_image }}
+                                                resizeMethod="scale"
+                                                resizeMode='stretch'
+                                                style={{ height: 150, width: 430 }} />
+                                        </View>
+                                        <View style={{ flexDirection: 'row', justifyContent:'space-between', padding:10 }}>
+                                            <View>
+                                                <Text>{item.reward.title}</Text>
+                                                <Text>{item.reward.subtitle}</Text>
+                                            </View>
+                                            <View>
+                                                <Text style={{textAlign:'right'}}>Expired</Text>
+                                                <Text style={{textAlign:'right'}}>{item.expire_time}</Text>
+                                            </View>
+                                        </View>
+                                    </Card>
+                                </View>
+                            </TouchableOpacity>
+                        ))
+                    }
+                    <TouchableOpacity>
+                        <Text style={{ textAlign: 'right', color: '#ccb46c' }}>REDEEM E-VOUCHER HISTORY</Text>
+                    </TouchableOpacity>
+                </ScrollView>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+        flex: 0.1,
+        backgroundColor: '#ccb46c',
+        justifyContent: 'center'
+    },
+
+    body: {
+        flex: 3,
+    },
+    list_detail_order: {
+        flex: 1,
+        margin: 20,
+        borderWidth: 1,
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+
+    }
+}
+
+export default connect(mapStateToProps)(RewardSelect);
\ No newline at end of file

view/ShoppingCart.js

@@ -424,7 +424,7 @@ class ShoppingCart extends React.Component {
                     />
                 </View>
                 <View style={styles.voucher}>
-                    <TouchableOpacity>
+                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Reward Select')}>
                         <Text style={{ color: '#ccb46c' }}>+ ADD VOUCHER</Text>
                     </TouchableOpacity>
                 </View>