reactnative-socket.js

import React, {Component, Fragment} from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  Dimensions,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
} from 'react-native';
import {Button, Input, Card} from 'native-base';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {CommonActions} from '@react-navigation/native';
import * as Actions from '../../../actions';
import Moment from 'moment';
import 'moment/locale/id';
import {createFilter} from 'react-native-search-filter';
import AsyncStorage from '@react-native-community/async-storage';
import Modal from 'react-native-modal';
import {Modalize} from 'react-native-modalize';
import colors from '../../../util/colors';
import {dimen} from '../../../util/dimen';
import {TextApp as Text} from '../../widget/text';
import Icofont from 'react-native-vector-icons/FontAwesome5';
import Actionbar from '../../widget/actionbar';
import ProductSkuDetail from './productskudetail';
import {theme} from '../../../util/theme';
import WavyHeader from '../../widget/wavyheader';
import ButtonRegular from '../../widget/buttonRegular';
import StorePreview from '../store/storepreview';
import {AccountApi} from '../../account/accountapi';
import delivServices, {parseCheckprice} from '../../../util/deliveryservices';
import {ShippingApi} from '../../shipping/shippingapi';
import {ButtonSsmall} from '../../widget/buttonSelectSmall';
import parseAngka from '../../../util/parseAngka';
import LoadingView from '../../widget/loadingview';
import Pay from '../../account/pay';
import {PaymentApi} from '../../payment/paymentapi';
import {OrderApi} from '../order/orderapi';
import StockroomDetail from './stockroomdetail';

// socketio import
import {io} from 'socket.io-client';
// socketio endpoint initial
const URL = 'http://dreamfarm.co.id/socketserver';
const ENDPOINT = '/socketserver';
const SOCKET_ENDPOINT = ENDPOINT + '/socketio';

// socketio initialize
let socket = null;

function mapStatetoProps(state) {
  return {user: state.userReducers.user};
}
function mapDispatchtoProps(dispatch) {
  return bindActionCreators(Actions, dispatch);
}

const separator = (
  <View
    style={{
      width: '100%',
      marginTop: 5,
      height: 1,
      backgroundColor: colors.bgGrey + '50',
    }}
  />
);
const rupiah = require('../../../util/rupiah');

class Cart extends Component {
  modalizeRef = React.createRef();

  constructor(props) {
    super(props);
    this.state = {
      _isLoading: false,

      addressbookLoading: false,
      addressbooks: [],
      addressbookSearch: '',

      modalQty: false,
      productIdDetail: null,
      isStockroom: null,
      sectionOrder: [], // new scheme (multistore)

      orderLoading: false,
      showPayment: false,
      checkoutIndex: null,
      checkoutFare: 0,
      checkoutDiscount: 0,
      checkoutWeight: 0,
    };
    this.goBack = this.goBack.bind(this);
    this.addtoCart = this.addtoCart.bind(this);
    this.setStoreAdressbook = this.setSectiondata.bind(this);
    this.closeCartModal = this.closeCartModal.bind(this);
    this.checkoutCart = this.checkout.bind(this);
  }

  componentDidMount() {
    // socketio connect to socket server
    socket = io(URL, {
      path: SOCKET_ENDPOINT, //path for connect to socketio server
    });

    // socketio listening message from server
    socket.on('welcomeMessage', (data) => console.log(data));

    // socketio listening message from server
    socket.on('dataCreated', (data) => {
      this.setState({
        addressbooks: [...this.state.addressbooks, data.addressBook],
      });
      console.log(data);
    });

    // this.props.navigation.addListener('focus', async () => {
    //     this.fetchOrderData()
    // })
    this.fetchOrderData();
  }

  componentWillUnmount() {
    socket.disconnect();
  }

  goBack() {
    this.props.navigation.goBack();
  }

  async fetchAddressbook(index) {
    if (this.props.user.loggedin) {
      this.modalizeRef.current.open();
      this.setState({
        checkoutIndex: index,
        addressbookLoading: true,
      });
      await AccountApi.myAddressbook().then((response) => {
        if (response.status == 'success') {
          this.setState({addressbooks: response.data.addressBooks});
        } else {
          alert(response.message);
        }
        this.setState({addressbookLoading: false});
      });
    } else {
      this.props.navigation.navigate('Login');
    }
  }

