api calls

import axios from "axios";
import { customConfig } from "../../action_constants";
import { authHeader } from "../../../helpers/authHeader";
const API_URL = customConfig.API_URL;
const API_URL_CARD = customConfig.API_URL_CARD;
const API_URL_REPORT = customConfig.API_URL_REPORT;
const API_URL_CARD_AND_TRANS = customConfig.API_URL_CARD_AND_TRANS;

export function fetchAllTrail(page,pageSize) {
  return function(dispatch) {
    dispatch({ type: "FETCH_TRAIL_START" });
    axios
      .get(API_URL + `api/trails/owner?oid=1&page=${page}&size=${pageSize}`, {
        headers: authHeader()
      })
      .then(res => {
        dispatch({ type: "FETCH_All_TRAIL_FULLFILLED", payload: res.data });
      })
      .catch(err => {
        dispatch({ type: "FETCH_All_TRAIL_REJECTED", payload: err });
      });
  };
}

export function fetchAllTrailByCustomer(cid,page,pageSize) {
  return function(dispatch) {
    dispatch({ type: "FETCH_AllCUSTOMER_TRAIL_START" });
    axios
      .get(
        API_URL + `api/trails/customer?cid=${cid}&"&page=${page}&size=${pageSize}`,
        { headers: authHeader() }
      )
      .then(res => {
        dispatch({
          type: "FETCH_AllCUSTOMER_TRAIL_FULLFILLED",
          payload: res.data
        });
      })
      .catch(err => {
        dispatch({ type: "FETCH_AllCUSTOMER_TRAIL_REJECTED", payload: err });
      });
  };
}
export function fetchAllTrailByVendor(vid,page,pageSize) {
  return function(dispatch) {
    dispatch({ type: "FETCH_ALLVENDOR_TRAIL_START" });
    axios
      .get(API_URL + `api/trails/vendor?vid=${vid}&vid &page=${page}&size=${pageSize}`, {
        headers: authHeader()
      })
      .then(res => {
        dispatch({
          type: "FETCH_AllVENDOR_TRAIL_FULLFILLED",
          payload: res.data
        });
      })
      .catch(err => {
        dispatch({ type: "FETCH_AllVENDOR_TRAIL_REJECTED", payload: err });
      });
  };
}
export function fetchAllTransactionsSec() {
  return function(dispatch) {
    dispatch({ type: "FETCH_TRANSACTION_START" });
    axios
      .get(API_URL_CARD + "api/transaction/all?page=0&size=10000000", {
        headers: authHeader()
      })
      .then(res => {
        dispatch({ type: "FETCH_All_TRANSACTION_FULLFILLED", payload: res });
      })
      .catch(err => {
        dispatch({ type: "FETCH_All_TRANSACTION_REJECTED", payload: err });
      });
  };
}



export function fetchAllTransactions(startDate, endDate, page, pageSize,status) {
  return function(dispatch) {
    dispatch({ type: "FETCH_TRANSACTION_START" });
    axios
      .get(
        API_URL_CARD_AND_TRANS +
          `kobo360-trx/api/v1/transactions?pageNum=${page}&pageSize=${pageSize}&startDate=${startDate}&endDate=${endDate}%2023:59:59&status=${status}`,
        {
          headers: authHeader()
        }
      )
      .then(res => {
        dispatch({ type: "FETCH_All_TRANSACTION_FULLFILLED", payload: res });
      })
      .catch(err => {
        dispatch({ type: "FETCH_All_TRANSACTION_REJECTED", payload: err });
      });
  };
}

export function getTransactionsByvendorForDashboard(vid,page,pageSize,startDate, endDate,status) {
  return function(dispatch) {
    axios
      .get(
        `${
          customConfig.API_URL_CARD_AND_TRANS
        }kobo360-trx/api/v1/transactions?vendorNumber=${vid}&pageNum=${page}&pageSize=${pageSize}&startDate=${startDate}&endDate=${endDate}%2023:59:59&status=${status}`,
        { headers: authHeader() }
      )
      .then(res => { 
        dispatch({ type: "GET_ALL_VENDORS_TRANSACTION_FOR_VDASHBOARD", payload: res.data });
      })
      .catch(err => {
        // dispatch(getAllVendorsLoadingStatus(2));
      });
  };
}



