Merge branch 'didam' into 'master'

update siyank

See merge request !33

App/Containers/DetailProductScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, NativeModules, Platform, View, TouchableOpacity, Image, BackHandler, AsyncStorage, StatusBar } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+const { StatusBarManager } = NativeModules;
+const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20: StatusBarManager.HEIGHT;
+import styles from './Styles/DetailProductScreenStyle'
+import Carousel from 'react-native-snap-carousel'
+import { Images, Metrics } from '../Themes'
+import BaseText from '../Components/BaseText';
+import Api from '../Services/Api';
+import Constant from '../Lib/Constant';
+import { formatRp, titleCase } from '../Lib/Utils';
+
+class DetailProductScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      bannerDummy: [Images.jam, Images.sepatu, Images.jaket, Images.celana],
+      activeSlide: 0,
+      productId: this.props.navigation.state.params.productId == undefined? 0 : this.props.navigation.state.params.productId,
+      dataProduct: {},
+      currency: '',
+      varient: [],
+      opacity: 0,
+      auth: this.props.auth
+    }
+  }
+
+  componentDidMount() {
+    this.getCurrency()
+    this.getProductDetail()
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
+  getProductDetail() {
+    // console.log(this.state.productId)
+    let payload = {"user_id": this.props.auth != null? 0 : 1}
+    Api.create().getProductDetail(this.state.productId, payload).then((response) => {
+      if (response.data.status == 'success') {
+        this.setState({dataProduct: response.data.data, varient: response.data.data.varient})
+      }
+    })
+  }
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  _renderItem = ({item, index}) => {
+    return (
+        <View style={{height: '100%'}}>
+          <Image source={{uri: item.varient_image}} style={{width: Metrics.screenWidth, height: '100%'}}/>
+        </View>
+    );
+  }
+  
+  async getCurrency() {
+    let currency = await AsyncStorage.getItem(Constant.GLOBAL_CURRENCY)
+    this.setState({currency})
+  }
+
+  handleScroll = (event) => {
+    var value = event.nativeEvent.contentOffset.y
+    if ( value <= 40 ) {
+      this.setState({opacity: value * 2 / 100})
+    } else {
+      this.setState({opacity: .5})
+    }
+    console.log(value)
+  }
+
+  handleWishlist() {
+    let payload = {"product_id": this.state.dataProduct.product_id}
+    if (this.state.auth.user != null) {
+      if (this.state.dataProduct.is_wishlist) {
+        Api.create().deleteWishlist(this.state.dataProduct.product_id).then((response) => {
+          console.log(response)
+          this.getProductDetail()
+        })
+      } else {
+        Api.create().addWishlist(payload).then((response) => {
+          console.log(response)
+          this.getProductDetail()
+        })
+      }
+      
+    } else {
+      
+    }
+  }
+
+  render () {
+    return (
+      <View style={{flex: 1}}>
+        <StatusBar backgroundColor={this.state.opacity >= .5? '#4cc9f0' : 'transparent'} translucent={true} barStyle={this.state.opacity >= .5? 'dark-content' : 'light-content'}/>
+        <View style={{zIndex: 1, flexGrow: 1, alignItems: 'center', width: '100%', elevation: 0, position: 'absolute', top: 0, paddingBottom: 10, paddingHorizontal: 25, paddingTop: STATUSBAR_HEIGHT + 10, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:`rgba(255, 255, 255, ${this.state.opacity})`}}>
+          <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
+            <Image source={Images.icon_backbulat} style={{width: 50, height: 50}}/>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => this.props.navigation.navigate('CartScreen')}>
+            <Image source={Images.icon_chartbulat} style={{width: 50, height: 50}}/>
+          </TouchableOpacity>
+        </View>
+        <View>
+          <ScrollView style={{backgroundColor:'white'}} onScroll={this.handleScroll} showsVerticalScrollIndicator={false}>
+            <View style={{height: 450, width: '100%', backgroundColor:'white'}}>
+              <Carousel
+                ref={(c) => { this._carousel = c; }}
+                data={this.state.varient}
+                renderItem={this._renderItem}
+                sliderWidth={Metrics.screenWidth}
+                itemWidth={Metrics.screenWidth}
+                autoplay={true}
+                loop={true}
+                loopClonesPerSide={this.state.varient.length}
+                // layout={'stack'}
+                onSnapToItem={(index) => this.setState({ activeSlide: index }) }
+              />
+            </View>
+            <View style={{width: '100%', backgroundColor:'transparent', marginTop: -100}}>
+              {this.state.varient.length > 0 && <View style={{ backgroundColor:'transparent', alignItems:'center', width: "100%", padding: 20, flexDirection: 'row', justifyContent: 'center',}}>
+                {this.state.varient.map((item, index) => {
+                  return(
+                    <View key={index} style={{backgroundColor: this.state.activeSlide == index? '#4cc9f0' : '#e6e6e6', width: this.state.activeSlide == index? 10 : 5, height: this.state.activeSlide == index? 10 : 5, borderRadius: 10, marginLeft: index == 0? 0 : 10}}/>
+                  )
+                })}
+              </View>}
+              <View style={{width: '100%', backgroundColor:'white', borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingTop: 20, paddingBottom: 50}}>
+                <View style={{flexDirection: 'row', paddingHorizontal: 25}}>
+                  <View style={{width: '80%'}}>
+                    {/* <BaseText type={"bold"} text={this.state.dataProduct.product_name}/> */}
+                    <BaseText type={"bold"} text={titleCase(this.state.dataProduct.product_name)} style={{fontSize: 20, color: '#4b4b4b', opacity: .8}}/>
+                    <BaseText text={formatRp(this.state.currency, this.state.dataProduct.price)} type={"bold"} style={{fontSize: 20, opacity: .8, color: '#4cc9f0', marginBottom: 10,}}/>
+                    <BaseText text={'Harga Grosir\n50-100 : Rp. 2.300.000\n101-150 : Rp. 2.200.000\n151-200 : Rp. 2.100.000'} type={'bold'} style={{color: '#4b4b4b', opacity: .7}}/>
+                  </View>
+                  <View style={{flexGrow: 1, width:'20%', alignItems: 'center'}}>
+                    <TouchableOpacity onPress={() => this.handleWishlist()}>
+                      {this.state.dataProduct.is_wishlist? 
+                      <Image source={Images.wishlistBulat} style={{width: 50, height: 50}}/>
+                      : 
+                      <Image source={Images.icon_wishlistgray} style={{width: 50, height: 50}}/>
+                      }
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{marginTop: 10}}>
+                      <Image source={Images.icon_sharegray} style={{width: 50, height: 50}}/>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+                <View>
+                  <View style={{height: 1, width: '100%', backgroundColor: '#d8d8d8', marginVertical: 20}}/>
+                  <View style={{paddingHorizontal: 25}}>
+                    <BaseText type={"bold"} text={'Deskripsi'} style={{fontSize: 16, color: '#4b4b4b', marginBottom: 10}}/>
+                    <BaseText type={"regular"} text={this.state.dataProduct.size_description}/>
+                  </View>
+                </View>
+              </View>
+            </View>
+            <View style={{width: '100%', backgroundColor:'#4cc9f0', marginTop: -25, borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingHorizontal: 25, paddingTop: 20, paddingBottom: 40}}>
+              <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 25, alignItems:'center'}}>
+                <Image source={Images.icon_freedeliv} style={{width: 120, height: 50, resizeMode: 'stretch'}}/>
+                <Image source={Images.icon_guarantee} style={{width: 120, height: 50, resizeMode: 'stretch'}}/>
+              </View>
+            </View>
+            <View style={{width: '100%', backgroundColor:'white', marginTop: -25, borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingTop: 20, paddingBottom: 40, paddingHorizontal: 25}}>
+            </View>
+          </ScrollView>
+        </View>
+      </View> 
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    auth: state.auth
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DetailProductScreen)

