· 6 years ago · Mar 27, 2020, 04:50 AM
1import React from "react";
2import { View, Platform, FlatList, TouchableOpacity, TouchableHighlight, Alert, ActivityIndicator, Image, TextInput, Dimensions, Switch, Modal, ScrollView } from 'react-native';
3import {
4 Button,
5 Text,
6 Container,
7 Card,
8 CardItem,
9 Body,
10 Content,
11 Header,
12 Title,
13 Left,
14 Icon,
15 Right,
16 Footer,
17 FooterTab,
18 Badge,
19 Input,
20 Item
21} from "native-base";
22
23import IconBadge from 'react-native-icon-badge';
24import StyleGlob from 'cring_app/src/Helpers/Style';
25import { color } from 'cring_app/src/Helpers/Style/ColorList';
26import MyCartStyle from 'cring_app/src/Pages/CheckoutPaymentOne/CheckoutPaymentOne.styles';
27import { Myfooter } from 'cring_app/src/Components/Footer';
28import * as Hooks from 'cring_app/src/Helpers/Hooks';
29import * as Session from 'cring_app/src/Helpers/Session';
30import * as Http from 'cring_app/src/Helpers/Http';
31import ModalSelector from 'react-native-modal-selector';
32// import { SearchBar } from 'react-native-elements'
33
34const rcvParameter = {};
35const TAG = 'CheckoutPaymentOne ';
36export default class CheckoutPaymentOne extends React.Component {
37 constructor() {
38 super();
39
40 this.state = {
41 GridColumnsValue: true,
42 ButtonDefaultText: 'CHANGE TO GRIDVIEW',
43 isLoading: false,
44 BadgeCount: 2,
45 normalHeight: Dimensions.get('window').height,
46 normalWidth: Dimensions.get('window').width,
47 dataOrder: [],
48 dataCourier: [],
49 weightInKg: '',
50 SwitchOnValueHolder: false,
51 modalAddAddress: false,
52 modalChooseAddress: false,
53 dataAddress: [],
54 detailCourier: [],
55 idOrderTemporary: '',
56
57 //for Add Address
58 user_id: '',
59 address: '',
60 name_receiver: '',
61 postalCode: '',
62 phone_receiver: '',
63 province: '',
64 dataProvince: [],
65 regency: '',
66 dataRegency: [],
67 district: '',
68 dataDistrict: [],
69 village: '',
70 dataVillage: [],
71 location_name: ''
72 }
73 }
74
75 componentDidMount() {
76 Hooks.consoleLog(TAG);
77 this.reqCart();
78 this.reqCourier();
79 this.reqDropdownProvince();
80 }
81
82 reqCourier() {
83 let getParams = {
84 link: 'api_rncring/get_courier_list'
85 }
86
87 Http.get(getParams).then((response) => {
88 this.setState({
89 dataCourier: response
90 });
91 console.log('GOT DATA COURIER: ', this.state.dataCourier);
92 }).catch((error) => {
93 console.log('catch error courier: ', error);
94 });
95 }
96
97 reqDropdownProvince() {
98 let postParams = {
99 link: 'api_rncring/get_address_dropdown',
100 data: {
101 type: 'province',
102 id: 0
103 }
104 }
105
106 Http.post(postParams).then((response) => {
107 this.setState({
108 dataProvince: response
109 });
110 console.log('GOT DATA dropdown: ', this.state.dataProvince);
111 }).catch((error) => {
112 console.log('catch error courier: ', error);
113 });
114 }
115
116 reqDropdownRegency(province) {
117 this.setState({
118 province: province.id
119 });
120 let postParams = {
121 link: 'api_rncring/get_address_dropdown',
122 data: {
123 type: 'regency',
124 id: province.id
125 }
126 }
127
128 console.log("Dada", postParams);
129
130 Http.post(postParams).then((response) => {
131 this.setState({
132 dataRegency: response
133 });
134 console.log('GOT DATA dropdown: ', this.state.dataRegency);
135 }).catch((error) => {
136 console.log('catch error courier: ', error);
137 });
138 }
139
140 reqDropdownDistrict(option) {
141 this.setState({
142 regency: option.id
143 });
144 let postParams = {
145 link: 'api_rncring/get_address_dropdown',
146 data: {
147 type: 'district',
148 id: option.id
149 }
150 }
151
152 Http.post(postParams).then((response) => {
153 this.setState({
154 dataDistrict: response
155 });
156 console.log('GOT DATA dropdown: ', this.state.dataDistrict);
157 }).catch((error) => {
158 console.log('catch error courier: ', error);
159 });
160 }
161
162 reqDropdownVillage(option) {
163 this.setState({district: option.id});
164 let postParams = {
165 link: 'api_rncring/get_address_dropdown',
166 data: {
167 type: 'village',
168 id: option.id
169 }
170 }
171
172 Http.post(postParams).then((response) => {
173 this.setState({
174 dataVillage: response
175 });
176 console.log('GOT DATA dropdown: ', this.state.dataVillage);
177 }).catch((error) => {
178 console.log('catch error courier: ', error);
179 });
180 }
181
182 showModalAddAddress(visible) {
183 this.setState({ modalAddAddress: visible });
184 }
185
186 showModalChooseAddress(visible, id_order) {
187 this.reqUserAddress();
188
189 //Id Order purposes : looking for INDEXES array on setChooseModalValue()
190 this.setState({
191 modalChooseAddress: visible,
192 idOrderTemporary: id_order
193 });
194 }
195
196 setAddAddressValue() {
197 this.showModalAddAddress(!this.state.modalAddAddress);
198 }
199
200 setChooseModalValue(address) {
201
202 //looking for index
203 var indexOf = Hooks.getIndexOf(this.state.dataOrder, { id_order: this.state.idOrderTemporary });
204
205 //Force Update For Array State
206 let addressComperatorIndexes = [...this.state.dataOrder];
207
208 //intiateData
209 addressComperatorIndexes[indexOf].location_name = address.name;
210 addressComperatorIndexes[indexOf].full_address = address.address;
211 addressComperatorIndexes[indexOf].address = address.id;
212
213 //setState
214 this.setState({ addressComperatorIndexes });
215
216 this.showModalChooseAddress(!this.state.modalChooseAddress);
217 }
218
219 reqCart() {
220 let postParams = {
221 link: 'api_rncring/get_my_cart',
222 data: {
223 id_buyer: Session.getValue(Session.USER_ID)
224 }
225 }
226
227 Http.post(postParams).then((response) => {
228 this.setState({
229 dataOrder: response
230 });
231 console.log('GOT DATA: ', this.state.dataOrder);
232 }).catch((error) => {
233
234 console.log('catch error: ', error);
235 });
236 }
237
238 reqUserAddress() {
239 let postParams_ = {
240 link: 'api_rncring/get_user_address',
241 data: {
242 id_user: Session.getValue(Session.USER_ID)
243 }
244 }
245
246 Http.post(postParams_).then((response) => {
247 this.setState({
248 dataAddress: response
249 });
250 console.log('Adress USER: ', this.state.dataAddress);
251 }).catch((error) => {
252
253 console.log('catch error: ', error);
254 });
255 }
256
257 goProduct() {
258 this.props.navigation.navigate('Landing');
259 console.log('navigate to Landing');
260 }
261
262 removeProduct(id_order) {
263 console.log('Id_order_remove_product: ', id_order);
264 //do Req API to delete product and refresh list!
265 }
266
267 updateDropShiper(value) {
268 console.log('dropShiper Trigering: ', value);
269 this.setState({
270 SwitchOnValueHolder: true
271 });
272 }
273
274 doUpload() {
275 let postParams = {
276 link: 'api_rncring/update_tx2',
277 data: this.state.dataOrder
278 }
279
280 console.log('StateToApi: ', JSON.stringify(this.state.dataOrder));
281
282 Http.post(postParams).then((response) => {
283 this.props.navigation.navigate('CheckoutTwo');
284 console.log('OnSuccess: ', response);
285
286 }).catch((error) => {
287 console.log('onFailded: ', error);
288
289 });
290 }
291
292 addAddress() {
293
294 this.setState({
295 isLoading: true
296 });
297
298 data = {
299 'user_id': Session.getValue(Session.USER_ID),
300 'name': this.state.location_name,
301 'recipient': this.state.name_receiver,
302 'address': this.state.address,
303 'phone': this.state.phone_receiver,
304 'province_id': this.state.province,
305 'regency_id': this.state.regency,
306 'district_id': this.state.district,
307 'village_id': this.state.village,
308 'zip_code': this.state.postalCode
309 };
310
311 console.log('data: ', data);
312
313 let postParams = {
314 link: 'api_rncring/upload_new_address',
315 data: data
316 }
317 console.log('PostParamAddress: ', postParams);
318 Http.post(postParams).then((response) => {
319
320 this.setState({
321 isLoading: false
322 });
323
324 this.showModalAddAddress(!this.state.modalAddAddress);
325 }).catch((error) => {
326 Alert.alert('Gagal Menambahkan Alamat!');
327 });
328 console.log('StateToApi: ', this.state.dataOrder);
329 }
330
331 updateCourier(option, id_order) {
332 console.log('Courier: ', option, ' || ', id_order);
333
334 //looking for index
335 var indexOf = Hooks.getIndexOf(this.state.dataOrder, { id_order: id_order });
336
337 //Force Update For Array State
338 let shippingCostComperatorIndexes = [...this.state.dataOrder];
339 shippingCostComperatorIndexes.shipment = option.courier_name;
340 this.setState({ shippingCostComperatorIndexes });
341
342 let postParams = {
343 link: 'api_rncring/get_detail_courier',
344 data: option
345 }
346
347 Http.post(postParams).then((response) => {
348 this.setState({
349 detailCourier: response
350 });
351 }).catch((error) => {
352 console.log('onFaildedDetailCourier: ', error);
353 });
354 }
355
356 updateDetailShipping(option, id_order) {
357
358
359 //looking for index
360 var indexOf = Hooks.getIndexOf(this.state.dataOrder, { id_order: id_order });
361
362 //Force Update For Array State
363 let shippingCostComperatorIndexes = [...this.state.dataOrder];
364
365 //intiateData
366 shippingCostComperatorIndexes[indexOf].shipping_service = option.name;
367 shippingCostComperatorIndexes[indexOf].shipping_cost = option.price;
368
369 //CLEAR UP FOR RECALCULATE
370 shippingCostComperatorIndexes[indexOf].grand_total = shippingCostComperatorIndexes[indexOf].subtotal;
371 shippingCostComperatorIndexes[indexOf].grand_total = parseInt(shippingCostComperatorIndexes[indexOf].subtotal) + parseInt(option.price);
372 //setState
373 this.setState({ shippingCostComperatorIndexes });
374 console.log('detail Shipping: ', option, ' || ', id_order, ' || ', indexOf);
375
376 }
377
378 render() {
379
380 const data_asuransi = [
381 { key: index++, label: 'Ya' },
382 { key: index++, label: 'Tidak' }
383 ];
384
385 let dataOrderSum = this.state.dataOrder;
386 let subtotalSum = dataOrderSum.reduce((prev,next) => prev + parseInt(next.subtotal),0);
387 let costSum = dataOrderSum.reduce((prev,next) => prev + parseInt(next.shipping_cost),0);
388 let totalSum = parseInt(subtotalSum) + parseInt(costSum);
389
390 console.log('data_dropdown: ', data_asuransi);
391 if (this.state.dataOrder == null) {
392 return (
393 <Container style={MyCartStyle.parentViewEmpty}>
394 <View style={MyCartStyle.childViewEmpty}>
395 <Image style={{ width: 100, height: 100 }} source={require('cring_app/src/Assets/icon/CRING_logogram_purple.png')} />
396 <Text style={MyCartStyle.headerFontEmpty}>Keranjang belanja Anda kosong</Text>
397 <Text>Pilih dan beli produk yang anda impikan</Text>
398 <Text>Ayo belanja!</Text>
399 <Button
400 full
401 style={MyCartStyle.button}
402 onPress={() => this.goProduct()}
403 >
404 <Text>Cari Produk</Text>
405 </Button>
406 </View>
407 <View style={MyCartStyle.childViewEmpty}>
408
409 </View>
410 </Container>
411 );
412 }
413 const { navigate } = this.props.navigation;
414 return (
415 <Container >
416 <Content>
417 <FlatList
418 style={{ padding: 10 }}
419 data={this.state.dataOrder}
420 numColumns={1}
421 renderItem={({ item }) =>
422
423 <View style={{ borderBottomColor: '#00000033', borderBottomWidth: 0.5, backgroundColor: color.white, marginBottom: 15 }}>
424
425 {
426 //Section Shop Name
427 }
428 <View style={{ borderBottomColor: '#00000033', borderBottomWidth: 0.5, padding: 10 }}>
429 <Text style={{}}>{item.shop_name}</Text>
430
431 <TouchableHighlight style={{ position: 'absolute', right: 10, paddingTop: 10 }} onPress={() => this.removeProduct(item.id_order)}>
432 <Icon style={{ fontSize: 25, color: 'gray' }} name="ios-close-outline" />
433 </TouchableHighlight>
434
435 </View>
436 {
437 //Section Header Product
438 }
439 <View style={{ height: 0.15 * this.state.normalHeight, flexDirection: 'row', borderBottomColor: '#00000033', borderBottomWidth: 0.5 }}>
440 <Image style={{ flex: 0.2, margin: 15 }} source={{ uri: Http.MAIN_PRODUCT_IMAGE + item.product_image }} />
441 <View style={{ flex: 0.7, flexDirection: 'column', marginTop: 15 }}>
442 <Text numberOfLines={1}>{item.product_name} - {item.product_description}</Text>
443 <Text style={{ color: color.primary_v3 }}>{Hooks.formatCurrency(item.product_price)}</Text>
444 <Text style={{ fontSize: 12, marginTop: 3 }}>( {item.product_weight_kg} Kg ) - Kuantitas Beli : {item.qty_beli}</Text>
445 </View>
446 </View>
447
448 {
449 //Section Address
450 }
451 <View style={{ height: 0.2 * this.state.normalHeight, flexDirection: 'column' }}>
452 <Text style={{ marginLeft: 5 }}>Tujuan Pengiriman</Text>
453 <Text
454 style={{flex: 1, backgroundColor: '#0000001A', margin: 5}}
455 >
456 {item.location_name}
457 {"\n"}
458 {"\n"}
459 {item.full_address}
460 </Text>
461 {/* <Input
462 style={{ flex: 1, backgroundColor: '#0000001A', margin: 5 }}
463 value={item.full_address} /> */}
464 </View>
465
466 <View style={{ flex: 1, flexDirection: 'row', }}>
467
468 <Button
469 onPress={() => { this.showModalChooseAddress(true, item.id_order) }}
470 style={{ backgroundColor: '#faa819', flex: 0.5, padding: 5, margin: 5, justifyContent: 'center' }}>
471 <Text style={{ fontSize: 13, textAlign: 'center' }}>Pilih Alamat Lain</Text>
472 </Button>
473
474 <Button
475 onPress={() => { this.showModalAddAddress(true) }}
476 style={{ backgroundColor: '#faa819', flex: 0.5, padding: 5, margin: 5, justifyContent: 'center' }}>
477 <Text style={{ fontSize: 13, textAlign: 'center' }}>Tambah Alamat Baru</Text>
478 </Button>
479
480 </View>
481 {
482 //Asuransi
483 <View style={{ flexDirection: 'column', flex: 1 }}>
484 <Text style={{ marginTop: 5, marginLeft: 5, fontSize: 14, color: 'gray' }}>Kurir Pengiriman</Text>
485 <ModalSelector
486 selectStyle={{ borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0 }}
487 style={{}}
488 data={this.state.dataCourier}
489 keyExtractor={item_courier => item_courier.id}
490 labelExtractor={item_courier => item_courier.courier_name}
491 backdropPressToClose={true}
492 initValue="Pilih Agen Kurir"
493 cancelStyle={{ display: 'none' }}
494 onChange={(item_courier) => { this.updateCourier(item_courier, item.id_order) }}
495 />
496
497 <Text style={{ marginTop: 5, marginLeft: 5, fontSize: 14, color: 'gray' }}>Paket Pengiriman</Text>
498 <ModalSelector
499 selectStyle={{ borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0 }}
500 style={{}}
501 data={this.state.detailCourier}
502 keyExtractor={(item_detail_courier) => item_detail_courier.id}
503 labelExtractor={(item_detail_courier) => item_detail_courier.name}
504 initValue="Pilih Jenis Paket"
505 cancelStyle={{ display: 'none' }}
506 backdropPressToClose={true}
507 onChange={(item_detail_courier) => { this.updateDetailShipping(item_detail_courier, item.id_order) }}
508 />
509 </View>
510 }
511
512 {
513 //Section Payment
514 }
515
516 <View style={{ backgroundColor: '#0000000A' }}>
517 {
518 //Section Subtotal
519 }
520 <View>
521 <Text style={MyCartStyle.paymentMenuText}>Subtotal</Text>
522 <Text style={{ position: 'absolute', right: 10, fontSize: 14, marginBottom: 5, marginTop: 5 }}>{Hooks.formatCurrency(item.subtotal)}</Text>
523 </View>
524
525
526
527 {
528 //Section Ongkos Kirim
529 }
530 <View>
531 <Text style={{ marginBottom: 5, marginTop: 5, marginLeft: 15, fontSize: 14 }}>Ongkos Kirim</Text>
532 <Text style={{ position: 'absolute', right: 10, fontSize: 14, marginBottom: 5, marginTop: 5 }}>{item.shipping_cost ? Hooks.formatCurrency(item.shipping_cost) : 0}</Text>
533 </View>
534
535 {
536 //Section Amount Total
537 }
538 <View>
539 <Text style={{ marginBottom: 5, marginTop: 5, marginLeft: 15, fontSize: 14 }}>Total</Text>
540 <Text style={{ position: 'absolute', right: 10, fontSize: 14, marginBottom: 5, marginTop: 5 }}>{item.grand_total ? Hooks.formatCurrency(item.grand_total) : item.subtotal}</Text>
541 </View>
542 </View>
543
544 </View>
545 }
546 />
547 {
548 //Summary
549 }
550 <Text style={{ marginTop: 5, marginLeft: 5, fontSize: 14, color: 'gray' }}>Summary</Text>
551 <View style={{ backgroundColor: '#0000000A', marginBottom: 20 }}>
552 {
553 //Section Subtotal
554 }
555 <View>
556 <Text style={MyCartStyle.paymentMenuText}>Subtotal</Text>
557 <Text style={{ position: 'absolute', right: 10, fontSize: 14, marginBottom: 5, marginTop: 5 }}>{Hooks.formatCurrency(subtotalSum)}</Text>
558 </View>
559
560
561
562 {
563 //Section Ongkos Kirim
564 }
565 <View>
566 <Text style={{ marginBottom: 5, marginTop: 5, marginLeft: 15, fontSize: 14 }}>Ongkos Kirim</Text>
567 <Text style={{ position: 'absolute', right: 10, fontSize: 14, marginBottom: 5, marginTop: 5 }}>{ Hooks.formatCurrency(costSum) }</Text>
568 </View>
569
570 {
571 //Section Amount Total
572 }
573 <View>
574 <Text style={{ marginBottom: 5, marginTop: 5, marginLeft: 15, fontSize: 14 }}>Total</Text>
575 <Text style={{ position: 'absolute', right: 10, fontSize: 14, marginBottom: 5, marginTop: 5 }}>{Hooks.formatCurrency(totalSum)}</Text>
576 </View>
577 </View>
578 <Button
579 full
580 style={{ flex: 1, height: 40, backgroundColor: '#faa819' }}
581 onPress={() => this.doUpload()}
582 >
583
584 <Text>Payment Menu</Text>
585
586 </Button>
587 </Content>
588 {
589 //Modal For Add Address
590 }
591 <Modal
592 style={{ backgroundColor: '#0000001A' }}
593 animationType="slide"
594 transparent={false}
595 visible={this.state.modalAddAddress}
596 onRequestClose={() => {
597 alert('Modal has been closed.');
598 }}>
599 <Header>
600 <Left>
601 <TouchableHighlight onPress={() => this.setAddAddressValue()}>
602 <Text>Close</Text>
603 </TouchableHighlight>
604 </Left>
605 <Title>Add Address</Title>
606 <Right></Right>
607 </Header>
608 {this.state.isLoading && <View style={[MyCartStyle.overlay, { width: this.state.normalWidth, height: this.state.normalHeight }]} >
609 <ActivityIndicator color="#2d1e5f" size="large" style={{ marginBottom: 0.1 * this.state.normalHeight }} />
610 </View>
611 }
612
613 <ScrollView style={{ backgroundColor: '#0000001A' }}>
614
615 {
616 //Name of receiver
617 }
618 <View style={{ margin: 15, backgroundColor: color.white, flexDirection: 'column', borderRadius: 3 }}>
619 <Text style={{ marginLeft: 10, marginTop: 5 }}>Simpan Lokasi Sebagai</Text>
620 <Input
621 onChangeText={(location_name) => this.setState({ location_name })}
622 style={{ borderBottomWidth: 0.5, borderBottomColor: 'gray', margin: 10, fontSize: 13 }}
623 placeholderTextColor='gray'
624 placeholder='Simpan Sebagai(Contoh: Alamat Rumah, Kantor)' />
625
626 <Text style={{ marginLeft: 10, marginTop: 5 }}>Nama Penerima</Text>
627 <Input
628 onChangeText={(name_receiver) => this.setState({ name_receiver })}
629 style={{ borderBottomWidth: 0.5, borderBottomColor: 'gray', margin: 10, fontSize: 13 }}
630 placeholderTextColor='gray'
631 placeholder='Nama Penerima' />
632
633 </View>
634
635 {
636 //Full Address
637 }
638 <View style={{ margin: 15, backgroundColor: color.white, flexDirection: 'column' }}>
639 <Text style={{ marginLeft: 10, marginTop: 5 }}>Alamat Lengkap</Text>
640 <Input
641 onChangeText={(address) => this.setState({ address })}
642 style={{ borderBottomWidth: 0.5, borderBottomColor: 'gray', margin: 10, fontSize: 13 }}
643 placeholderTextColor='gray'
644 placeholder='Alamat Lengkap' />
645 </View>
646
647 {
648 //Province
649 }
650 <View style={{ margin: 15, backgroundColor: color.white, flexDirection: 'column' }}>
651 <Text style={{ marginLeft: 10, marginTop: 5 }}>Provinsi</Text>
652 {/* <Input
653 onChangeText={(province) => this.setState({ province })}
654 style={{ borderBottomWidth: 0.5, borderBottomColor: 'gray', margin: 10, fontSize: 13 }}
655 placeholderTextColor='gray'
656 placeholder='Provinsi' /> */}
657 <ModalSelector
658 selectStyle={{ borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0 }}
659 style={{}}
660 data={this.state.dataProvince}
661 keyExtractor={province => province.id}
662 labelExtractor={province => province.name}
663 backdropPressToClose={true}
664 initValue="Pilih Province"
665 cancelStyle={{ display: 'none' }}
666 onChange={(province) => { this.reqDropdownRegency(province) }}
667 />
668 </View>
669
670 {
671 //Regency
672 this.state.province != '' ?
673 <View style={{ margin: 15, backgroundColor: color.white, flexDirection: 'column' }}>
674 <Text style={{ marginLeft: 10, marginTop: 5 }}>Regency</Text>
675 <ModalSelector
676 selectStyle={{ borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0 }}
677 style={{}}
678 data={this.state.dataRegency}
679 keyExtractor={regency => regency.id}
680 labelExtractor={regency => regency.name}
681 backdropPressToClose={true}
682 initValue="Pilih regency"
683 cancelStyle={{ display: 'none' }}
684 onChange={(regency) => { this.reqDropdownDistrict(regency) }}
685 />
686 </View>
687 :
688 <View/>
689 }
690
691 {
692 //district
693 this.state.regency != '' ?
694 <View style={{ margin: 15, backgroundColor: color.white, flexDirection: 'column' }}>
695 <Text style={{ marginLeft: 10, marginTop: 5 }}>District</Text>
696 <ModalSelector
697 selectStyle={{ borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0 }}
698 style={{}}
699 data={this.state.dataDistrict}
700 keyExtractor={district => district.id}
701 labelExtractor={district => district.name}
702 backdropPressToClose={true}
703 initValue="Pilih district"
704 cancelStyle={{ display: 'none' }}
705 onChange={(district) => { this.reqDropdownVillage(district) }}
706 />
707 </View>
708 :
709 <View/>
710 }
711
712 {
713 //village
714 this.state.district != '' ?
715 <View style={{ margin: 15, backgroundColor: color.white, flexDirection: 'column' }}>
716 <Text style={{ marginLeft: 10, marginTop: 5 }}>Village</Text>
717 <ModalSelector
718 selectStyle={{ borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0 }}
719 style={{}}
720 data={this.state.dataVillage}
721 keyExtractor={village => village.id}
722 labelExtractor={village => village.name}
723 backdropPressToClose={true}
724 initValue="Pilih village"
725 cancelStyle={{ display: 'none' }}
726 onChange={(village) => { this.setState({village: village.id}) }}
727 />
728 </View>
729 :
730 <View/>
731 }
732
733 {
734 //Pos code and phone number receiver
735 }
736
737 <View style={{ margin: 15, backgroundColor: color.white, flexDirection: 'column' }}>
738 <Text style={{ marginLeft: 10, marginTop: 5 }}>Post Code</Text>
739 <Input
740 onChangeText={(postalCode) => this.setState({ postalCode })}
741 style={{ borderBottomWidth: 0.5, borderBottomColor: 'gray', margin: 10, fontSize: 13 }}
742 placeholderTextColor='gray'
743 placeholder='Pos Code' />
744
745 <Text style={{ marginLeft: 10, marginTop: 5 }}>Nomor Telepon Penerima</Text>
746 <Input
747 onChangeText={(phone_receiver) => this.setState({ phone_receiver })}
748 style={{ borderBottomWidth: 0.5, borderBottomColor: 'gray', margin: 10, fontSize: 13 }}
749 placeholderTextColor='gray'
750 placeholder='Nomor Telepon Penerima' />
751
752 </View>
753
754
755 <Button
756 full
757 onPress={() => this.addAddress()}
758 style={{ backgroundColor: '#faa819', marginLeft: 15, marginRight: 15 }}>
759 <Text>Add Address</Text>
760 </Button>
761 </ScrollView>
762 </Modal>
763
764 {
765 //Modal for Choose Address
766 }
767 <Modal
768 animationType="slide"
769 transparent={false}
770 visible={this.state.modalChooseAddress}
771 onRequestClose={() => {
772 alert('Modal has been closed.');
773 }}>
774
775 <Header>
776 <Left>
777 <TouchableHighlight onPress={() => this.setChooseModalValue()}>
778 <Text>Close</Text>
779 </TouchableHighlight>
780 </Left>
781 <Title>Choose Address</Title>
782 <Right></Right>
783 </Header>
784 {!this.state.dataAddress &&
785 <ActivityIndicator color="#2d1e5f" size="large" style={{ marginBottom: 0.1 * this.state.normalHeight }} />
786 }
787 <FlatList
788 data={this.state.dataAddress}
789 numColumns={1}
790 renderItem={({ item }) =>
791 <View style={{ margin: 10, borderBottomWidth: 1, borderBottomColor: '#0000001A' }}>
792 <TouchableHighlight onPress={() => this.setChooseModalValue(item)}>
793 <Text>{item.name}</Text>
794 </TouchableHighlight>
795
796 </View>
797 }
798 />
799
800 </Modal>
801 </Container>
802 );
803 }
804}