export function getTransactionsByvendor(vid, startDate, endDate, page, pageSize) {
  return function(dispatch) {
    axios
      .get(
        `${
          customConfig.API_URL_CARD_AND_TRANS
        }kobo360-trx/api/v1/transactions?vendorNumber=${vid}&pageNum=${page}&pageSize=${pageSize}&startDate=${startDate}&endDate=${endDate}%2023:59:59`,
        { headers: authHeader() }
      )
      .then(res => {
        dispatch({ type: "GET_ALL_VENDORS_TRANSACTION", payload: res.data });
      })
      .catch(err => {
        // dispatch(getAllVendorsLoadingStatus(2));
      });
  };
}

export function getAllSettlements() {
  return function(dispatch) {
    dispatch({ type: "FETCH_SETTLEMENTS_START" });
    axios
      .get(API_URL_REPORT + "api/settlement/find/all", {
        headers: authHeader()
      })
      // api/settlement/customer?page=0&size=50&customer=CUS000002
      .then(res => {
        dispatch({ type: "FETCH_SETTLEMENTS_FULFILLED", payload: res.data });
      })
      .catch(err => {
        dispatch({ type: "FETCH_SETTLEMENTS_REJECTED", payload: err });
      });
  };
}

//////////////////////////////////////////////////////
import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import '../../admin/Admin.css';
import '../../admin/pages/Pages.css';
import './../../New Style/newGeneral.css'
import 'react-table/react-table.css'
import Filter from '../../../assets/funnelv.svg'
import { fetchAllTransactions } from '../../../actions/OwnerActions/OwnerTrailMgtActions/OwnerTrailActions';
import { CSVLink } from 'react-csv';
import { connect } from 'react-redux';
import ReactTable from 'react-table';
import {  Row,Col} from 'reactstrap';
import moment from 'moment';
import DatePicker from 'react-datepicker';
import { addDays, format } from 'date-fns';
import 'react-datepicker/dist/react-datepicker.css';
const caretImg = require('../../../assets/caretside.svg');
const rboxImg = require('../../../assets/rectbox.png');
const rept = require('../../../assets/Report.svg');
class OReportTransaction extends Component {
    state = {
      startDate: new Date(moment().subtract(7, 'days').format('LLLL')),
      endDate: new Date(),
      page:1,
      pageSize: 20,
      status:2
    };
   
  submitdateHandler = e => {
    e.preventDefault();
    const { startDate, endDate, page, pageSize,status} = this.state;
    const startDateFilter = moment(startDate).format('YYYY-MM-DD');
    const endDateFilter = moment(endDate).format('YYYY-MM-DD');
    this.props.fetchAllTransactionsFn(startDateFilter, endDateFilter, page, pageSize,status);
  };

 
  handleStartDateChange=(date)=>{
    this.setState({
      startDate: date
    });
  }

  handleEndDateChange=(date)=>{
    this.setState(() => ({
      endDate: date
    }));
  }

  componentDidUpdate(prevProps, prevState) {
    const { startDate, endDate } = this.state;
    if (startDate > prevState.endDate) {
      this.setState(state => ({
        endDate: addDays(state.startDate, 1)
      }));
    }
  }

  componentDidMount() {
    const { startDate, endDate, page, pageSize,status } = this.state;
    const start = moment(startDate).format('YYYY-MM-DD');
    const end = moment(endDate).format('YYYY-MM-DD')
    this.props.fetchAllTransactionsFn(start, end, page, pageSize,status);
  }

  handlePageChange = page => {
    const { startDate, endDate, pageSize,status } = this.state;
    const start = moment(startDate).format('YYYY-MM-DD');
    const end = moment(endDate).format('YYYY-MM-DD');
    this.setState({ page: ++page }, () => {
      this.props.fetchAllTransactionsFn(start, end, page, pageSize,status);
    })
  }