App/Containers/ListSearchScreen.js

@@ -28,15 +28,22 @@ class ListSearchScreen extends Component {
         { nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: '#569a78' },
       ],
       listData: [],
+      dataSorting: ['termurah', 'termahal'],
+      dataCategory: [],
+      categoryId: [],
       currency: '',
       offset: 0,
-      search: ''
+      search: '',
+      urutan: '',
+      sorting: false,
+      category: false
     }
   }
 
   componentDidMount() {
     this.getCurrency()
     this.getAllProduct()
+    this.getCategory()
     BackHandler.addEventListener("hardwareBackPress", this.backAction);
   }
 
@@ -44,8 +51,8 @@ class ListSearchScreen extends Component {
     let payload = {
       "offset": this.state.offset,
       "limit": 10,
-      "sorting": "termurah",
-      "category": [],
+      "sorting": this.state.urutan,
+      "category": this.state.categoryId,
       "search": this.state.search,
       "min": 0,
       "max": 0
@@ -59,6 +66,15 @@ class ListSearchScreen extends Component {
     })
   }
 
+  getCategory() {
+    Api.create().getCategory().then((response) => {
+      console.log(response.data)
+      if (response.data.status == 'success') {
+        this.setState({dataCategory: response.data.data})
+      }
+    })
+  }
+
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.backAction);
   }
