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/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'),