  async fetchOrderData() {
    this.setState({_isLoading: true});
    let orderSections = [];
    await AsyncStorage.getItem('orderData').then((value) => {
      if (value != null) {
        let orderParsed = JSON.parse(value);
        orderSections = [
          ...orderSections,
          ...Object.values(
            orderParsed.orderData.reduce((acc, item) => {
              if (!acc[item.storeId])
                acc[item.storeId] = {
                  ordertype: 'product',
                  storeId: item.storeId,
                  orders: [],
                  addressbook: null,
                  destination: null,
                  shipping: null,
                  service: null,
                  jsonhelpPayload: '',
                };
              acc[item.storeId].orders.push(item);
              return acc;
            }, {}),
          ),
        ];
      }
    });

    await AsyncStorage.getItem('orderStockroomData').then((value) => {
      if (value != null) {
        let srParsed = JSON.parse(value);
        orderSections = [
          ...orderSections,
          ...Object.values(
            srParsed.orderData.reduce((acc, item) => {
              if (!acc[item.storeId])
                acc[item.storeId] = {
                  ordertype: 'stockout',
                  storeId: item.storeId,
                  orders: [],
                  addressbook: null,
                  destination: null,
                  shipping: null,
                  service: null,
                  jsonhelpPayload: '',
                };
              acc[item.storeId].orders.push(item);
              return acc;
            }, {}),
          ),
        ];
      }
    });
    this.setState({
      sectionOrder: orderSections,
      _isLoading: false,
    });
  }

  async fetchShipping(
    product,
    est_price,
    weight,
    sender,
    receiver,
    index,
    service,
  ) {
    this.setState({_isLoading: true});

    let item_specification = {
      name: product,
      item_description: 'My Dream',
      length: parseInt(10),
      width: parseInt(10),
      height: parseInt(10),
      weight: parseInt(Math.ceil(weight / 1000)), // gram to kilogram uper
      remarks: '',
    };

    if (service == 'express') {
      item_specification.insurance = 1;
      item_specification.packing = 0;
      item_specification.est_goods_value = parseInt(est_price);
    }

    let additionalService =
      service == 'instant'
        ? {
            vehicle_type: 'Motorcycle',
          }
        : {};

    let param = additionalService;
    param.sender = sender;
    param.receiver = receiver;
    param.item_specification = item_specification;

    console.log(param);

    let helpResult = null;
    await ShippingApi.checkPrice(param, service).then((response) => {
      if (response.statusCode != 200) {
        alert(response.message?.message || 'Layanan sedang tidak tersedia.');
      } else {
        helpResult = parseCheckprice(response, service);
      }
    });

    if (helpResult != null && helpResult.data.price > 0) {
      await ShippingApi.markUpPrice(helpResult.data.price).then((response) => {
        if (response.status == 'success') {
          helpResult.data.price = response.data.price;
          this.setSectiondata(
            {
              shipping: helpResult.data,
              service: service,
              jsonhelpPayload: JSON.stringify(param),
            },
            index,
            'shipping',
          );
        } else {
          alert('Layanan sedang sibuk, silahkan kontak kami.');
        }
      });
    }
    this.setState({_isLoading: false});
  }

  setSectiondata(addressbook, index, param) {
    if (addressbook != null) {
      let newSection = this.state.sectionOrder;
      if (param == 'origin') {
        newSection[index].addressbook = addressbook;
      } else if (param == 'destination') {
        newSection[index].destination = addressbook;
        newSection[index].shipping = null;
        newSection[index].service = null;
      } else if (param == 'shipping') {
        newSection[index].shipping = addressbook.shipping;
        newSection[index].service = addressbook.service;
        newSection[index].jsonhelpPayload = addressbook.jsonhelpPayload;
      }

      this.setState({sectionOrder: newSection});
    }
  }

  async addtoCart(idproduct, isStockroom = true) {
    this.props.user.loggedin
      ? this.setState({
          isStockroom: isStockroom,
          modalQty: true,
          productIdDetail: idproduct,
        })
      : this.props.navigation.navigate('Login');
  }