@@ -86,6 +102,20 @@ class ListSearchScreen extends Component {
     })
   }
 
+  handleCategory(item) {
+    let categoryId = this.state.categoryId
+    let indexId = this.state.categoryId.findIndex((val) => val == item.cat_id)
+    if (indexId == -1) {
+      categoryId.push(item.cat_id)
+    } else {
+      categoryId.splice(indexId, 1)
+    }
+    this.setState({listData: [], categoryId, category: false}, () => {
+      this.refreshState()
+      this.getAllProduct()
+    })
+  }
+
   render() {
     return (
       <View style={{ flex: 1 }}>
@@ -105,17 +135,49 @@ class ListSearchScreen extends Component {
           }} 
         value={this.state.search} onChangeText={(search) => this.setState({search})} placeholder={'Cari Product'} 
         typeSearch={true} onBackPress={() => this.props.navigation.goBack()} />
-        <Modal animationOut='slideOutRight' animationOutTiming={1000} isVisible={this.state.modalPhoto} onBackButtonPress={() => this.setState({ modalPhoto: false })} style={{ paddingHorizontal: 10 }}>
-          <View style={{ backgroundColor: 'white', width: '90%', alignSelf: 'center' }}>
+        <Modal 
+          animationOut='slideOutDown' 
+          // animationOutTiming={1000}
+          isVisible={this.state.sorting} onBackButtonPress={() => this.setState({ sorting: false })} onBackdropPress={() => this.setState({sorting: false})} style={{ paddingHorizontal: 10 }}>
+          <View style={{ backgroundColor: 'white', width: '90%', alignSelf: 'center', borderRadius: 5}}>
             <View style={{ height: 50, borderBottomColor: '#4cc9f0', borderBottomWidth: 1, justifyContent: 'center', paddingHorizontal: 20 }}>
-              <BaseText type={"bold"} text={'Pilih Aksi!'} style={{ fontSize: 16, color: '#4cc9f0' }} />
+              <BaseText type={"bold"} text={'Urutan By'} style={{ fontSize: 16, color: '#4cc9f0' }} />
             </View>
-            <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 10, borderBottomColor: 'black', borderBottomWidth: .4, }} onPress={() => this.setState({ modalPhoto: false }, () => this.handleImagePicker('Galeri'))}>
-              <BaseText type={"regular"} text={'Galeri'} style={{ fontSize: 16, color: 'black' }} />
-            </TouchableOpacity>
-            <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 10 }} onPress={() => this.setState({ modalPhoto: false }, () => this.handleImagePicker('Camera'))}>
-              <BaseText type={"regular"} text={'Kamera'} style={{ fontSize: 16, color: 'black' }} />
-            </TouchableOpacity>
+            {this.state.dataSorting.map((item, index) => {
+              return (
+              <TouchableOpacity 
+                key={index}
+                style={{ flexDirection: 'row', justifyContent: this.state.urutan == item? 'space-between' : 'flex-start', alignItems:'center', backgroundColor: this.state.urutan == item? 'rgba(76, 201, 240, .1)' : 'transparent', paddingHorizontal: 20, paddingVertical: 15, borderBottomColor: 'black', borderBottomWidth: this.state.dataSorting.length -1 == index? 0 : .4, }} 
+                onPress={() => {
+                  this.setState({listData: [], urutan: item, sorting: false}, () => {
+                    this.refreshState()
+                    this.getAllProduct()
+                  })
+                }}>
+                <BaseText type={"regular"} text={titleCase(item)} style={{ fontSize: 16, color: 'black' }} />
+                {this.state.urutan == item && <Image source={Images.radioOn} style={{width: 20, height: 20,}}/>}
+              </TouchableOpacity>)
+            })}
+          </View>
+        </Modal>
+        <Modal 
+          animationOut='slideOutDown' 
+          // animationOutTiming={1000}
+          isVisible={this.state.category} onBackButtonPress={() => this.setState({ category: false })} onBackdropPress={() => this.setState({category: false})} style={{ paddingHorizontal: 10 }}>
+          <View style={{ backgroundColor: 'white', width: '90%', alignSelf: 'center', borderRadius: 5}}>
+            <View style={{ height: 50, borderBottomColor: '#4cc9f0', borderBottomWidth: 1, justifyContent: 'center', paddingHorizontal: 20 }}>
+              <BaseText type={"bold"} text={'Kategori By'} style={{ fontSize: 16, color: '#4cc9f0' }} />
+            </View>
+            {this.state.dataCategory.map((item, index) => {
+              return (
+              <TouchableOpacity 
+                key={index}
+                style={{ flexDirection: 'row', justifyContent: this.state.categoryId.includes(item.cat_id)? 'space-between' : 'flex-start', alignItems:'center', backgroundColor: this.state.categoryId.includes(item.cat_id)? 'rgba(76, 201, 240, .1)' : 'transparent', paddingHorizontal: 20, paddingVertical: 15, borderBottomColor: 'black', borderBottomWidth: this.state.dataCategory.length -1 == index? 0 : .4, }} 
+                onPress={() => this.handleCategory(item)}>
+                <BaseText type={"regular"} text={titleCase(String(item.title).toLocaleLowerCase())} style={{ fontSize: 16, color: 'black' }} />
+                {this.state.categoryId.includes(item.cat_id) && <Image source={Images.radioOn} style={{width: 20, height: 20,}}/>}
+              </TouchableOpacity>)
+            })}
           </View>
         </Modal>
         <View style={{ backgroundColor: '#4cc9f0', flex: 1 }}>
