componentTransaction.js

import React from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View } from 'react-native';
import Modal from 'react-native-modal';
import Carousel from 'react-native-snap-carousel';
import moment from 'moment';
import { human } from 'react-native-typography';
import {
  TextContainerTop,
  TextContainer,
  TextContainerBotValid,
  TextContainerBotInvalid,
} from '../__textblock';
import PopupItemCard from '../__popupitemcard';
import { CardNavLeft, CardNavRight } from '../__cardnavigationbutton';
import { color, common, dimensions } from '../../styles/theme';
import { itemIndexSelector } from '../../states/selector/__utils';
import { transactionsById, transactionsLength } from '../../states/selector/_transaction';
import { onIncreaseIndex, onDecreaseIndex } from '../../states/__utils';
import ToRupiah from '../../utils/ToRupiah';
import { ParseTotal } from '../../utils/ParseTransaction';

class TransactionPopup extends React.PureComponent {
  renderCarousel = ({ item, index }) => { return <PopupItemCard data={item} id={index} />};

  render() {
    const {
      isOpen, onClose, data, dataLength, index, increaseIndex, decreaseIndex,
    } = this.props;

    return (
      <Modal
        style={styles.modal}
        isVisible={isOpen}
        onBackButtonPress={() => onClose()}
        onBackdropPress={() => onClose()}
        animationIn="fadeInUp"
        animationOut="fadeOutDown"
        animationInTiming={500}
        animationOutTiming={500}
        useNativeDriver
        hideModalContentWhileAnimating
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalHeader}>
            <Text style={[human.headline, common.textPrimary]}>Transaction Details</Text>
            <Text>{`${index + 1} of ${dataLength}`}</Text>
          </View>
          {data ? (
            <React.Fragment>
              <TextContainerTop
                label="Tanggal"
                data={moment(data.tanggal).format('DD MMMM YYYY')}
              />
              {data.kode_trans === 'SC' ? (
                <React.Fragment>
                  <TextContainer label="No.Invoice" data={data.no_invoice} />
                  <TextContainer label="No.Bon Manual" data={data.no_bon_manual || '-'} />
                  <TextContainer label="Outlet" data={data.kd_counter} />

                  {data.details.length !== 0 ? (
                    <React.Fragment>
                      <TextContainer label="Details" data=" " />
                      <View style={styles.detailContainer}>
                        <Carousel
                          data={data.details}
                          renderItem={this.renderCarousel}
                          itemWidth={dimensions.fullWidth * 0.48}
                          sliderWidth={dimensions.fullWidth * 0.8}
                        />
                      </View>
                    </React.Fragment>
                  ) : (
                    <TextContainer label="Details" data="-" />
                  )}
                  <TextContainer label="Quantity" data={data.qty} />
                  <TextContainer label="Gross" data={ToRupiah(ParseTotal(data.details))}  />
                  <TextContainer
                    label="Discount"
                    data={data.discount === null ? '-' : data.discount}
                  />
                  <TextContainer label="Nett" data={ToRupiah(ParseTotal(data.details) - (ParseTotal(data.details) * data.discount))} />

                </React.Fragment>
              ) : (
                <React.Fragment>
                  <TextContainer label="No.Invoice" data={data.no_invoice} />
                  <TextContainer label="Outlet" data={data.kd_counter} />
                  <TextContainer label="Details" data={data.remark} />
                </React.Fragment>
              )}
              {data.is_approved !== '0' ? (
                <TextContainerBotValid label="Status" data="Approved" />
              ) : (
                <TextContainerBotInvalid label="Status" data="Waiting For Approval" />
              )}
            </React.Fragment>
          ) : (
            <Text>No transaction detail :(</Text>
          )}
          <View style={styles.modalFooter}>
            {index >= 0 && <CardNavLeft onPress={() => decreaseIndex()} />}
            {index + 1 <= dataLength && <CardNavRight onPress={() => increaseIndex()} />}
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  modalContainer: {
    alignSelf: 'center',
    backgroundColor: color.colorBase,
    width: dimensions.fullWidth,
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    padding: 20,
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  modalFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8,
  },
  detailContainer: {
    backgroundColor: color.colorOff,
    paddingHorizontal: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const mapStateToProps = state => ({
  data: transactionsById(state),
  dataLength: transactionsLength(state),
  index: itemIndexSelector(state),
});

const mapDispatchToProps = dispatch => ({
  increaseIndex: () => {
    dispatch(onIncreaseIndex());
  },
  decreaseIndex: () => {
    dispatch(onDecreaseIndex());
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(TransactionPopup);