  async closeCartModal() {
    this.setState({
      modalQty: false,
      productIdDetail: null,
    });
    this.fetchOrderData();
  }

  async pay(index, fare, discount, weight) {
    this.setState({
      checkoutIndex: index,
      checkoutFare: fare,
      checkoutDiscount: discount,
      checkoutWeight: weight,
      showPayment: true,
    });
  }

  checkout = async (payment, amount, isUsePoints) => {
    let collection = {};
    const dataOrder = this.state.sectionOrder[this.state.checkoutIndex];

    this.setState({orderLoading: true});
    try {
      //STOREID
      collection.storeId = dataOrder.storeId;

      //CUSTOMER
      if (
        this.props.user.phoneNumber == null ||
        this.props.user.phoneNumber.length < 9
      ) {
        throw new Error(
          'Nomor handphone anda tidak valid, silahkan perbarui profil anda.',
        );
      }
      collection.customer = {
        name: this.props.user.name,
        phoneNumber: this.props.user.phoneNumber,
      };

      //SHIPPING
      if (dataOrder.shipping != null) {
        collection.shippingOrder = {
          addressbookId: dataOrder.addressbook.id,
          receiverName: dataOrder.destination.senderName,
          receiverPhone: dataOrder.destination.phoneNumber,
          destinationAddress: dataOrder.destination.detailAddress,
          lng: dataOrder.destination.lng,
          lat: dataOrder.destination.lat,
          courier: 'Help',
          service: dataOrder.service,
          weight: Math.ceil(this.state.checkoutWeight),
          price: dataOrder.shipping.price,
          // notes: "",
          waybillNo: null,
          partnerBody: dataOrder.jsonhelpPayload,
        };
      } else {
        throw new Error('Data pengiriman belum lengkap');
      }

      //ORDERDATA
      let orderDetailData = {
        priceOrder: this.state.checkoutFare,
        discountOrder: this.state.checkoutDiscount,
        paymentMethod: 'transferbank',
        orderName: this.props.user.name,
        orderNote: '',
      };

      //PAYMENT
      const oyPayment = {
        partner_user_id:
          'MYDREAM-' +
          this.props.user.id +
          '-' +
          this.props.user.email +
          '-' +
          Moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        partner_trx_id:
          'MYDREAMTRX-' +
          dataOrder.ordertype +
          '-' +
          Moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        username_display: this.props.user.name,
        bank_code: payment,
        amount: amount,
        is_open: false,
        is_single_use: true,
        trx_expiration_time: 60,
      };
      await PaymentApi.generateOyVa(oyPayment).then((response) => {
        if (response.status.message == 'Success') {
          collection.payment = {
            vaId: response.id,
            payAmount: response.amount,
            payChannel: response.bank_code,
            expirationTime: Moment(
              new Date(response.trx_expiration_time),
            ).format('YYYY-MM-DD HH:mm:ss'),
            vaNumber: response.va_number,
          };
        } else {
          throw new Error(response.status.message);
        }
      });

      if (dataOrder.ordertype == 'product') {
        collection.productOrder = orderDetailData;

        //ORDER ITEM
        let orders = [];
        dataOrder.orders.map((product) => {
          product.skus.map((sku) => {
            orders = orders.concat({
              skuId: sku.id,
              unitPrice: sku.price,
              quantity: sku.qty,
              discount: sku.discount,
              isPreOrder: sku.isPreOrder,
              itemNotes: sku.notes,
            });
          });
        });
        collection.productOrderDetails = orders;
      } else if (dataOrder.ordertype == 'stockout') {
        collection.outStockRoom = orderDetailData;

        //ORDER ITEM
        collection.outStockRoomDetails = dataOrder.orders;
      } else {
        throw new Error('Ordertype null, Contact My Dream team!');
      }

      await OrderApi.pushorder(collection, dataOrder.ordertype).then(
        (response) => {
          if (response.status == 'success') {
            if (dataOrder.ordertype == 'product') {
              AsyncStorage.removeItem('orderData');
              this.props.navigation.dispatch(
                CommonActions.reset({
                  index: 2,
                  routes: [
                    {name: 'Home'},
                    {name: 'Market Home'},
                    {name: 'Market AllOrders'},
                    {
                      name: 'Market OrderDetail',
                      params: {
                        id: response.data.productOrder.id,
                      },
                    },
                    {
                      name: 'HowtoPay',
                      params: {
                        product: {
                          page: 'Market OrderDetail',
                          param: {
                            id: response.data.productOrder.id,
                          },
                        },
                        vaId: collection.payment.vaId,
                      },
                    },
                  ],
                }),
              );
            } else if (dataOrder.ordertype == 'stockout') {
              AsyncStorage.removeItem('orderStockroomData');
              this.props.navigation.dispatch(
                CommonActions.reset({
                  index: 2,
                  routes: [
                    {name: 'Home'},
                    {name: 'Market Home'},
                    {name: 'Market AllOrders'},
                    {
                      name: 'Market OutstockroomDetail',
                      params: {
                        id: response.data.outStockRoom.id,
                      },
                    },
                    {
                      name: 'HowtoPay',
                      params: {
                        product: {
                          page: 'Market OutstockroomDetail',
                          param: {
                            id: response.data.outStockRoom.id,
                          },
                        },
                        vaId: collection.payment.vaId,
                      },
                    },
                  ],
                }),
              );
            }
          } else {
            alert(response.message);
          }
        },
      );
    } catch (error) {
      alert(error);
    }
    this.setState({orderLoading: false});
  };

