Merge branch 'deni15' into 'master'

diskon 1/2

See merge request !51

App/Containers/CheckOutScreen.js

@@ -231,7 +231,7 @@ class CheckOutScreen extends Component {
             </View>
             {/* Kupon and Rewards */}
             <View>
-              <View style={{flexDirection:'row', justifyContent: 'space-between', padding: 20}}>
+              <TouchableOpacity style={{flexDirection:'row', justifyContent: 'space-between', padding: 20}} onPress={()=> this.props.navigation.navigate('UseCouponScreen')}>
                 <View style={{flexDirection: 'row',alignItems: 'center'}}>
                   <Image source={Images.icon_coupon} style={{width: 30, height: 20, resizeMode: 'stretch'}}/>
                   <BaseText text={'Gunakan Kupon Belanja'} style={{marginLeft: 10, fontSize: 12}}/>
@@ -240,7 +240,7 @@ class CheckOutScreen extends Component {
                   <Image source={Images.icon_check} style={{height: 20, width: 20, marginRight: 15}}/>
                   <FontAwesome name={'angle-right'} size={20}/>
                 </View>
-              </View>
+              </TouchableOpacity>
               <View style={{flexDirection:'row', justifyContent: 'space-between', borderTopColor: '#e0e0e0', borderTopWidth: 1, padding: 20}}>
                 <View style={{flexDirection: 'row',alignItems: 'center'}}>
                   <View style={{width: 30, alignItems: 'center',}}>

App/Containers/RewardScreen.js

 import React, { Component } from 'react'
-import { ScrollView, View, StatusBar, BackHandler, Image, NativeModules, Platform, TouchableOpacity, TextInput } from 'react-native'
+import { ScrollView, View, StatusBar, BackHandler, Image, NativeModules, Platform, TouchableOpacity, TextInput, ImageBackground, Text } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
@@ -13,6 +13,7 @@ import { Images } from '../Themes';
 import Modal from 'react-native-modal';
 import BaseHeader from '../Components/BaseHeader';
 import Api from '../Services/Api';
+import images from '../Themes/Images';
 const { StatusBarManager } = NativeModules;
 
 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;
@@ -29,7 +30,8 @@ class RewardScreen extends Component {
       modalTopUp: false,
       wallet: 0,
       rewardPoint: 0,
-      amount: 0
+      amount: 0,
+      listKupon: []
     }
   }
   backAction = () => {
@@ -101,17 +103,18 @@ class RewardScreen extends Component {
   }
 
   componentDidMount() {
-    // alert(JSON.stringify(this.props))
+    // alert(JSON.stringify(this.props.navigation.state.params))
     if (this.props.navigation.state.params) {
       if (this.props.navigation.state.params.intent == 'Dompet') {
         this.setState({ intent: 'Dompet' })
         this.getWallet()
       } else {
         this.setState({ intent: 'Rewards' })
-        this.getReward()
       }
     } else {
       this.setState({ intent: 'Rewards' })
+      this.getReward()
+      this.getKupon()
     }
     BackHandler.addEventListener("hardwareBackPress", this.backAction);
   }
@@ -120,16 +123,23 @@ class RewardScreen extends Component {
     BackHandler.removeEventListener("hardwareBackPress", this.backAction);
   }
 
-  getReward(){
+  getReward() {
     Api.create().getReward().then(response => {
       if (response.data.status == "success") {
         this.setState({
-          rewardPoint: response.data.data.reward
+          rewardPoint: response.data.data.rewards
         })
       }
     })
   }
 
+  getKupon() {
+    Api.create().getAllKupon().then(response => {
+      // alert(JSON.stringify(response.data.data))
+      this.setState({ listKupon: response.data.data })
+    })
+  }
+
   getWallet() {
     Api.create().getWallet().then(response => {
       if (response.data.status == "success") {
@@ -209,9 +219,10 @@ class RewardScreen extends Component {
         </Modal>
 
         <View style={{ backgroundColor: '#4cc9f0' }}>
-          <BaseHeader leftText={this.state.intent == 'Dompet' ? 'Dompet' : 'Rewards'} onBackPress={() => this.props.navigation.goBack()} />
+          <BaseHeader leftText={this.state.intent == 'Dompet' ? 'Dompet' : 'Kupon & Rewards'} onBackPress={() => this.props.navigation.goBack()} />
           <View style={{ backgroundColor: '#fff', height: '100%', borderTopRightRadius: 20, borderTopLeftRadius: 20 }}>
             <ScrollView style={{ backgroundColor: '#fff', borderTopRightRadius: 20, borderTopLeftRadius: 20 }} onScroll={this.handleScroll} showsVerticalScrollIndicator={false}>
+
               <Image source={this.state.intent == 'Dompet' ? Images.dompet : Images.reward} style={{ width: 100, height: 100, resizeMode: 'contain', marginTop: 50, alignSelf: 'center' }} />
               <BaseText type={"bold"} text={this.state.intent == 'Dompet' ? 'Sisa Saldo Dompet Saya' : 'Rewards Point'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10 }} />
               <BaseText type={"bold"} text={this.state.intent == 'Dompet' ? this.number(this.state.wallet) : String(this.state.rewardPoint)} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: '#4cc9f0' }} />
@@ -222,6 +233,39 @@ class RewardScreen extends Component {
                 <TouchableOpacity style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '80%', alignSelf: 'center', marginTop: 30 }}>
                   <BaseText type={"regular"} text={'Redeem'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: 'white' }} />
                 </TouchableOpacity>}
+
+              {this.state.intent == 'Dompet' ?
+                null :
+                <View style={{}} >
+                  <View style={{ borderBottomWidth: 1, marginTop: 40, borderBottomColor: '#d8d8d8' }} />
+                  <View style={{ padding: 20 }}>
+                    <BaseText type={"regular"} text={'Anda memiliki 3 kupon untuk digunakan pada transaksi pembelian.'} style={{ fontSize: 14, marginTop: 10 }} />
+                  </View>
+                  <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+                    {this.state.listKupon.map((item, index) => {
+                      return (
+                        <View style={{ marginRight: index == this.state.listKupon.length - 1 ? 20 : 0, marginLeft: 20 }}>
+                          <ImageBackground source={Images.kupon} imageStyle={{ height: 123, width: 280, }} style={{ height: 123, width: 280 }}>
+                            <View style={{ flex: 1, flexDirection: 'row' }}>
+                              <View style={{ width: '20%', justifyContent: 'center' }}>
+                                <View style={{ width: 123, transform: [{ rotate: '270deg' }], justifyContent: 'center', }}>
+                                  <BaseText type={"bold"} text={item.coupon_code} style={{ fontSize: 12, color: 'white', alignSelf: 'center', marginBottom: 70 }} />
+
+                                </View>
+                                {/* <Text style={{ transform: [{ rotate: '90deg' }], fontSize: 12, justifyContent: 'center', alignSelf: 'center', width: 123 }}>{item.coupon_code}</Text> */}
+                              </View>
+                              <View style={{ height: '100%', width: 225, justifyContent: 'flex-end' }}>
+                                <BaseText type={"bold"} text={item.coupon_description} style={{ fontSize: 8, textAlign: 'center', color: '#adadad', marginBottom: 10 }} />
+                              </View>
+                            </View>
+                          </ImageBackground>
+                        </View>
+                      )
+                    })}
+                  </ScrollView>
+                </View>
+
+              }
             </ScrollView>
           </View>
           {/* <MenuDrawer

App/Containers/Styles/UseCouponScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/UseCouponScreen.js

+import React, { Component } from 'react'
+import { View, Text, KeyboardAvoidingView, TouchableOpacity, BackHandler } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/UseCouponScreenStyle'
+import BaseHeader from '../Components/BaseHeader'
+import BaseText from '../Components/BaseText'
+import BaseButton from '../Components/BaseButton'
+import Api from '../Services/Api'
+import M from 'moment'
+import Check from 'react-native-vector-icons/AntDesign';
+
+class UseCouponScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      listKupon: [],
+      couponID: "",
+      diskon: 0
+    }
+  }
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    this.getKupon()
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
+  useKupon() {
+    null
+  }
+
+  getKupon() {
+    Api.create().getAllKupon().then(response => {
+      this.setState({ listKupon: response.data.data })
+    })
+  }
+
+  number(num) {
+    var rupiah = '';
+    var angkarev = num.toString().split('').reverse().join('');
+    for (var i = 0; i < angkarev.length; i++) if (i % 3 == 0) rupiah += angkarev.substr(i, 3) + '.';
+    return 'Rp. ' + rupiah.split('', rupiah.length - 1).reverse().join('');
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
+        <BaseHeader leftText={'Pakai Kupon'} onBackPress={() => this.props.navigation.goBack()} />
+        <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%' }}>
+          <View style={{ padding: 20 }}>
+            <BaseText text={"Pilih Kupon"} type={"bold"} style={{ opacity: .5, fontSize: 14, marginTop: 5 }} />
+            {/* <BaseText text={"Gunakan kupon kamu"} type={"bold"} style={{ opacity: .5, fontSize: 12, marginTop: 5 }} /> */}
+          </View>
+          <View style={{ borderBottomWidth: 1, borderBottomColor: '#d8d8d8' }} />
+          <View style={{ padding: 20 }}>
+            {this.state.listKupon.map((item, index) => {
+              return (
+                <TouchableOpacity activeOpacity={.7} style={{ borderRadius: 15, width: '100%', borderColor: '#4cc9f0', borderWidth: 1, marginTop: index == 0 ? 0 : 20, padding: 10, elevation: 5, backgroundColor: this.state.couponID == item.coupon_id ? '#dbf7ff' : 'white' }} onPress={() => this.setState({ couponID: item.coupon_id, diskon: item.cart_value })}>
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <View>
+                      <BaseText text={`Diskon ${this.number(item.cart_value)}`} type={"bold"} style={{ opacity: .5, fontSize: 12, marginTop: 5 }} />
+                      <BaseText text={`Berakhir pada ${M(item.valid_from).format('DD MMM YYYY')}`} type={"regular"} style={{ opacity: .5, fontSize: 12, marginTop: 5 }} />
+                    </View>
+                    <View style={{ justifyContent: 'center' }}>
+                      {this.state.couponID == item.coupon_id && (
+                        <Check name="check" size={24} color={'#4cc9f0'} />
+                      )}
+                    </View>
+                  </View>
+                </TouchableOpacity>
+              )
+            })}
+
+          </View>
+        </View>
+        {this.state.couponID == "" ? null :
+          <View style={{ padding: 20, alignSelf: 'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8', }}>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+              <View style={{ width: '60%' }}>
+                <BaseText text={"Kamu bisa hemat"} type={"bold"} style={{ opacity: .5, fontSize: 12, marginTop: 5 }} />
+                <BaseText text={this.number(this.state.diskon)} type={"bold"} style={{ opacity: .5, fontSize: 12, marginTop: 5 }} />
+                {/* <BaseText text={this.getTotalCart()} type={"bold"} style={{ opacity: .8, color: '#4cc9f0' }} /> */}
+              </View>
+              <View style={{ width: '40%' }}>
+                <BaseButton text={'Pakai Kupon'} onPress={() => this.useKupon()} fontSizeText={14} />
+              </View>
+            </View>
+          </View>
+        }
+      </View>
+
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(UseCouponScreen)

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import UseCouponScreen from '../Containers/UseCouponScreen'
 import DetailNotificationScreen from '../Containers/DetailNotificationScreen'
 import ChatScreen from '../Containers/ChatScreen'
 import DeliveryScreen from '../Containers/DeliveryScreen'
@@ -46,6 +47,7 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  UseCouponScreen: { screen: UseCouponScreen },
   DetailNotificationScreen: { screen: DetailNotificationScreen },
   ChatScreen: { screen: ChatScreen },
   DeliveryScreen: { screen: DeliveryScreen },

App/Services/Api.js

@@ -75,6 +75,7 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   const getWallet = () => api.get('get_wallet')
   const topUpWallet = (body) => api.post('topup_wallet', body)
   const getPaymentMethod = () => api.get('get_payment_method')
+  const getAllKupon = () => api.get('get_all_coupon')
 
   // Order
   const createOrder = (body) => api.post('create_order', body)
@@ -210,6 +211,7 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
     cancelOrder,
     getCancelReasonOrder,
     getOrderStatus,
+    getAllKupon
   }
 }
 

App/Themes/Images.js

@@ -62,6 +62,7 @@ const images = {
   editFoto: require('../Images/editFoto.png'),
   flash: require('../Images/flash.png'),
   wishlistBulat: require('../Images/wishlist-bulat.png'),
+  kupon: require('../Images/kupon.png'),
 
   //dummy
   celana: require('../Images/imageDummy/celana.jpg'),