update design reward list

package-lock.json

@@ -5445,9 +5445,9 @@
       }
     },
     "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+      "version": "2.25.3",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz",
+      "integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg=="
     },
     "morgan": {
       "version": "1.9.1",

package.json

@@ -28,6 +28,7 @@
     "expo-location": "^8.0.0",
     "expo-permissions": "^8.0.0",
     "i18n-js": "^3.5.1",
+    "moment": "^2.25.3",
     "native-base": "2.13.8",
     "react": "~16.9.0",
     "react-currency-format": "^1.0.0",

view/RewardsList.js

@@ -2,7 +2,8 @@ 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 Axios from 'axios';
+import moment from 'moment'
 
 class RewardsList extends React.Component {
     constructor(props) {
@@ -16,52 +17,71 @@ class RewardsList extends React.Component {
         this.getRewardsList()
         this._unsubscribe = this.props.navigation.addListener('focus', () => {
             this.getRewardsList()
-           
-          });
+
+        });
     }
 
-    componentWillUnmount () {
+    componentWillUnmount() {
         this._unsubscribe()
     }
 
-    getRewardsList () {
+    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);
+            Alert.alert(response.status, response.msg);
         })
     }
 
     render() {
-        return(
+        return (
             <View style={styles.container}>
                 <View style={styles.header}>
-                    <Text style={{color:'white', textAlign :'center', fontSize: 28}}>REWARDS E-VOUCHER</Text>
+                    <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.props.navigation.navigate('Reward Detail', {rewardId:item.id})}>
-                                <Image source={{ uri: item.reward.title_image }}
-                                resizeMethod="resize" 
-                                resizeMode='contain' 
-                                style={{ height: 250, width:'100%'}}/>
-                                {/* <Text>{item.reward.title}</Text>
-                                <Text>{item.reward.subtitle}</Text> */}
+                        this.state.rewardsList.map((item, key) => (
+                            <TouchableOpacity key={key} onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: item.id })}>
+                                <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>
+                        <Text style={{ textAlign: 'right', color: '#ccb46c' }}>REDEEM E-VOUCHER HISTORY</Text>
                     </TouchableOpacity>
                 </ScrollView>
             </View>
@@ -76,8 +96,8 @@ const styles = StyleSheet.create({
     },
     header: {
         flex: 0.1,
-        backgroundColor:'#ccb46c', 
-        justifyContent:'center'
+        backgroundColor: '#ccb46c',
+        justifyContent: 'center'
     },
 
     body: {