  render() {
    return (
      <Fragment>
        <SafeAreaView
          style={{flex: 0, backgroundColor: colors.primaryColorDark}}>
          <Actionbar
            goback={this.goBack}
            title={'Keranjang Belanja'}
            rightbtn={
              <Button
                transparent
                onPress={async () => {
                  await AsyncStorage.removeItem('orderData');
                  await AsyncStorage.removeItem('orderStockroomData');
                  this.fetchOrderData();
                }}>
                <Icofont name="trash" solid color={'white'} size={18} />
              </Button>
            }
          />
        </SafeAreaView>
        {this.state._isLoading && (
          <LoadingView visible={this.state._isLoading} />
        )}
        <View
          style={{
            flex: 1,
            padding: dimen.paddingBody,
            backgroundColor: colors.backgroundColor,
          }}>
          <WavyHeader
            customStyles={{
              position: 'absolute',
              width: Dimensions.get('window').width,
            }}
          />
          <ScrollView showsVerticalScrollIndicator={false}>
            {this.state.sectionOrder.length > 0 ? (
              this.state.sectionOrder.map((section, sectionIndex) => {
                let subtotal = 0;
                let disctotal = 0;
                let weighttotal = 0;
                return (
                  <View
                    key={section.storeId}
                    style={{
                      padding: dimen.paddingBody,
                      borderRadius: dimen.borderRadius,
                      backgroundColor: 'white',
                      marginBottom: dimen.marginItem,
                    }}>
                    <StorePreview
                      storeId={section.storeId}
                      storeIndex={sectionIndex}
                      setAddressbook={this.setStoreAdressbook}
                    />
                    {section.orders.map((prod) => {
                      if (section.ordertype == 'product') {
                        return prod.skus.map((sku) => {
                          let currDiscount =
                            sku.discount == null ? 0 : parseInt(sku.discount);
                          disctotal += currDiscount;
                          subtotal += sku.price * sku.qty;
                          weighttotal += sku.weight * sku.qty;
                          return (
                            <View key={Math.random()}>
                              <Card style={styles.chartItem}>
                                <View
                                  style={{
                                    flexDirection: 'row',
                                    alignItems: 'center',
                                  }}>
                                  <View style={{flex: 1}}>
                                    <Text>{prod.productName}</Text>
                                    <View
                                      style={{
                                        flexDirection: 'row',
                                        alignItems: 'center',
                                        marginTop: 5,
                                      }}>
                                      {sku.skuValues.map((variant) => (
                                        <Text
                                          key={Math.random()}
                                          style={styles.skuVariant}>
                                          {
                                            variant.variantOption
                                              .variantOptionName
                                          }
                                        </Text>
                                      ))}
                                    </View>
                                    <Text style={{marginTop: 5}}>
                                      {rupiah(sku.price)}
                                    </Text>
                                  </View>
                                  <View
                                    style={{
                                      alignItems: 'flex-end',
                                      marginRight: dimen.marginItem,
                                    }}>
                                    <Text>{'x ' + sku.qty}</Text>
                                  </View>
                                  <TouchableOpacity
                                    onPress={() =>
                                      this.addtoCart(prod.idproduct, false)
                                    }>
                                    <Icofont
                                      name="pen-square"
                                      solid
                                      size={18}
                                      color={colors.bgWarning}
                                    />
                                  </TouchableOpacity>
                                </View>
                                {currDiscount > 0 && (
                                  <Text
                                    style={{
                                      fontSize: 14,
                                      color: colors.bgSuccess,
                                      marginTop: 5,
                                      alignSelf: 'flex-end',
                                    }}>
                                    <Icofont name="tag" solid /> Disc{' '}
                                    {rupiah(currDiscount)} /pcs
                                  </Text>
                                )}
                              </Card>
                            </View>
                          );
                        });
                      } else {
                        subtotal += prod.outPrice * prod.outQty;
                        if (prod.unit.toLowerCase() == 'kg')
                          weighttotal += prod.outQty * 1000;
                        // in gram
                        else if (
                          prod.unit.toLowerCase() == 'gr' ||
                          prod.unit.toLowerCase() == 'gram'
                        )
                          weighttotal += prod.outQty;
                        return (
                          <View>
                            <Card style={styles.chartItem}>
                              <View
                                style={{
                                  flexDirection: 'row',
                                  alignItems: 'center',
                                }}>
                                <View style={{flex: 1}}>
                                  <Text>{prod.productName}</Text>
                                  <Text style={{marginTop: 5}}>
                                    {rupiah(prod.outPrice)}
                                  </Text>
                                </View>
                                <View
                                  style={{
                                    alignItems: 'flex-end',
                                    marginRight: dimen.marginItem,
                                  }}>
                                  <Text>{'x ' + prod.outQty}</Text>
                                </View>
                                <TouchableOpacity
                                  onPress={() => this.addtoCart(prod, true)}>
                                  <Icofont
                                    name="pen-square"
                                    solid
                                    size={18}
                                    color={colors.bgWarning}
                                  />
                                </TouchableOpacity>
                              </View>
                            </Card>
                          </View>
                        );
                      }
                    })}
                    <Text
                      style={[
                        theme.formNotes,
                        {
                          marginTop: dimen.paddingBody,
                          marginBottom: dimen.marginItem,
                        },
                      ]}>
                      Pengiriman
                    </Text>
                    {section.destination == null ? (
                      <TouchableOpacity
                        onPress={() => this.fetchAddressbook(sectionIndex)}>
                        <View
                          style={{
                            backgroundColor: colors.bgGrey + '80',
                            borderRadius: dimen.paddingBody,
                            padding: dimen.marginItem,
                            alignItems: 'center',
                          }}>
                          <Text style={{color: 'white'}}>
                            <Icofont name="plus-circle" solid /> Tambah penerima
                          </Text>
                        </View>
                      </TouchableOpacity>
                    ) : (
                      <View
                        style={{
                          backgroundColor: colors.secondaryColorLight + '10',
                          borderRadius: dimen.paddingBody,
                          padding: dimen.marginItem,
                          paddingLeft: dimen.paddingBody,
                          paddingRight: dimen.paddingBody,
                        }}>
                        <Text
                          style={{
                            marginBottom: dimen.marginItem / 2,
                            fontWeight: 'bold',
                            color: colors.secondaryColorDark,
                          }}>
                          Tujuan
                        </Text>
                        <View
                          style={{
                            flexDirection: 'row',
                            alignItems: 'flex-start',
                          }}>
                          <Text style={{flex: 1, fontSize: 14, color: 'black'}}>
                            {section.destination.senderName +
                              '\n' +
                              section.destination.phoneNumber +
                              '\n' +
                              section.destination.detailAddress}
                          </Text>
                          <TouchableOpacity
                            onPress={() => this.fetchAddressbook(sectionIndex)}>
                            <Icofont
                              name="pen-square"
                              solid
                              size={18}
                              color={colors.bgWarning}
                            />
                          </TouchableOpacity>
                        </View>
                        <Text
                          style={{
                            marginTop: dimen.marginItem,
                            marginBottom: dimen.marginItem / 2,
                            fontWeight: 'bold',
                            color: colors.secondaryColorDark,
                          }}>
                          Service
                        </Text>
                        <ScrollView
                          horizontal
                          showsHorizontalScrollIndicator={false}
                          style={{marginLeft: -dimen.paddingBody}}>
                          {delivServices.map((services) => (
                            <TouchableOpacity
                              key={services.id}
                              onPress={() =>
                                this.fetchShipping(
                                  section.orders[0].productName,
                                  subtotal,
                                  weighttotal,
                                  {
                                    // sender
                                    name: section.addressbook.senderName,
                                    phone: section.addressbook.phoneNumber,
                                    address: section.addressbook.detailAddress,
                                    notes: 'sender',
                                    latitude: section.addressbook.lat,
                                    longitude: section.addressbook.lng,
                                  },
                                  {
                                    // receiver
                                    name: section.destination.senderName,
                                    phone: section.destination.phoneNumber,
                                    address: section.destination.detailAddress,
                                    notes: 'receiver',
                                    latitude: section.destination.lat,
                                    longitude: section.destination.lng,
                                  },
                                  sectionIndex,
                                  services.id,
                                )
                              }>
                              <ButtonSsmall
                                name={services.name}
                                icon={services.icon}
                                selected={
                                  services.id == section.service ? true : false
                                }
                              />
                            </TouchableOpacity>
                          ))}
                        </ScrollView>
                      </View>
                    )}
                    <View style={{marginTop: dimen.paddingBody}}>
                      <View
                        style={{
                          flexDirection: 'row',
                          alignItems: 'center',
                          marginTop: 5,
                        }}>
                        <Text style={{flex: 1, fontSize: 14}}>Subtotal</Text>
                        <Text style={{fontSize: 14}}>{rupiah(subtotal)}</Text>
                      </View>
                      <View
                        style={{
                          flexDirection: 'row',
                          alignItems: 'center',
                          marginTop: 5,
                        }}>
                        <Text style={{flex: 1, fontSize: 14}}>Discount</Text>
                        <Text style={{fontSize: 14}}>{rupiah(disctotal)}</Text>
                      </View>
                      <View
                        style={{
                          flexDirection: 'row',
                          alignItems: 'center',
                          marginTop: 5,
                        }}>
                        <Text style={{flex: 1, fontSize: 14}}>Jasa Kirim</Text>
                        <Text style={{fontSize: 14}}>
                          {rupiah(parseAngka(section.shipping?.price))}
                        </Text>
                      </View>
                    </View>
                    <View
                      style={{
                        marginTop: dimen.marginItem * 3,
                        flexDirection: 'row',
                        alignItems: 'center',
                      }}>
                      <View style={{flex: 1, marginRight: dimen.marginItem}}>
                        <Text style={theme.formNotes}>Total</Text>
                        <Text
                          style={[
                            theme.fontTitle,
                            {marginTop: dimen.marginItem / 2},
                          ]}>
                          {rupiah(
                            subtotal -
                              disctotal +
                              parseAngka(section.shipping?.price),
                          )}
                        </Text>
                      </View>
                      <ButtonRegular
                        onPress={() =>
                          this.pay(
                            sectionIndex,
                            subtotal -
                              disctotal +
                              parseAngka(section.shipping?.price), // total price
                            disctotal,
                            weighttotal,
                          )
                        }
                        iconName={'check'}
                        buttonName={'Pay'}
                      />
                    </View>
                  </View>
                );
              })
            ) : (
              <View>
                <Text
                  style={[
                    theme.fontTitle,
                    {color: '#FFFFFF99', textAlign: 'center'},
                  ]}>
                  Keranjang belanja kosong!
                </Text>
              </View>
            )}
          </ScrollView>
        </View>
        <Modal
          isVisible={this.state.modalQty}
          onBackdropPress={() => {}}
          style={{margin: 10}}>
          <View
            style={[
              styles.modalboxqty,
              {
                height: 100,
                maxHeight: Dimensions.get('window').height * (70 / 100),
              },
              {width: '95%'},
            ]}>
            {this.state.productIdDetail != null ? (
              this.state.isStockroom ? (
                <StockroomDetail
                  stockroom={this.state.productIdDetail}
                  closeModal={this.closeCartModal}
                />
              ) : (
                <ProductSkuDetail
                  idproduct={this.state.productIdDetail}
                  closeModal={this.closeCartModal}
                />
              )
            ) : (
              <></>
            )}
          </View>
        </Modal>

        <Modal
          isVisible={this.state.showPayment}
          onBackdropPress={() => this.setState({showPayment: false})}
          style={{margin: 0, justifyContent: 'flex-end'}}>
          {this.state.checkoutIndex != null && (
            <Pay
              onlyBanks={true}
              price={this.state.checkoutFare}
              isLoading={this.state.orderLoading}
              onPay={this.checkoutCart}
            />
          )}
        </Modal>

        <Modalize
          ref={this.modalizeRef}
          onClosed={() => {}}
          modalStyle={{backgroundColor: 'white'}}>
          <View style={{padding: dimen.paddingBody}}>
            <Text style={{fontSize: 14}}>Alamat saya</Text>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: dimen.marginItem,
              }}>
              <Icofont
                name="search"
                size={16}
                style={{color: colors.bgGrey, marginRight: dimen.marginItem}}
              />
              <Input
                style={[theme.formInputBold, {flex: 1, height: 30}]}
                placeholder={'Cari'}
                placeholderTextColor={colors.bgGrey + '80'}
                onChangeText={(v) => this.setState({addressbookSearch: v})}
              />
              <Button
                transparent
                onPress={() => this.props.navigation.navigate('AddressBook')}>
                <Text
                  style={[
                    theme.formInputBold,
                    {color: colors.primaryColorDark},
                  ]}>
                  Tambah
                </Text>
              </Button>
            </View>
            {separator}
          </View>

