Voucher Percentage : Modifikasi fungsi voucher menjadi voucher percentage

view/MenuSelection.js

@@ -15,6 +15,7 @@ import i18n from 'i18n-js';
 import Constants from 'expo-constants';
 import requestParams from '../helper/requestParams';
 import CustomIosStatusBar from './CustomIosStatusBar';
+import Spinner from 'react-native-loading-spinner-overlay';
 
 class MenuSelection extends React.Component {
   constructor(props) {
@@ -219,6 +220,63 @@ class MenuSelection extends React.Component {
 
   }
 
+  handleVoucherSelect() {
+    //SPINNER ON 
+    this.setState({
+      spinner: true,
+    })
+    //CEK TYPE TRANSAKSINYA DELIVERY OR PICKUP, DICEK UNTUK DI MASUKAN DI PARAMATER PEMANGGILAN API
+    let type_trans = ""
+    if (this.props.type_pickup == true) {
+      type_trans = 'Pickup'
+    } else {
+      type_trans = 'Delivery'
+    }
+
+    let params = {
+      session_id: this.props.session_id,
+      trans_type: type_trans,
+      order_item: this.props.order_item,
+      reward_id: this.props.voucher.id,
+      delivery_charge: this.props.grabamount,
+    }
+    // MULAI DISINI PEMANGGILAN API DI MULAI, KALAU BERHASIL SET VALUE VOUCHER NYA DAN SPINER DIMATIKAN, KALAU GAGAL CABUT SESSION VOUCHER DAN SPINNER DI MATIKAN
+    Axios.post(this.props.BASE_URL + 'crm/v2/reward/get_value', params).then(res => {
+
+      if (this.state.state_add_remove_voucher == true) {
+        this.setState({
+          state_add_remove_voucher: false
+        })
+        this.props.removeVoucher()
+      } else {
+        let voucherProps = {
+          value_voucher: res.data.reward,
+          voucher: res.data.reward
+        }
+
+        this.props.setVoucher(voucherProps);
+      }
+
+      this.setState({
+        spinner: false,
+      })
+
+    }).catch(error => {
+      try {
+        let response = error.response.data
+        Alert.alert("", response.msg)
+        this.setState({
+          spinner: false,
+        })
+        // FUNGSI REDUX UNTUK HAPUS VOUCHER
+        this.props.removeVoucher()
+      } catch (error) {
+        Alert.alert("", error.toString())
+      }
+    })
+
+  }
+
   renderTabBar = ({ item }) => {
     return (
       <View style={{ flex: 0.5 }}>
@@ -269,6 +327,9 @@ class MenuSelection extends React.Component {
     }
 
     let res = this.props.addToChart(order_item)
+    if (this.props.value_voucher !== "") {
+      this.handleVoucherSelect()
+  }
     // console.log('After add : ' + JSON.stringify(res))
 
     // const list_order_item = this.props.order_item;
@@ -325,6 +386,9 @@ class MenuSelection extends React.Component {
 
       }
     }
+    if (this.props.value_voucher !== "") {
+      this.handleVoucherSelect()
+    }
   }
 
   scrollToIndex = (item) => {
@@ -360,6 +424,7 @@ class MenuSelection extends React.Component {
   render() {
     return (
       <View style={styles.container}>
+        <Spinner visible={this.state.spinner} textContent={'Loading...'} textStyle={{ color: "white" }} />
         {Platform.OS === 'ios' ? (
           <CustomIosStatusBar color='#CFB368' />
         ) : (
@@ -471,6 +536,8 @@ const mapStateToProps = (state) => {
     os_version: state.os_version,
     os_name: state.os_name,
     app_version: state.app_version,
+    value_voucher: state.value_voucher,
+    voucher: state.voucher,
   }
 }
 
@@ -501,6 +568,15 @@ const mapDispatchToProps = (dispacth) => {
         name_outlet: OutletChange.name_outlet,
       }
     }),
+    setVoucher: (voucherProps) => dispacth({
+      type: ActionType.SET_VOUCHER,
+      data: {
+
+        voucher: voucherProps.voucher,
+        value_voucher: voucherProps.value_voucher,
+
+      }
+    }),
 
   }
 }

view/ShoppingCart.js

@@ -13,6 +13,8 @@ import session from '../function/session';
 import NumberFormat from 'react-number-format';
 import MyStatusBar from './MyStatusBar';
 import Toast from 'react-native-tiny-toast';
+import Spinner from 'react-native-loading-spinner-overlay';
+
 
 
 YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
@@ -38,6 +40,8 @@ class ShoppingCart extends React.Component {
             my_lat: 0,
             my_long: 0,
             indicator: true,
+            spinner: false,
+            state_add_remove_voucher:false
 
             // dummyBalance : 155000,
             // dummyPoint : 20000
@@ -46,6 +50,8 @@ class ShoppingCart extends React.Component {
 
 
     componentDidMount() {
+
+        console.log("Base url : " + this.props.BASE_URL)
         if (!this.props.type_pickup) {
             this.getRate()
         }
@@ -78,14 +84,19 @@ class ShoppingCart extends React.Component {
 
     componentWillUnmount() {
         this._unsubscribe();
+
     }
 
     checkChangeTrans(val) {
+
         if (val == 'delivery') {
             // let typeProps = {
             // type_pickup: false,
             // }
             // this.props.setTypePickup(typeProps);
+            if (this.props.value_voucher !== "") {
+                this.handleVoucherSelect()
+            }
             this.setState({
                 checkedBalance: false,
                 checkedPoint: false,
@@ -93,12 +104,16 @@ class ShoppingCart extends React.Component {
                 pointsused: 0,
                 balanceused: 0
             })
+
             this.props.navigation.navigate("Delivery Address", { from: 'shoppingCart' })
         } else {
             // let typeProps = {
             // type_pickup: true,
             // }
             // this.props.setTypePickup(typeProps);
+            if (this.props.value_voucher !== "") {
+                this.handleVoucherSelect()
+            }
             this.setState({
                 checkedBalance: false,
                 checkedPoint: false,
@@ -106,27 +121,99 @@ class ShoppingCart extends React.Component {
                 pointsused: 0,
                 balanceused: 0
             })
+
             this.props.navigation.navigate('Pickup Name', { from: 'shoppingCart' })
         }
     }
 
 
-    onChange(params) {
-        console.log(params);
+    // BY WAHYU ADJIE PRASETYO
+    // FUNGSI INI DI PANGGIL DI SETIAP INPUT DI SHOPING CART
+
+    handleVoucherSelect() {
+        //SPINNER ON 
+        this.setState({
+            spinner: true,
+        })
+        //CEK TYPE TRANSAKSINYA DELIVERY OR PICKUP, DICEK UNTUK DI MASUKAN DI PARAMATER PEMANGGILAN API
+        let type_trans = ""
+        if (this.props.type_pickup == true) {
+            type_trans = 'Pickup'
+        } else {
+            type_trans = 'Delivery'
+        }
+
+        let params = {
+            session_id: this.props.session_id,
+            trans_type: type_trans,
+            order_item: this.props.order_item,
+            reward_id: this.props.voucher.id,
+            delivery_charge: this.props.grabamount,
+        }
+        // MULAI DISINI PEMANGGILAN API DI MULAI, KALAU BERHASIL SET VALUE VOUCHER NYA DAN SPINER DIMATIKAN, KALAU GAGAL CABUT SESSION VOUCHER DAN SPINNER DI MATIKAN
+        Axios.post(this.props.BASE_URL + 'crm/v2/reward/get_value', params).then(res => {
+
+            if (this.state.state_add_remove_voucher == true) {
+                this.setState({
+                    state_add_remove_voucher: false
+                })
+                this.props.removeVoucher()
+            } else{
+                let voucherProps = {
+                    value_voucher: res.data.reward,
+                    voucher: res.data.reward
+                }
+    
+                this.props.setVoucher(voucherProps);
+            }
+               
+            this.setState({
+                spinner: false,
+            })
+
+        }).catch(error => {
+            try {
+                let response = error.response.data
+                Alert.alert("", response.msg)
+                this.setState({
+                    spinner: false,
+                })
+                // FUNGSI REDUX UNTUK HAPUS VOUCHER
+                this.props.removeVoucher()
+            } catch (error) {
+                Alert.alert("", error.toString())
+            }
+        })
+
     }
 
+
     handleRemoveVoucher() {
+        //panggil spiner
+        if (this.props.value_voucher !== "") {
+            this.handleVoucherSelect()
+            this.setState({
+                state_add_remove_voucher: true
+            })
+        }
         this.setState({
             checkedBalance: false,
             checkedPoint: false,
             checkedBalancePoint: false,
             pointsused: 0,
-            balanceused: 0
+            balanceused: 0,
+            state_add_remove_voucher: true
         })
-        this.props.removeVoucher()
+
+        // this.props.removeVoucher()
+
     }
 
     handleAddVoucher() {
+        if (this.props.value_voucher !== "") {
+            this.handleVoucherSelect()
+        }
+
         this.setState({
             checkedBalance: false,
             checkedPoint: false,
@@ -138,6 +225,7 @@ class ShoppingCart extends React.Component {
     }
 
     handleMin(item, index) {
+
         this.setState({
             checkedBalance: false,
             checkedPoint: false,
@@ -145,13 +233,8 @@ class ShoppingCart extends React.Component {
             pointsused: 0,
             balanceused: 0
         })
-        // console.log("hai")
         const list_order_item = this.props.order_item;
-        // console.log('wakwaw')
-
         let is_xist = list_order_item.find(row => row.id == item.id)
-        // console.log('next')
-        // console.log(JSON.stringify(is_xist))
         if (is_xist) {
             if (is_xist.quantity != 0) {
                 const order_item = {
@@ -173,7 +256,11 @@ class ShoppingCart extends React.Component {
                             },
                             {
                                 text: i18n.t('alertyes'), onPress: () => {
+
                                     this.props.reduceQuantityItem(order_item)
+                                    if (this.props.value_voucher !== "") {
+                                        this.handleVoucherSelect()
+                                    }
 
                                     if (is_xist.quantity == 0) {
                                         const order_item = {
@@ -189,6 +276,7 @@ class ShoppingCart extends React.Component {
 
                                         this.props.removeFromChart(order_item)
                                     }
+
                                 }
                             },
                         ],
@@ -196,15 +284,16 @@ class ShoppingCart extends React.Component {
                     )
                 } else {
                     this.props.reduceQuantityItem(order_item)
+                    if (this.props.value_voucher !== "") {
+                        this.handleVoucherSelect()
+                    }
                 }
             }
         }
-    }
-
-    deleteItem() {
 
     }
 
+
     handleAdd(item, index) {
         this.setState({
             checkedBalance: false,
@@ -233,6 +322,10 @@ class ShoppingCart extends React.Component {
             quantity = is_xist.quantity
         }
 
+        if (this.props.value_voucher !== "") {
+            this.handleVoucherSelect()
+        }
+
     }
 
     checkedSelection(val) {
@@ -475,6 +568,15 @@ class ShoppingCart extends React.Component {
         })
     }
 
+    addItem() {
+
+        if (this.props.value_voucher !== "") {
+            this.handleVoucherSelect()
+        }
+
+        this.props.navigation.goBack()
+    }
+
 
     render() {
         // console.log('tes balance poin selection')
@@ -487,7 +589,9 @@ class ShoppingCart extends React.Component {
         return (
             <ScrollView style={styles.container}>
                 <MyStatusBar />
+
                 <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+                    <Spinner visible={this.state.spinner} textContent={'Loading...'} textStyle={{ color: "white" }} />
                     {/* <TouchableOpacity style={styles.buttonDelivery} onPress={() => this.checkChangeTrans('delivery')}>
                         <Text style={{ textAlign: 'center', color: '#354175', fontWeight: 'bold' }}>{i18n.t('delivery')}</Text>
                     </TouchableOpacity>
@@ -539,7 +643,7 @@ class ShoppingCart extends React.Component {
                 </View>
                 <View style={styles.header}>
                     <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>{i18n.t('yourOrders')}</Text>
-                    <TouchableOpacity style={{ marginRight: -8 }} onPress={() => this.props.navigation.goBack()}>
+                    <TouchableOpacity style={{ marginRight: -8 }} onPress={() => this.addItem()}>
                         <Text style={{ textAlign: 'center', fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Light' }}>{i18n.t('addMore')}</Text>
                     </TouchableOpacity>
                 </View>
@@ -705,7 +809,7 @@ class ShoppingCart extends React.Component {
                         </>
                     ) : (
                             <>
-                                <View style={{ alignItems: 'center'  }}>
+                                <View style={{ alignItems: 'center' }}>
 
                                     {
 
@@ -746,7 +850,7 @@ class ShoppingCart extends React.Component {
                                     }
                                 </View>
                                 <View style={{ alignItems: 'center', display: 'none' }}>
-                                    <TouchableOpacity activeOpacity={1}  onPress={() => {Toast.show(i18n.t('alertVoucher'))}}>
+                                    <TouchableOpacity activeOpacity={1} onPress={() => { Toast.show(i18n.t('alertVoucher')) }}>
                                         <Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
                                             <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                                                 <View>
@@ -761,7 +865,7 @@ class ShoppingCart extends React.Component {
 
                                 </View>
                                 <View style={{ alignItems: 'center', display: 'none' }}>
-                                    <TouchableOpacity activeOpacity={1}  onPress={() => {Toast.show(i18n.t('alertVoucher'))}}>
+                                    <TouchableOpacity activeOpacity={1} onPress={() => { Toast.show(i18n.t('alertVoucher')) }}>
                                         <Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
                                             <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                                                 <View>
@@ -782,21 +886,21 @@ class ShoppingCart extends React.Component {
                         <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 }}>
                             <View>
                                 <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{i18n.t('yourBalance')}</Text>
-                                <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', display:'none' }}>{i18n.t('yourPoints')}</Text>
+                                <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', display: 'none' }}>{i18n.t('yourPoints')}</Text>
                             </View>
                             <View style={{ alignItems: 'flex-end' }}>
                                 <NumberFormat decimalScale={0} value={this.state.kasproBalance} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
-                                <NumberFormat decimalScale={0} value={this.state.kasproPoint} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', display:'none' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
+                                <NumberFormat decimalScale={0} value={this.state.kasproPoint} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', display: 'none' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
                             </View>
                         </View>
                         <View style={{ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1, borderColor: 'grey' }}>
                             <View style={{ marginTop: 5 }}>
                                 <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{i18n.t('yourBalanceUsed')}</Text>
-                                <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', display:'none' }}>{i18n.t('yourPointsUsed')}</Text>
+                                <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', display: 'none' }}>{i18n.t('yourPointsUsed')}</Text>
                             </View>
                             <View style={{ marginTop: 5, alignItems: 'flex-end' }}>
                                 <NumberFormat decimalScale={0} value={this.state.balanceused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
-                                <NumberFormat decimalScale={0} value={this.state.pointsused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', display:'none' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
+                                <NumberFormat decimalScale={0} value={this.state.pointsused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', display: 'none' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
                             </View>
                         </View>
                     </Card>
@@ -1175,6 +1279,16 @@ const mapDispatchToProps = (dispacth) => {
         removeVoucher: () => dispacth({
             type: ActionType.REMOVE_VOUCHER
         }),
+
+        setVoucher: (voucherProps) => dispacth({
+            type: ActionType.SET_VOUCHER,
+            data: {
+
+                voucher: voucherProps.voucher,
+                value_voucher: voucherProps.value_voucher,
+
+            }
+        }),
     }
 }
 
@@ -1201,7 +1315,8 @@ const mapStateToProps = (state) => {
         grabpickup: state.grabpickup,
         grabdropoff: state.grabdropoff,
         grabdestination: state.grabdestination,
-        BASE_URL: state.BASE_URL
+        BASE_URL: state.BASE_URL,
+
     }
 }