@@ -144,16 +206,18 @@ class ListSearchScreen extends Component {
                   }
                 }}
                 renderItem={({ item, index }) => (
-                  <ImageBackground source={{uri: item.product_image}} imageStyle={{resizeMode: 'cover', borderRadius: 15}} style={{ flex: 1, flexDirection: 'column', margin: 10, borderRadius: 15, marginTop: index == 0 ? 20 : index == 1 ? 20 : 0 }}>
-                    <View style={{ width: '100%', height: 270, justifyContent: 'flex-end'}}>
-                      <View style={{backgroundColor:'rgba(255,255,255,.5)', padding: 20}}>
-                        <BaseText type={"bold"} text={titleCase(item.product_name)} style={{ fontSize: 14, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
-                        <BaseText type={"regular"} text={formatRp(this.state.currency, item.price)} style={{ fontSize: 10, color: 'black', textAlign: 'left', marginTop: 5 }} />
+                  <TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', {productId: item.product_id})} style={{ flex: 1, borderRadius: 15 }}>
+                    <ImageBackground source={{uri: item.product_image}} imageStyle={{resizeMode: 'cover', borderRadius: 15}} style={{ flex: 1, flexDirection: 'column', margin: 10, borderRadius: 15, marginTop: index == 0 ? 20 : index == 1 ? 20 : 0 }}>
+                      <View style={{ width: '100%', height: 270, justifyContent: 'flex-end'}}>
+                        <View style={{backgroundColor:'rgba(255,255,255,.5)', padding: 20}}>
+                          <BaseText type={"bold"} text={titleCase(item.product_name)} style={{ fontSize: 14, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
+                          <BaseText type={"regular"} text={formatRp(this.state.currency, item.price)} style={{ fontSize: 10, color: 'black', textAlign: 'left', marginTop: 5 }} />
+                        </View>
                       </View>
-                    </View>
-                  </ImageBackground>
+                    </ImageBackground>
+                  </TouchableOpacity>
+                  
                 )}
-                //Setting the number of column
                 numColumns={2}
                 keyExtractor={(item, index) => index.toString()}
               />
@@ -170,36 +234,35 @@ class ListSearchScreen extends Component {
                   }
                 }}
                 renderItem={({ item, index }) => (
-                  <View style={{ flex: 1, flexDirection: 'row', marginTop: index == 0 ? 20 : 10, borderRadius: 15, elevation: 2, margin: 5 }}>
+                  <TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', {productId: item.product_id})} style={{ flex: 1, flexDirection: 'row', marginTop: index == 0 ? 20 : 10, borderRadius: 15, elevation: 2, margin: 5 }}>
                     <Image 
                       onError={(e) => {
                         console.log('boooz', e.nativeEvent.error);
                         // this.setState({thumbnail: thumbnailDefaultImage});
                         }
                       } 
-                      source={{uri: item.product_image}} style={{ width: '40%', backgroundColor: item.color, borderTopLeftRadius: 15, borderBottomLeftRadius: 15 }} />
+                      source={{uri: item.product_image}} style={{ width: '40%', borderTopLeftRadius: 15, borderBottomLeftRadius: 15 }} />
                     <View style={{ width: '60%', height: 140, justifyContent: 'flex-start', padding: 20, backgroundColor: 'white', borderTopRightRadius: 15, borderBottomRightRadius: 15 }}>
                       <BaseText type={"regular"} text={item.product_name} style={{ fontSize: 12, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
                       <BaseText type={"bold"} text={formatRp(this.state.currency, item.price)} style={{ fontSize: 14, color: 'black', textAlign: 'left', marginTop: 5 }} />
                     </View>
-                  </View>
+                  </TouchableOpacity>
                 )}
-                //Setting the number of column
                 numColumns={1}
                 keyExtractor={(item, index) => index.toString()}
               />
             </View>
           )}
 
-          <View style={{ width: '60%', backgroundColor: 'white', position: 'absolute', bottom: 25, alignSelf: 'center', borderRadius: 20, justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10, elevation: 5 }}>
-            <TouchableOpacity style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20 }}>
-              <Image source={Images.kategori} style={{ height: 16, width: 16, }} />
-              <BaseText type={"regular"} text={'Kategori'} style={{ fontSize: 12, color: '#4cc9f0', marginLeft: 10 }} />
+          <View style={{ width: '60%', backgroundColor: 'white', position: 'absolute', bottom: 25, alignSelf: 'center', borderRadius: 20, justifyContent: 'space-between', flexDirection: 'row', elevation: 5 }}>
+            <TouchableOpacity onPress={() => this.setState({category: true})} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.categoryId.length > 0 ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopLeftRadius: 20, borderBottomLeftRadius: 20}}>
+              <Image source={Images.kategori} style={{ height: 16, width: 16, tintColor: this.state.categoryId.length > 0 ? 'white' : null}} />
+              <BaseText type={"bold"} text={'Kategori'} style={{ fontSize: 12, color: this.state.categoryId.length > 0 ? 'white' : '#4cc9f0', marginLeft: 10 }} />
             </TouchableOpacity>