          <View
            style={{
              paddingLeft: dimen.paddingBody,
              paddingRight: dimen.paddingBody,
            }}>
            {this.state.addressbookLoading && (
              <ActivityIndicator
                size={'large'}
                color={colors.primaryColorDark}
                style={{marginTop: dimen.marginItem}}
              />
            )}
            {this.state.addressbooks.length > 0 &&
              !this.state.addressbookLoading &&
              this.state.addressbooks
                .filter(function (item) {
                  return item.addressAs != 'null';
                })
                .filter(
                  createFilter(this.state.addressbookSearch, ['addressAs']),
                )
                .map((addressbook) => (
                  <TouchableOpacity
                    key={Math.random()}
                    onPress={() => {
                      this.setSectiondata(
                        addressbook,
                        this.state.checkoutIndex,
                        'destination',
                      );
                      this.modalizeRef.current.close();
                    }}>
                    <View
                      style={{
                        backgroundColor: colors.backgroundColor,
                        borderRadius: dimen.marginItem,
                        padding: dimen.marginItem,
                        marginBottom: dimen.marginItem,
                      }}>
                      <Text style={theme.formInputBold}>
                        {addressbook.addressAs}
                      </Text>
                      {separator}
                      <Text
                        style={{
                          fontSize: 14,
                          color: 'black',
                          marginTop: dimen.marginItem / 2,
                        }}>
                        {addressbook.senderName +
                          ' (' +
                          addressbook.phoneNumber +
                          ')'}
                      </Text>
                      <Text
                        style={[
                          theme.formNotes,
                          {marginTop: dimen.marginItem / 2},
                        ]}>
                        {addressbook.detailAddress}
                      </Text>
                    </View>
                  </TouchableOpacity>
                ))}
          </View>
        </Modalize>
      </Fragment>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    padding: 10,
    backgroundColor: colors.backgroundColor,
  },
  skuVariant: {
    color: colors.secondaryColorDark,
  },
  chartItem: {
    margin: 0,
    padding: dimen.marginItem,
    borderRadius: dimen.marginItem,
  },
  modalboxqty: {
    flex: 1,
    alignSelf: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
  },
});

export default connect(mapStatetoProps, mapDispatchtoProps)(Cart);