· 6 years ago · Sep 13, 2019, 12:18 PM
1import React, { Component } from 'react'
2import { View, Text, Animated, Image, StatusBar, Dimensions, FlatList, ActivityIndicator, Easing, Modal, SafeAreaView } from 'react-native'
3import { Button, SpinnerButton, TagBadge, LoadingImage, Spinner, Counter, CaseSelector, VerticalProduct, VerticalPlaceHolder } from '../../components'
4import styles from './style'
5import LinearGradient from 'react-native-linear-gradient'
6import Api from '../../utils/Api'
7import Swiper from 'react-native-swiper'
8import Config from 'react-native-config'
9import posed from 'react-native-pose'
10import { CartStore, UserStore } from '../../stores'
11import { inject, observer } from 'mobx-react/native'
12import _ from 'lodash'
13import moment from 'moment'
14// import { Easing } from 'react-native-reanimated'
15import Toast, { DURATION } from 'react-native-easy-toast'
16import FastImage from 'react-native-fast-image'
17import Placeholder, { Line, Media } from 'rn-placeholder'
18import Colors from '../../utils/Colors'
19import ImageViewer from 'react-native-image-zoom-viewer'
20const { width, height } = Dimensions.get('window')
21import Icon from 'react-native-vector-icons/EvilIcons'
22import I18n from '../../i18n'
23
24const Checkout = posed.View({
25 open: { y: 0, opacity: 1 },
26 closed: { y: 100, opacity: 0 },
27})
28
29const HEADER_MAX_HEIGHT = 400
30const HEADER_MIN_HEIGHT = 80
31const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT
32
33@inject('CartStore')
34@observer
35class ProductInfo extends Component {
36 constructor(props) {
37 super(props)
38 this.state = {
39 loading: true,
40 imgIndex: 1,
41 qua: 1,
42 isOpen: false,
43 product: {
44 product: {},
45 },
46 more_from_warehouse: [],
47 similar_products: [],
48 images_zoom: [],
49 zoomVisible: false,
50 zoomIndex: 0,
51 clicked: false,
52 }
53 this.scrollY = new Animated.Value(0)
54 this.hiddenY = new Animated.Value(-50)
55 this.headerTextPosition = new Animated.Value(10)
56 this.headerTextOpacity = new Animated.Value(0)
57 this.offset = 0
58 this.title_visible = false
59 }
60
61 add = e => {
62 let { product } = this.state.product
63 if (this.props.CartStore.calcBrandCases(product.warehouse.org_warehouse_id, this.state.qua + 1) > 50) {
64 this.refs.toast.show('The total quantity of cases is limited to 50 per each brand', 3000)
65 this.setState({ qua: Math.min(+this.state.qua, product.inventory) })
66 return
67 }
68 this.setState({ qua: Math.min(+this.state.qua + 1, product.inventory) })
69 }
70
71 remove = e => {
72 let { product } = this.state.product
73 this.setState({ qua: Math.min(+Math.max(+this.state.qua - 1, 1), product.inventory) })
74 }
75
76 setQua = qua => {
77 let { product } = this.state.product
78 if (this.props.CartStore.calcBrandCases(product.warehouse.org_warehouse_id, +qua) > 50) {
79 this.refs.toast.show('The total quantity of cases is limited to 50 per each brand', 3000)
80 this.setState({ qua: Math.min(+this.state.qua, product.inventory) })
81 return
82 }
83 this.setState({ qua: Math.min(+qua, product.inventory) })
84 }
85
86 componentWillUnmount() {
87 this.scrollY.removeListener(this.listender_id)
88 }
89
90 onScoll = e => {
91 var currentOffset = e.value
92 if (currentOffset > 450 && !this.title_visible) {
93 Animated.parallel([
94 Animated.timing(this.headerTextPosition, {
95 toValue: 0,
96 duration: 250,
97 easing: Easing.ease,
98 useNativeDriver: true,
99 }),
100 Animated.timing(this.headerTextOpacity, {
101 toValue: 1,
102 duration: 250,
103 easing: Easing.ease,
104 useNativeDriver: true,
105 }),
106 ]).start()
107 this.title_visible = true
108 }
109 if (currentOffset <= 450 && this.title_visible) {
110 Animated.parallel([
111 Animated.timing(this.headerTextPosition, {
112 toValue: 10,
113 duration: 250,
114 easing: Easing.ease,
115 useNativeDriver: true,
116 }),
117 Animated.timing(this.headerTextOpacity, {
118 toValue: 0,
119 duration: 250,
120 easing: Easing.ease,
121 useNativeDriver: true,
122 }),
123 ]).start()
124 this.title_visible = false
125 }
126 // console.log(currentOffset)
127
128 var direction = currentOffset > this.offset && currentOffset > 400 ? this.barPosition(-100) : this.barPosition(0)
129 if (currentOffset < 400) this.barPosition(-100)
130 // console.log({ direction })
131 this.offset = currentOffset
132 }
133
134 barPosition = pos => {
135 if (pos == 0 && this.visible) {
136 return
137 }
138 if (pos != 0 && !this.visible) {
139 return
140 }
141 Animated.timing(this.hiddenY, {
142 toValue: pos,
143 duration: 100,
144 useNativeDriver: true,
145 }).start(() => {
146 this.visible = pos == 0 ? true : false
147 })
148 }
149
150 componentDidMount() {
151 this.listender_id = this.scrollY.addListener(this.onScoll)
152 this.getProductById()
153 }
154
155 navigateMoreInfo = _ => {
156 this.props.navigation.navigate({
157 routeName: 'ProductMoreInfo',
158 params: { ...this.state.product.product, selected_pack_option: this.state.pack_option },
159 })
160 }
161
162 navigatePreviousOrders = _ => {
163 this.props.navigation.navigate({
164 routeName: 'ProductPreviousOrders',
165 params: this.state.order_history,
166 })
167 }
168
169 navigateCaseTypes = _ => {
170 let { product } = this.state.product
171 if (product.pack_options && product.pack_options.length) {
172 this.props.navigation.navigate({
173 routeName: 'ProductCaseType',
174 params: { product: this.state.product.product, selectCasePack: this.selectCasePack },
175 })
176 }
177 }
178
179 back = _ => {
180 this.props.navigation.goBack()
181 }
182
183 getProductById = async () => {
184 let { product } = this.props.navigation.state.params
185 await this.setState({
186 product: {
187 product: { ...this.props.navigation.state.params.product },
188 },
189 pack_option: product.pack_options && product.pack_options.length ? product.pack_options[0] : null,
190 // isOpen: true,
191 loading: false,
192 })
193 try {
194 Api.addItemUserInteraction(this.props.navigation.state.params.product.product_id, 'view')
195 } catch (error) {
196 console.log(error)
197 }
198 try {
199 let product = await Api.getSingleProductById(this.props.navigation.state.params.product.product_id)
200 // let pack_option = product.product.pack_options && product.product.pack_options.length ? product.product.pack_options[0] : null
201 let pack_option = {}
202 if (product.product.pack_options && product.product.pack_options.length) {
203 pack_option = _.find(product.product.pack_options, p => p.free_fill)
204
205 if (!pack_option) {
206 pack_option = _.minBy(product.product.pack_options, p => p.pack_qua)
207 }
208 }
209 let images_zoom = product.product.images.map(item => {
210 return {
211 url: '',
212 props: {
213 source: { uri: `${Config.CDN_URL}${item.full_name}` },
214 // resizeMode: 'contain',
215 },
216 width: Dimensions.get('screen').height * 0.8,
217 height: 600,
218 }
219 })
220 if (product.product.inventory <= 0) {
221 // Api.addUserProductNotification({
222 // product_id: this.props.navigation.state.params.product.product_id,
223 // notification_type: 'out_of_stock',
224 // })
225 Api.notifyOutOfStock({
226 product_id: this.props.navigation.state.params.product.product_id,
227 notification_type: 'out_of_stock',
228 })
229 }
230 this.setState({ images_zoom })
231 this.getMoreFromBrand(product)
232 this.getSimilarProducts(product)
233 this.getProductHistory()
234 this.setState({ product, loading: false, isOpen: true, pack_option, product_ready: true })
235 } catch (err) {
236 console.log(err)
237
238 this.setState({ loading: false })
239 }
240 }
241
242 getMoreFromBrand(product) {
243 this.setState({ loading_more_from_brand: true })
244 Api.getMoreByBrand(product.product.warehouse.org_warehouse_id)
245 .then(res => {
246 this.setState({ loading_more_from_brand: false })
247 this.setState({ more_from_warehouse: res.more_from_warehouse })
248 })
249 .catch(err => {
250 console.log(err)
251 this.setState({ loading_more_from_brand: false })
252 })
253 }
254
255 getSimilarProducts(product) {
256 this.setState({ loading_similar_products: true })
257 Api.getSimilarProducts(product.product.product_id)
258 .then(res => {
259 this.setState({ loading_similar_products: false })
260 this.setState({ similar_products: res.products })
261 })
262 .catch(err => {
263 console.log(err)
264 this.setState({ loading_similar_products: false })
265 })
266 }
267
268 getProductHistory() {
269 Api.getProductHistory(this.props.navigation.state.params.product.product_id)
270 .then(res => {
271 this.setState({ order_history: res.order_history })
272 })
273 .catch(console.log)
274 }
275
276 renderDot = () => <View style={style.dot} />
277 renderActiveDot = () => <View style={[style.dot, style.activeDot]} />
278 renderImage = (item, index) => {
279 return (
280 <Button
281 key={index}
282 style={style.imageViewStyle}
283 onPress={() => {
284 this.setState({ zoomVisible: true })
285 }}
286 >
287 <LoadingImage resizeMode='contain' loaderSize='large' resizeMethod='resize' source={{ uri: CDN_URL + item.full_name }} style={style.imageStyle} />
288 <Image source={require('../../assets/images/new.png')} style={style.badge} />
289 </Button>
290 )
291 }
292
293 navigate = product => {
294 // this.props.navigation.navigate({
295 // routeName: 'ProductInfo',
296 // params: { product },
297 // key: Date.now() + 'id-1557836369226-3',
298 // })
299
300 this.props.navigation.push('ProductInfo', {
301 product,
302 })
303 }
304
305 renderBadge = (item, index) => {
306 return <TagBadge />
307 }
308
309 selectCasePack = pack_option => {
310 this.setState({ pack_option })
311 if (pack_option.free_fill) {
312 this.setState({ qua: 1 })
313 }
314 }
315
316 setIndex = index => {
317 this.setState({ imgIndex: index + 1 })
318 }
319
320 searchByTag = tag => {
321 // this.props.navigation.navigate('SearchResult', { type: 'tag', term: tag.prd_tag, tagId: tag.prd_tag_id })
322 // this.props.navigation.navigate('SearchResult', { type: 'tag', term: tag.prd_tag, tagId: tag.prd_tag_id })
323 this.props.navigation.push('SearchResult', {
324 // category: cat.item,
325 type: 'tag',
326 term: tag.prd_tag,
327 tagId: tag.prd_tag_id,
328 })
329 }
330 addToCart = async () => {
331 let { product } = this.state.product
332 let pack_option = this.state.pack_option
333 if (this.props.CartStore.calcBrandCases(product.warehouse.org_warehouse_id, +this.state.qua) > 50) {
334 this.refs.toast.show('The total quantity of cases is limited to 50 per each brand', 3000)
335
336 return
337 }
338
339 if (pack_option.free_fill && UserStore.user.free_fill_left == this.props.CartStore.calcNumberOfFreeFills()) {
340 this.refs.toast.show(I18n.t('v3_total_ff_day_reached'), 3000)
341 return
342 }
343
344 this.setState({ loadingAdd: true })
345
346 // let pack_option = product.pack_options && product.pack_options.length ? _.minBy(product.pack_options, p => p.pack_qua) : {}
347
348 try {
349 await CartStore.addToCart(pack_option.shp_pack_id, this.state.qua, product.product_id)
350 this.setState({ loadingAdd: false })
351 } catch (err) {
352 this.setState({ loadingAdd: false })
353 console.log(err)
354 }
355 }
356
357 goToCart = () => {
358 this.props.navigation.push('CartPage')
359 }
360
361 // onPress = debounce(this.debouncedOnPress, 300, { leading: true, trailing: false })
362
363 render() {
364 if (this.state.loading) return <Spinner style={styles.loading} />
365
366 const headerBackground = this.scrollY.interpolate({
367 inputRange: [0, HEADER_SCROLL_DISTANCE / 2],
368 outputRange: [`rgba(255,255,255,0)`, `rgba(255,255,255,1)`],
369 extrapolate: 'clamp',
370 })
371
372 const animateColor = this.scrollY.interpolate({
373 inputRange: [0, 350, 400],
374 outputRange: [`rgba(255,255,255,0)`, `rgba(255,255,255,0)`, `rgba(255,255,255,1)`],
375 extrapolate: 'clamp',
376 })
377
378 const borderHeaderColor = this.scrollY.interpolate({
379 inputRange: [0, 350, 400],
380 outputRange: [`rgba(238,238,238,0)`, `rgba(238,238,238,0)`, `rgba(238,238,238,1)`],
381 extrapolate: 'clamp',
382 })
383
384 const colorAnimation = this.scrollY.interpolate({
385 inputRange: [0, 100],
386 outputRange: [`rgb(255,255,255)`, `rgb(0,0,0)`],
387 extrapolate: 'clamp',
388 })
389
390 const animateCircle = this.scrollY.interpolate({
391 inputRange: [0, 200],
392 outputRange: [`rgba(0,0,0,1)`, `rgba(0,0,0,0)`],
393 extrapolate: 'clamp',
394 })
395
396 const headerPosition = this.scrollY.interpolate({
397 inputRange: [0, 350, 400],
398 outputRange: [0, 0, -50],
399 })
400
401 const imagePosition = this.scrollY.interpolate({
402 inputRange: [0, 400],
403 outputRange: [0, 200],
404 })
405
406 const hiddenHeader = this.scrollY.interpolate({
407 inputRange: [0, 400],
408 outputRange: [-50, 0],
409 })
410
411 const headerTextPosition = this.scrollY.interpolate({
412 inputRange: [0, 600, 601],
413 outputRange: [100, 0, 0],
414 extrapolate: 'clamp',
415 })
416
417 let formatNumber = num => {
418 num = num.toFixed(2)
419
420 if (+num < 0) {
421 return `-$${num.replace('-', '')}`
422 }
423 return `$${num}`
424 }
425
426 let { product } = this.state.product
427 let more_from_warehouse = this.state.more_from_warehouse
428 let similar_products = this.state.similar_products
429 let pack_option = this.state.pack_option
430 let inCart = pack_option && pack_option.shp_pack_id && CartStore.isInCart(pack_option.shp_pack_id)
431 const newProduct = product.created_at && moment().diff(moment(product.created_at), 'days') <= 60
432
433 // if(!this.state.product) return
434 return (
435 <View style={[styles.container, { flexDirection: 'column' }]}>
436 <Animated.ScrollView overScrollMode='always' style={{ zIndex: 11, flex: 1, overflowX: 'hidden' }} scrollEventThrottle={16} showsVerticalScrollIndicator={false} onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.scrollY } } }])}>
437 <Animated.View style={[{ height: 400, alignItems: 'center', justifyContent: 'center', zIndex: 1, position: 'relative' }]}>
438 <Modal visible={this.state.zoomVisible} transparent={true} style={{ flex: 1 }} onBackButtonPress={() => this.setState({ zoomVisible: false })}>
439 {/* <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}> */}
440 <View style={{ flex: 1, justifyContent: 'center' }}>
441 <ImageViewer
442 imageUrls={this.state.images_zoom}
443 index={this.state.zoomIndex}
444 enableImageZoom={true}
445 enableSwipeDown={true}
446 onCancel={() => this.setState({ zoomVisible: false })}
447 renderImage={props => {
448 return (
449 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
450 <FastImage
451 {...props}
452 // style={{ flex: 1, height: undefined, width: undefined }}
453 // resizeMode={'contain'}
454 resizeMode='contain'
455 loaderSize='large'
456 resizeMethod='resize'
457 // source={{ uri: `${Config.CDN_URL}h800/${img.full_name}` }}
458 // style={[{ flex: 1, height: Dimensions.get('window').height * 0.7, width: Dimensions.get('window').width * 0.75 }]}
459 //
460 />
461 </View>
462 )
463 }}
464 renderIndicator={(currentIndex, allSize) => {
465 return (
466 <View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute', bottom: Dimensions.get('window').height * 0.15 }}>
467 <View style={{ backgroundColor: 'rgba(0,0,0,.5)', paddingVertical: 5, paddingHorizontal: 10, borderRadius: 10 }}>
468 <Text style={{ color: '#fff', fontSize: 10 }}>
469 {currentIndex}/{allSize}
470 </Text>
471 </View>
472 </View>
473 )
474 }}
475 loadingRender={() => (
476 <ActivityIndicator
477 color={'black'}
478 size='large'
479 style={{
480 height: Dimensions.get('window').height,
481 alignItems: 'center',
482 justifyContent: 'center',
483 }}
484 />
485 )}
486 backgroundColor={'white'}
487 renderHeader={() => {
488 return (
489 <View style={{ width: '100%', alignItems: 'flex-end', paddingHorizontal: 10, marginTop: 40, position: 'absolute', zIndex: 1111 }}>
490 <Button
491 onPress={() =>
492 this.setState({
493 zoomVisible: false,
494 })
495 }
496 // style={{ position: 'absolute', right: Dimensions.get('window').width * 0.02, top: Dimensions.get('window').height * 0.02 }}
497 >
498 <View style={{ padding: 8, alignItems: 'flex-end' }}>
499 <Icon name='close' size={24} color={Colors.warm_grey} />
500 </View>
501 </Button>
502 </View>
503 )
504 }}
505 //
506 />
507 </View>
508 {/* </SafeAreaView> */}
509 </Modal>
510
511 <Swiper loop={false} width={Dimensions.get('window').width} showsButtons={false} showsPagination={false} onIndexChanged={this.setIndex} index={0}>
512 {product.images &&
513 product.images.length > 0 &&
514 _.sortBy(product.images, img => img.image_position).map((img, index) => {
515 return (
516 <React.Fragment>
517 <Button onPress={() => this.setState({ zoomVisible: true, zoomIndex: index })}>
518 <FastImage
519 resizeMode='contain'
520 loaderSize='large'
521 resizeMethod='auto'
522 source={{ uri: `${Config.CDN_URL}${img.full_name}` }}
523 style={[{ height: 400, width: Dimensions.get('window').width }]}
524
525 //
526 />
527 {newProduct && <Image source={require('../../assets/images/new.png')} style={styles.icon} />}
528 </Button>
529 {/* <Animated.View style={{ height: 400, backgroundColor: animateColor, position: 'absolute', left: 0, right: 0, top: 0, zIndex: 2 }} /> */}
530 </React.Fragment>
531 )
532 })}
533 </Swiper>
534 <View style={{ position: 'absolute', bottom: 10, right: 10, backgroundColor: 'rgba(0,0,0,.5)', paddingVertical: 5, paddingHorizontal: 10, borderRadius: 10 }}>
535 <Text style={{ color: '#fff', fontSize: 10 }}>
536 {this.state.imgIndex}/{product.images.length}
537 </Text>
538 </View>
539 {product.inventory <= 0 && (
540 <View style={{ top: 0, left: 0, right: 0, bottom: 0, position: 'absolute', justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(255,255,255,.9)', zIndex: 5, height: 400, width: '100%', paddingHorizontal: 15 }}>
541 <View style={{ marginBottom: 10, paddingHorizontal: 3, borderRadius: 10, borderColor: Colors.warm_grey, borderWidth: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center' }}>
542 <Text style={{ color: Colors.warm_grey, fontSize: 12, letterSpacing: 0.43, fontFamily: 'Poppins-Bold' }}> {I18n.t('v3_product_info_oos')} </Text>
543 </View>
544 <Text style={{ color: 'rgb(255,153,21)', fontSize: 16, fontFamily: 'Poppins-Light', lineHeight: 30, marginBottom: 5, textAlign: 'center' }}>{I18n.t('v3_product_info_oos_sorry')}</Text>
545 <Text style={{ color: '#000', fontSize: 14, fontFamily: 'Poppins-Regular', textAlign: 'center' }}>{I18n.t('v3_product_info_oos_bottom_txt')}</Text>
546 </View>
547 )}
548 </Animated.View>
549
550 <View style={{ backgroundColor: '#ffffff', position: 'relative', zIndex: 10 }}>
551 <View style={{ padding: 15 }}>
552 <View style={{ marginBottom: 10, marginTop: 14, flexWrap: 'wrap', flex: 1, flexDirection: 'row', alignItems: 'flex-start' }}>{product.tags && product.tags.length > 0 && product.tags.filter(t => t.prd_tag).map(tag => <TagBadge tag={tag.prd_tag} onPress={() => this.searchByTag(tag)} />)}</View>
553 {pack_option && pack_option.free_fill ? (
554 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
555 {pack_option && pack_option.price && <Text style={{ fontSize: 16, fontFamily: 'Poppins-Medium', color: 'rgb(0,0,0)', textDecorationLine: 'line-through', marginBottom: 5 }}>${pack_option.price.price}</Text>}
556 {pack_option && pack_option.price && <Text style={{ fontSize: 18, fontFamily: 'Poppins-Bold', color: Colors.yellowishOrange, marginBottom: 5, paddingLeft: 3 }}>{I18n.t('v3_product_info_free')}</Text>}
557
558 {/* <Text style={{ fontSize: 14, fontFamily: 'Poppins-Regular', color: 'rgb(133,133,133)', marginBottom: 5 }}>{pack_option.pack_qua > 1 ? `${pack_option.pack_qua} Case Master Case` : 'Single Case'}</Text> */}
559 </View>
560 ) : (
561 <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
562 {pack_option && pack_option.price && <Text style={{ fontSize: 16, fontFamily: 'Poppins-Medium', color: 'rgb(0,0,0)', marginBottom: 5 }}>${pack_option.price.price}</Text>}
563 {/* <Text style={{ fontSize: 14, fontFamily: 'Poppins-Regular', color: 'rgb(133,133,133)', marginBottom: 5 }}>{pack_option.pack_qua > 1 ? `${pack_option.pack_qua} Case Master Case` : 'Single Case'}</Text> */}
564 </View>
565 )}
566 <Text style={{ fontSize: 16, fontFamily: 'Poppins-Bold', color: 'rgb(0,0,0)' }}>{product.name}</Text>
567 {/* {product.warehouse && <Text>{this.props.CartStore.calcBrandCases(product.warehouse.org_warehouse_id, this.state.qua)}</Text>} */}
568
569 <Button
570 style={{ flex: 1 }}
571 onPress={() => {
572 product.warehouse ? this.props.navigation.push('Brand', { brand_id: product.warehouse.org_warehouse_id }) : null
573 }}
574 >
575 <Text style={{ fontSize: 14, fontFamily: 'Poppins-Bold', color: 'rgb(0,191,134)' }}>{product.warehouse.warehouse_name}</Text>
576 </Button>
577 {this.state.product_ready && product.warehouse && product.warehouse.ord_min_val != 0 && <Text style={{ fontSize: 12, fontFamily: 'Poppins-Bold', color: 'red' }}>This brand has minimum order value of ${product.warehouse.ord_min_val}</Text>}
578 </View>
579
580 {this.state.order_history && this.state.order_history.length > 0 && (
581 <React.Fragment>
582 <View style={{ height: 1, backgroundColor: '#eeeeee', marginVertical: 16 }} />
583 <View style={{ alignItems: 'flex-end', paddingHorizontal: 15 }}>
584 <Button style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} onPress={() => this.navigatePreviousOrders()}>
585 <Text style={{ fontSize: 12, color: 'rgb(133,133,133)', fontFamily: 'Poppins-Bold' }}>{I18n.t('v3_product_info_prev_order')} ></Text>
586 </Button>
587 </View>
588 </React.Fragment>
589 )}
590
591 <View style={{ height: 1, backgroundColor: '#eeeeee', marginVertical: 16 }} />
592
593 <View style={{ paddingHorizontal: 15, flexDirection: 'row' }}>
594 <View style={{ flex: 1, flexDirection: 'column', marginRight: 16 }}>
595 <Text style={{ color: 'rgb(133,133,133)', lineHeight: 17, fontSize: 10, fontFamily: 'Poppins-Regular' }}>{I18n.t('v3_product_info_quantity')}</Text>
596 <Counter add={this.add} remove={this.remove} qua={this.state.qua} setQua={this.setQua} disabled={pack_option && pack_option.free_fill} />
597 </View>
598 <View style={{ flex: 1, flexDirection: 'column' }}>
599 <Text style={{ color: 'rgb(133,133,133)', lineHeight: 17, fontSize: 10, fontFamily: 'Poppins-Regular' }}>{I18n.t('v3_product_info_case_type')}</Text>
600 {pack_option && <CaseSelector navigateCaseTypes={this.navigateCaseTypes} pack_option={pack_option} />}
601 </View>
602 </View>
603
604 {product.pack_options && product.pack_options.length > 1 && (
605 <React.Fragment>
606 <View style={{ height: 1, backgroundColor: '#eeeeee', marginVertical: 16 }} />
607 <View style={{ alignItems: 'flex-end', paddingHorizontal: 15 }}>
608 <Button style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} onPress={() => this.navigateCaseTypes()}>
609 <Text style={{ fontSize: 12, color: 'rgb(133,133,133)', fontFamily: 'Poppins-Bold' }}>{I18n.t('v3_product_info_more_cases')} ></Text>
610 </Button>
611 </View>
612 </React.Fragment>
613 )}
614
615 <View style={{ height: 1, backgroundColor: '#eeeeee', marginVertical: 16 }} />
616
617 <View style={{ paddingHorizontal: 15, flexDirection: 'row' }}>
618 <View style={{ flex: 1, flexDirection: 'column' }}>
619 <Text style={{ color: 'rgb(133,133,133)', lineHeight: 17, fontSize: 10, fontFamily: 'Poppins-Regular' }}>{I18n.t('v3_product_info_total_cases')}</Text>
620 <Text style={{ color: 'rgb(0,0,0)', fontSize: 16, fontFamily: 'Poppins-Light' }}>{pack_option && pack_option.pack_qua ? +this.state.qua * +pack_option.pack_qua : ''}</Text>
621 </View>
622 <View style={{ flex: 1, flexDirection: 'column' }}>
623 <Text style={{ color: 'rgb(133,133,133)', lineHeight: 17, fontSize: 10, fontFamily: 'Poppins-Regular' }}>{I18n.t('v3_product_info_unit_per_case')}</Text>
624 <Text style={{ color: 'rgb(0,0,0)', fontSize: 16, fontFamily: 'Poppins-Light' }}>{product.units_per_case}</Text>
625 </View>
626 </View>
627
628 <View style={{ height: 1, backgroundColor: '#eeeeee', marginVertical: 16 }} />
629
630 <View style={{ paddingHorizontal: 15, flexDirection: 'row' }}>
631 <View style={{ flex: 1, flexDirection: 'column' }}>
632 <Text style={{ color: 'rgb(133,133,133)', lineHeight: 17, fontSize: 10, fontFamily: 'Poppins-Regular' }}>{I18n.t('v3_product_info_gros_margin')}</Text>
633 {pack_option && pack_option.price && <Text style={{ color: 'rgb(0,0,0)', fontSize: 16, fontFamily: 'Poppins-Light' }}>{pack_option.price.grs}%</Text>}
634 </View>
635 <View style={{ flex: 1, flexDirection: 'column' }}>
636 <Text style={{ color: 'rgb(133,133,133)', lineHeight: 17, fontSize: 10, fontFamily: 'Poppins-Regular' }}>{I18n.t('v3_product_info_unit_size')}</Text>
637 <Text style={{ color: 'rgb(0,0,0)', fontSize: 16, fontFamily: 'Poppins-Light' }}>
638 {product.unit_size}
639 {product.unit_type}
640 </Text>
641 </View>
642 </View>
643
644 <View style={{ height: 1, backgroundColor: '#eeeeee', marginVertical: 16 }} />
645
646 <View style={{ alignItems: 'flex-end', marginBottom: 16, paddingHorizontal: 15 }}>
647 <Button style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} onPress={() => this.navigateMoreInfo()}>
648 <Text style={{ fontSize: 12, color: 'rgb(133,133,133)', fontFamily: 'Poppins-Bold' }}>{I18n.t('v3_product_info_more_details')} ></Text>
649 </Button>
650 </View>
651
652 <View style={{ height: 20, backgroundColor: 'rgba(0,191,134,.05)' }} />
653
654 <View style={{ paddingHorizontal: 15, paddingVertical: 16 }}>
655 <Text style={{ color: 'rgb(0,0,0)', fontSize: 12, fontFamily: 'Poppins-Light' }}>
656 {I18n.t('v3_product_info_more_from')} <Text style={{ color: 'rgb(0,0,0)', fontSize: 12, fontFamily: 'Poppins-Bold' }}>{product.warehouse.warehouse_name}</Text>
657 </Text>
658 </View>
659
660 <View style={{ flex: 1, overflow: 'hidden' }}>
661 {/* <FlatList
662 keyExtractor={(p, i) => i.toString()}
663 data={more_from_warehouse}
664 renderItem={({ item, index }) => (
665 <View style={{ flex: 1 }}>
666 <VerticalProduct item={item} index={index} numOfItems={2} navigate={this.navigate} />
667 </View>
668 )}
669 numColumns={2}
670 /> */}
671
672 {this.state.loading_more_from_brand ? (
673 <FlatList
674 keyExtractor={(p, i) => i.toString()}
675 data={_.range(10)}
676 style={{ width: Dimensions.get('window').width, height: '100%' }}
677 // pagingEnabled={true}
678 showsHorizontalScrollIndicator={false}
679 legacyImplementation={false}
680 horizontal={true}
681 ItemSeparatorComponent={() => <View style={{ height: '100%', width: 10, backgroundColor: '#fff' }} />}
682 renderItem={({ item, index }) => (
683 <View style={{ width: Dimensions.get('screen').width / 3 }}>
684 <VerticalPlaceHolder />
685 </View>
686 )}
687 />
688 ) : (
689 <FlatList
690 keyExtractor={(p, i) => i.toString()}
691 data={more_from_warehouse}
692 style={{ width: Dimensions.get('window').width, height: '100%' }}
693 // pagingEnabled={true}
694 showsHorizontalScrollIndicator={false}
695 legacyImplementation={false}
696 horizontal={true}
697 ItemSeparatorComponent={() => <View style={{ height: '100%', width: 10, backgroundColor: '#fff' }} />}
698 renderItem={({ item, index }) => <VerticalProduct imageStyle={'contain'} numOfItems={1} item={item} style={{ width: Dimensions.get('screen').width / 3 }} navigate={this.navigate} />}
699 />
700 )}
701 </View>
702
703 <View style={{ paddingHorizontal: 15, paddingVertical: 16 }}>
704 <Text style={{ color: 'rgb(0,0,0)', fontSize: 12, fontFamily: 'Poppins-Bold' }}>{I18n.t('v3_product_info_more_to_love')}</Text>
705 </View>
706
707 <View style={{ flex: 1 }}>
708 {this.state.loading_similar_products ? (
709 <View style={{ flexGrow: 0.5 }}>
710 <FlatList keyExtractor={(p, i) => i.toString()} data={_.range(10)} renderItem={({ item, index }) => <VerticalPlaceHolder />} numColumns={2} />
711 </View>
712 ) : (
713 <FlatList
714 keyExtractor={(p, i) => i.toString()}
715 data={similar_products}
716 renderItem={({ item, index }) => (
717 <View style={{ flex: 1 / 2 }}>
718 <VerticalProduct item={item} index={index} numOfItems={2} navigate={this.navigate} />
719 </View>
720 )}
721 numColumns={2}
722 />
723 )}
724 </View>
725 </View>
726 </Animated.ScrollView>
727 {/* <View style={{ height: 50 }} /> */}
728
729 {/* */}
730
731 {/* <Animated.View style={{ backgroundColor: headerBackground, height: 84, position: 'absolute', paddingTop: 24, left: 0, right: 0, top: 0, alignItems: 'center', justifyContent: 'center' }} /> */}
732 {/* <Animated.View style={[{ height: 50, position: 'absolute', left: 0, right: 0, top: 0, alignItems: 'center', justifyContent: 'center', zIndex: 20 }, { transform: [{ translateY: headerPosition }] }]}>
733 <LinearGradient colors={['rgba(0,0,0,.1)', 'rgba(0,0,0,.0)']} style={{ flex: 1, width: '100%' }}>
734 <Text style={{ color: '#fff' }}>asd</Text>
735 </LinearGradient>
736 </Animated.View> */}
737
738 <Animated.View style={[{ backgroundColor: animateColor, height: 50, position: 'absolute', left: 0, right: 0, top: 0, alignItems: 'center', justifyContent: 'center', zIndex: 20, paddingHorizontal: 10, flexDirection: 'row', overflow: 'hidden', borderBottomWidth: 1, borderBottomColor: borderHeaderColor }]}>
739 <View style={{ justifyContent: 'center', alignItems: 'center', height: 40, width: 40, borderRadius: 100, backgroundColor: 'white' }}>
740 <Button style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} onPress={() => this.back()}>
741 <Image source={require('../../assets/images/back.png')} resizeMode='contain' style={{ width: 25, height: 25 }} />
742 </Button>
743 </View>
744 <Animated.View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', height: 50, opacity: this.headerTextOpacity }, { transform: [{ translateY: this.headerTextPosition }] }]}>
745 {product.name && (
746 <Text numberOfLines={1} ellipsizeMode={'tail'} style={{ color: 'rgb(0,0,0)', fontSize: 16, fontFamily: 'Poppins-Regular' }}>
747 {product.name.length > 30 ? product.name.substr(0, 30) + '...' : product.name}
748 </Text>
749 )}
750 {/* */}
751 </Animated.View>
752 <Button style={{ width: 40, justifyContent: 'center', alignItems: 'center', position: 'relative' }} onPress={_.debounce(this.goToCart, 300, { leading: true, trailing: false })}>
753 <View style={{ justifyContent: 'center', alignItems: 'center', height: 40, width: 40, borderRadius: 100, backgroundColor: 'white', position: 'relative' }}>
754 {this.props.CartStore.ItemsCount > 0 && (
755 <View style={{ width: 15, height: 15, backgroundColor: 'red', position: 'absolute', right: 5, top: 5, borderRadius: 20, borderWidth: 1, borderColor: '#fff', zIndex: 2, justifyContent: 'center', alignItems: 'center' }}>
756 <Text style={{ fontSize: 8, color: '#fff' }}>{this.props.CartStore.ItemsCount}</Text>
757 </View>
758 )}
759
760 <Image source={require('../../assets/images/cart_black.png')} resizeMode='contain' />
761 </View>
762 </Button>
763 </Animated.View>
764
765 {product.inventory > 0 ? (
766 <Checkout style={{ height: 50, zIndex: 20, width: '100%' }} pose={this.state.isOpen ? 'open' : 'closed'}>
767 <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={inCart ? ['rgb(0,191,134)', 'rgb(0,191,134)'] : ['rgb(255,101,32)', 'rgb(255,153,21)']} style={{ flex: 1, opacity: this.state.loadingAdd ? 0.5 : 1 }}>
768 <Button style={{ flex: 1 }} onPress={() => this.addToCart()} disabled={this.state.loadingAdd}>
769 <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
770 <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
771 {!this.state.loadingAdd ? (
772 <React.Fragment>
773 <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', marginRight: 14 }}>
774 <Text style={{ fontSize: 10, fontFamily: 'Poppins-Regular', lineHeight: 17, color: '#fff' }}>{I18n.t('v3_product_info_you_pay')}</Text>
775 {!pack_option.free_fill && <Text style={{ fontSize: 16, fontFamily: 'Poppins-Bold', lineHeight: 17, color: '#fff' }}>{!this.state.loading && pack_option && pack_option.price && formatNumber(pack_option.price.price * +this.state.qua)}</Text>}
776 {pack_option.free_fill && <Text style={{ fontSize: 16, fontFamily: 'Poppins-Bold', lineHeight: 17, color: '#fff' }}>{!this.state.loading && pack_option && pack_option.price && '$0'}</Text>}
777 </View>
778 <Image source={inCart ? require('../../assets/images/group6.png') : require('../../assets/images/addToCart.png')} style={inCart ? { width: 25, height: 25 } : { width: 30.3, height: 26 }} />
779 </React.Fragment>
780 ) : (
781 <ActivityIndicator size='small' color='#ffffff' />
782 )}
783 </View>
784 </View>
785 </Button>
786 </LinearGradient>
787 </Checkout>
788 ) : (
789 <Checkout style={{ height: 50, zIndex: 20, width: '100%' }} pose={this.state.isOpen ? 'open' : 'closed'}>
790 <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={inCart ? ['rgb(0,191,134)', 'rgb(0,191,134)'] : ['rgb(255,101,32)', 'rgb(255,153,21)']} style={{ flex: 1, opacity: this.state.loadingAdd ? 0.5 : 1 }}>
791 <Button style={{ flex: 1 }} onPress={() => this.back()} disabled={this.state.loadingAdd}>
792 <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
793 <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
794 <Text style={{ fontSize: 10, fontFamily: 'Poppins-Regular', lineHeight: 17, color: '#fff' }}>Back</Text>
795 </View>
796 </View>
797 </Button>
798 </LinearGradient>
799 </Checkout>
800 )}
801
802 {/* <Animated.View style={[{ height: 50, backgroundColor: '#000000', position: 'absolute', left: 0, right: 0, top: 0, zIndex: 100 }, { transform: [{ translateY: this.hiddenY }] }]} /> */}
803
804 <Toast ref='toast' style={{ backgroundColor: 'red' }} position='center' positionValue={200} fadeInDuration={750} fadeOutDuration={1000} opacity={0.8} textStyle={{ color: '#fff' }} />
805 </View>
806 )
807 }
808}
809
810export default ProductInfo