  handlePageSizeChange = size => {
    const { startDate, endDate, page, pageSize,status } = this.state;
    const start = moment(startDate).format('YYYY-MM-DD');
    const end = moment(endDate).format('YYYY-MM-DD');
    this.setState({ pageSize: size }, () => {
      this.props.fetchAllTransactionsFn(start, end, page, pageSize,status);
    })
  }

  render() {
  //  let noDataText: 'No rows found',
    const columns = [
      {
        Header: 'Time',
        accessor: 'time', // String-based value accessors!
        Cell: props => (
          <span className="number">
            {moment(props.value).format('YYYY-MM-DD HH:MM')}
          </span>
        ), // Custom cell components!
      },
      {
        Header: 'Card Number',
        accessor: 'cardNumber',
        Cell: props => <span className="number">{props.value}</span>, // Custom cell components!
      },
      {
        Header: 'Terminal',
        accessor: 'terminal',
        Cell: props => <span className="number">{props.value}</span>, // Custom cell components!
      },
      {
        Header: 'Channel',
        accessor: 'channel',
        Cell: props => <span className="number">{props.value}</span>, // Custom cell components!
      },
      {
        Header: 'Rate',
        accessor: 'rate',
        Cell: props => <span className="number">{props.value}</span>, // Custom cell components!
      },
      {
        Header: 'Status',
        accessor: 'status',
        Cell: props => <span className="number">{props.value}</span>, // Custom cell components!
      },
      {
        Header: 'Product',
        accessor: 'product',
        Cell: props => <span className="number">{props.value}</span>, // Custom cell components!
      },
      {
        Header: 'Description',
        accessor: 'description',
        Cell: props => <span className="number">{props.value}</span>, // Custom cell components!
      },
      {
        Header: 'Amount (N)',
        accessor: 'amount',
        Cell: props => <span className="number">{(props.value/100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span>, // Custom cell components!
      },
    ];
    let { oTransaction } = this.props;
    let transData = oTransaction ? oTransaction.content : '';
    let succesfulTransactions = 0;
    let failedTransactions = 0;
    let succesfulTransactionsCount=0;
    let failedTransactionsCount=0;
    oTransaction.content && oTransaction.content.map(transaction => {
      if (transaction.status === 'SUCCESS') {
        succesfulTransactions += transaction.amount;
        succesfulTransactionsCount++;
      } else {
        failedTransactions += transaction.amount;
        failedTransactionsCount++;
      }
    });
    succesfulTransactions = (succesfulTransactions / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    failedTransactions = (failedTransactions / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    
    return (
      <div className="Admin Vendor Settlement container" >
        <div className="row mx-md-2">
          <div className="col-md-12">
            <div className="px-md-3 pt-md-4  ">
              <div className="row my-md-4 ">
                <div className="col-md-7">
                  <ul className="breadcrumbs">
                    <li>
                      <Link to="/owner-admin/reports/">
                        <img src={rept} alt="Vendors" />
                      </Link>
                    </li>

                    <li>
                      <img src={caretImg} alt="Vendors" />
                    </li>
                    <li>
                      <p>Transaction Report</p>
                    </li>
                  </ul>
                </div>
                <div className="col-md-5">
                  
                </div>
              </div>

              <div className=" fixed-content-height large-padding">
                <div className="row section-two ml-5">
                  <div className="col-md-6 mt-md-3" >
                    <div className="cardv-container">
                      <img src={rboxImg} width="120%" className="cardv" height="213px" alt="vendors" />
                      
                      <div className="absol-container ">
                      <p className='text-center mb-0 mt-6'>Transaction</p>
                        <div className='d-flex flex-row justify-content-between'>
                          <div className='d-flex flex-column'>
                            <p className='' style={{marginBottom:'0px',marginTop:'20px'}}>Successful </p>
                            <div className="mt-0" style={{ margin: 0, fontSize: 20, fontWeight: 'bold' }}>
                                ₦{succesfulTransactions || 0}
                            </div>
                          </div>

                          <div className=''>
                            <p style={{marginBottom:'0px',marginTop:'20px'}}>Failed </p>
                            <div className="" style={{ margin: 0, fontSize: 20, fontWeight: 'bold' }}>
                                ₦{failedTransactions || 0}
                            </div>
                          </div>
                        </div>

                        <div className='d-flex justify-content-between mt-4 border-top'>
                            <p>{moment(this.state.startDate).format('YYYY-MM-DD')}</p>
                            <p>{moment(this.state.endDate).format('YYYY-MM-DD')}</p>
                      </div>

                      </div>
                    </div>
                  </div>

                  <div className="col-md-6 mt-md-3">
                  <div className="cardv-container">
                  <img src={rboxImg} width="120%" className="cardv" height="213px" alt="vendors" />
                    <div className="absol-container ">
                    <p className='text-center mb-0'> Number of Transaction(s)</p>
                        <div className='d-flex flex-row justify-content-between'>
                          <div className='d-flex flex-column'>
                            <p className='' style={{marginBottom:'0px',marginTop:'20px'}}>Successful </p>
                            <div className="mt-0" style={{ margin: 0, fontSize: 20, fontWeight: 'bold' }}>
                                {succesfulTransactionsCount || 0}
                            </div>
                          </div>

                          <div className=''>
                            <p style={{marginBottom:'0px',marginTop:'20px'}}>Failed </p>
                            <div className="" style={{ margin: 0, fontSize: 20, fontWeight: 'bold' }}>
                                {failedTransactionsCount || 0}
                            </div>
                          </div>
                        </div>
                      <div className='d-flex justify-content-between'>
                        {/* <span>
                          <p className="light-white-txt">Card</p>
                          <p style={{marginTop:'-15px'}}>{totalTrans}</p>
                        </span>
                        <span>
                          <p className="light-white-txt">Voucher</p>
                          <p style={{marginTop:'-15px'}}>0</p>
                        </span> */}
                      </div>
                      </div>
                   </div>
                  </div>

                  
                </div>


                <Row>
                <Col xs="12" md={{ size: 6, offset: 5 }}>
                <div className="dashboard_date-container ">
                   <div>
                      <DatePicker
                        className="form-control datepicker"
                        selected={this.state.startDate}
                        onChange={this.handleStartDateChange}
                        dateFormat="MMM d, yyy"
                        placeholderText="Select start date"
                      
                      />
                    </div>
                    
                    <div>
                      <DatePicker
                        className="form-control datepicker"
                        selected={this.state.endDate}
                        onChange={this.handleEndDateChange} 
                        minDate={addDays(this.state.startDate, 1)}
                        dateFormat="MMM d, yyy"
                        placeholderText="Select end date"
                       />
                    </div>
                    <div>
                    <button
                              className="btn btn active datepickerButton"
                              onClick={this.submitdateHandler}
                              >
                            <img
                  src={Filter}
                  style={{ width: '17px', height: '17px', marginRight: '3px' }}
                  alt="filter"
                />
                              Search
                    </button>
                  </div>
                </div>
              </Col>
                </Row>

                <div className="row">
                  <div className="col-md-12 mt-md-3 px-md-3">
                    <div className="card card-product Voucher trail-table ">
                      <div className="card-body pb-3 ">
                        <div className="trail-table-filter pt-md-2">
                          <div className="float-right">
                            
                            <div className="float-left">
                              <CSVLink data={transData ? transData : []} filename={'Settlement.csv'} className="" target="_blank">
                                <p className="secondary-btn px-3 mx-md-3 full-rounded ">export csv</p>
                              </CSVLink>
                            </div>
                          </div>
                        </div>

                        <div className=" settle-table">
                          <ReactTable
                            manual
                            pages={Math.ceil(oTransaction.count / this.state.pageSize)}
                            minRows={transData ?(transData.length ? 0:2 ):2 } 
                            data={transData} 
                            columns={columns} 
                            onPageChange={this.handlePageChange} 
                            onPageSizeChange={this.handlePageSizeChange}
                            noDataText={'No Transaction for the selected date range'}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    
    users: state.customerUser.users
    ? state.customerUser.users == null
      ? []
      : state.customerUser.users
    : [],
    oTransaction: state.oTrailReducer.oTransactions,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchAllTransactionsFn: (startDate, endDate, page, pageSize,status) => {
      dispatch(fetchAllTransactions(startDate, endDate, page, pageSize,status));
    },
  };
};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(OReportTransaction),
);