-            <View style={{ borderWidth: .4, borderColor: '#4cc9f0' }} />
-            <TouchableOpacity style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20 }}>
-              <Image source={Images.urutan} style={{ height: 16, width: 16 }} />
-              <BaseText type={"regular"} text={'Urutan'} style={{ fontSize: 12, color: '#4cc9f0', marginLeft: 10 }} />
+            <View style={{ borderWidth: .4, borderColor: this.state.categoryId.length > 0 && this.state.urutan != ''? 'white' :  '#4cc9f0' }} />
+            <TouchableOpacity onPress={() => this.setState({sorting: true})} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.urutan != '' ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopRightRadius: 20, borderBottomRightRadius: 20}}>
+              <Image source={Images.urutan} style={{ height: 16, width: 16, tintColor: this.state.urutan != '' ? 'white' : null}} />
+              <BaseText type={"regular"} text={'Urutan'} style={{ fontSize: 12, color: this.state.urutan != '' ? 'white' : '#4cc9f0', marginLeft: 10 }} />
             </TouchableOpacity>
           </View>
 

App/Containers/Styles/DetailProductScreenStyle.js

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

App/Lib/Utils.js

@@ -28,7 +28,7 @@ export function formatRp(currency, num, fixed = 0) {
 	num = parseFloat(num);
 	var p = num.toFixed(fixed).split('.');
 	return (
-		`${currency} ` +
+		`${currency}. ` +
 		p[0]
 			.split('')
 			.reverse()

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import DetailProductScreen from '../Containers/DetailProductScreen'
 import ComplainOrderScreen from '../Containers/ComplainOrderScreen'
 import ForgotPasswordScreen from '../Containers/ForgotPasswordScreen'
 import TransactionResultScreen from '../Containers/TransactionResultScreen'
@@ -42,6 +43,7 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  DetailProductScreen: { screen: DetailProductScreen },
   ComplainOrderScreen: { screen: ComplainOrderScreen },
   ForgotPasswordScreen: { screen: ForgotPasswordScreen },
   TransactionResultScreen: { screen: TransactionResultScreen },

App/Services/Api.js

@@ -71,8 +71,12 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   const editProfile = (body) => api.post('edit_profile', body)
   const editPhotoProfile = (body) => api.post('edit_photo', body)
   const getAddress = () => api.get('get_address')
+
+  // Wishlist
   const getWhislist = (body) => api.post('get_wishlist', body)
   const searchWhislist = (body) => api.post('search_wishlist', body)
+  const addWishlist = (body) => api.post('add_wishlist', body)
+  const deleteWishlist = (wishlistId) => api.post(`delete_wishlist/${wishlistId}`)
 
   // Address
   const getProvinsi = () => api.get('get_province')
@@ -94,6 +98,8 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   // Product
   const getCategory = () => api.get('get_category')
   const getAllProduct = (body) => api.post('get_all_product', body)
+  const getProductDetail = (productId, body) => api.post(`detail_product/${productId}`, body)
+  const getPriceRange = (body) => api.post('get_price_range', body)
 
   // About App
   const appInfo = () => api.get('app_info')
@@ -149,6 +155,10 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
     addCheckout,
     getCategory,
     getAllProduct,
+    getProductDetail,
+    getPriceRange,
+    addWishlist,
+    deleteWishlist
   }
 }
 

App/Themes/Images.js

@@ -40,6 +40,10 @@ const images = {
   icon_close: require('../Images/Icons/icon_close.png'),
   map_addpin: require('../Images/Icons/map_addpin.png'),
   icon_freedeliv: require('../Images/Icons/icon_freedeliv.png'),
+  icon_chartbulat: require('../Images/Icons/icon_chartbulat.png'),
+  icon_guarantee: require('../Images/Icons/icon_guarantee.png'),
+  icon_wishlistgray: require('../Images/Icons/icon_wishlistgray.png'),
+  icon_sharegray: require('../Images/Icons/icon_sharegray.png'),
   
   // big image
   letter: require('../Images/letter.png'),