<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import { Row, Button, Panel, Checkbox, Table, Col, OverlayTrigger, Overlay, Popover, Modal } from 'react-bootstrap';
import { toJS } from 'mobx';
import oneBcClient from '@onenetwork/one-backchain-client';
import EventsPopoverContent from './EventsPopoverContent';
import BackChainActions from '../BackChainActions';
import { observer } from 'mobx-react';
import { Redirect, Link } from 'react-router-dom';
import { Scrollbars } from 'react-custom-scrollbars';
import moment from 'moment';
import Images from '../Images';
import AlertPopupView from './AlertPopupView';
import {disputeHelper} from '../DisputeHelper';

import '../../public/css/TrackAndVerify.css'; // TODO: move to index.html and copy to PLT CoC

const rowLineHeight = '26px';
const fieldProps = {
    table: {
        border: '1px solid lightgrey'
    },
    tableHeader: {
        color: '#0085C8',
        backgroundColor: 'rgba(250, 250, 250, 1)',
        borderTop: 'solid 2px'
    },
    columns: {
        padding: '10px',
        paddingTop :'13px',
        fontSize: '12px',
        lineHeight: rowLineHeight,
        height: rowLineHeight
    },
    statusIconOverHand: {
        fontSize: '14px',
        position: 'absolute',
        marginTop: '9px',
        marginLeft: '-7px'
    },
    icons: {
        verifying: {
            marginRight: '15px',
            fontSize: '15px',
            color: '#0486CC',
            lineHeight: rowLineHeight
        },
        failed: {
            marginRight: '15px',
            fontSize: '15px',
            color: '#d9443f',
            lineHeight: rowLineHeight
        },
        verified: {
            marginRight: '15px',
            fontSize: '15px',
            color: '#229978',
            lineHeight: rowLineHeight
        },
        downArrow: {
            position: 'absolute',
            marginLeft: '3px'
        }
    },
    emptyRow : {
        backgroundColor: 'rgba(248, 241, 201, 1)',
        height: '54px'
    }
};

const reasonCodeMap = {
    "HASH_NOT_FOUND" : "Hash Not Found",
    "INPUT_DISPUTED" : "Incorrect Data Input",
    "TRANSACTION_DATE_DISPUTED" : "Incorrect Transaction Date",
    "TRANSACTION_PARTIES_DISPUTED" : "Incorrect Transaction Participants",
    "DISPUTE_BUSINESS_TRANSACTIONS" : "Incorrect Transaction Events",
    "FINANCIAL_DISPUTED" : "Financial Issue"
};

@observer export default class DisputesView extends React.Component {

    constructor(...args) {
        super(...args);

        this.eventsPopoverRefsMap = {};
        this.actionsPopoverRefsMap = {};
        this.disputeParticipantsPopoverRefsMap = {};
        this.state = {
            redirect: false,
            eventsPopoverVisibilityMap: {},
            actionsPopoverVisibilityMap: {},
            disputeParticipantsPopoverVisibilityMap: {}
        };
    }

    componentDidMount() {
        BackChainActions.processApplicationSettings();
    }

    loadTransactionIntoStoreAndRedirect(disputedTransactionId) {
        let me = this;
        BackChainActions.loadTransactions(disputedTransactionId, "tnxId", function (redirect) {
            if (redirect) {
                me.setState({ redirect: redirect });
            }
        });
    }

    closeDispute(dispute) {
        BackChainActions.closeDispute(dispute);
    }

    discardDraftDispute(dispute) {
        BackChainActions.discardDisputeDraft(dispute.disputeId, true);
    }

    submitDispute(dispute) {
        BackChainActions.submitDisputeAllowed(dispute, this.props.store.disputeSubmissionWindowInMinutes)
        .then(function(result){
            if(result.submitDisputeAllowed) {
				BackChainActions.submitDispute(dispute);
            } else {
				BackChainActions.displayAlertPopup("Dispute Submission Failed", 
                    "Allowed dispute submission time for this transaction is elapsed. After creation of transaction, Maximum allowed time to submit dispute is " + this.props.store.disputeSubmissionWindowInMinutes + " Mins.", "ERROR");
            }
        })
        .catch(function (err) {
            console.error(err);
        });
    }

    render() {
        const disputes = toJS(this.props.store.disputes);

        let tableHead = (
            <thead style={fieldProps.tableHeader}>
                <tr>
                    <th style={fieldProps.columns}>Dispute Status</th>
                    <th style={fieldProps.columns}>Dispute ID</th>
                    <th style={fieldProps.columns}>Date Submitted</th>
                    <th style={fieldProps.columns}>Date Closed</th>
                    <th style={fieldProps.columns}>Transaction ID</th>
                    <th style={fieldProps.columns}>Transaction Date</th>
                    <th style={Object.assign({}, fieldProps.columns, { width: '6%' })}>Events</th>
                    <th style={fieldProps.columns}>Raised By</th>
                    <th style={fieldProps.columns}>Reason Code</th>
                    <th style={Object.assign({}, fieldProps.columns, { width: '6%' })}>Participants</th>
                    {this.props.store.showDisputeActions === false ? null : <th style={fieldProps.columns}>Actions</th>}
                </tr>
            </thead>
        );

        let tableBody = (
            <tbody>
                {this.renderDisputeRows(disputes)}
            </tbody>
        );

        if (this.state.redirect) {
            return <Redirect push to="/listTransactions" />;
        } else {
            return (
                <div>
                    <Table responsive condensed hover style={fieldProps.table}>
                        <AlertPopupView store={this.props.store} />    
                        {tableHead}
                        {tableBody}
                    </Table>
                </div>
            );
        }
       
    }

    renderDisputeRows(disputes) {
        let disputesRowsToDisplay = [];
        if (disputes.length == 0) {
            disputesRowsToDisplay.push(this.renderEmptyRow());
        } else {
            for (let i = 0; i < disputes.length; i++) {
                let dispute = disputes[i];
                if (!dispute) {
                    continue;
                }
                disputesRowsToDisplay.push(this.renderDisputeRow(dispute, i));
            }
        }
        return disputesRowsToDisplay;
    }

    renderEmptyRow() {
        return (
            <tr style={fieldProps.emptyRow}>
                <td colSpan ='11' style={{ textAlign: 'center', paddingTop: '16px' }}>
                    <i className="fa fa-exclamation-circle" style={{color: '#F19500',fontSize: '20px',verticalAlign: 'top'}}/>
                    &nbsp;There are no disputes matching the selected search criteria.
                </td>
            </tr>    
        );
    }

    renderDisputeRow(dispute, idx) {
        return (
            <tr style={{ backgroundColor: idx % 2 ? 'rgba(250, 250, 250, 1)' : '' }} key={dispute.disputeId+idx}>
                {this.renderDisputeStatusCell(dispute)}
                {this.renderDisputeIdCell(dispute, idx)}
                {this.renderDateCell(dispute.submittedDate)}
                {this.renderDateCell(dispute.closedDate)}
                {this.renderTransactionIdCell(dispute, idx)}
                {this.renderDateCell(dispute.transaction ? dispute.transaction.date : null)}
                {this.renderDisputeEventsCell(dispute, idx)}
                {this.renderDisputeRaisedByCell(dispute, idx)}
                {this.renderDisputeReasonCell(dispute)}
                {this.renderDisputeParticipantsCell(dispute, idx)}
                {this.props.store.showDisputeActions === false ? null : this.renderDisputeActionsCell(dispute, idx)}
            </tr>
        );
    }
    
    getMinsInHrsAndMins(mins) {
        let hours = Math.floor( mins / 60); 
        let minutes = mins % 60;
        let hrsAndMins = hours == 0 ? "" : hours + "hrs ";<commit_msg>Review changes<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
import { Row, Button, Panel, Checkbox, Table, Col, OverlayTrigger, Overlay, Popover, Modal } from 'react-bootstrap';
import { toJS } from 'mobx';
import oneBcClient from '@onenetwork/one-backchain-client';
import EventsPopoverContent from './EventsPopoverContent';
import BackChainActions from '../BackChainActions';
import { observer } from 'mobx-react';
import { Redirect, Link } from 'react-router-dom';
import { Scrollbars } from 'react-custom-scrollbars';
import moment from 'moment';
import Images from '../Images';
import AlertPopupView from './AlertPopupView';
import {disputeHelper} from '../DisputeHelper';

import '../../public/css/TrackAndVerify.css'; // TODO: move to index.html and copy to PLT CoC

const rowLineHeight = '26px';
const fieldProps = {
    table: {
        border: '1px solid lightgrey'
    },
    tableHeader: {
        color: '#0085C8',
        backgroundColor: 'rgba(250, 250, 250, 1)',
        borderTop: 'solid 2px'
    },
    columns: {
        padding: '10px',
        paddingTop :'13px',
        fontSize: '12px',
        lineHeight: rowLineHeight,
        height: rowLineHeight
    },
    statusIconOverHand: {
        fontSize: '14px',
        position: 'absolute',
        marginTop: '9px',
        marginLeft: '-7px'
    },
    icons: {
        verifying: {
            marginRight: '15px',
            fontSize: '15px',
            color: '#0486CC',
            lineHeight: rowLineHeight
        },
        failed: {
            marginRight: '15px',
            fontSize: '15px',
            color: '#d9443f',
            lineHeight: rowLineHeight
        },
        verified: {
            marginRight: '15px',
            fontSize: '15px',
            color: '#229978',
            lineHeight: rowLineHeight
        },
        downArrow: {
            position: 'absolute',
            marginLeft: '3px'
        }
    },
    noDisputesFoundRow : {
        backgroundColor: 'rgba(248, 241, 201, 1)',
        height: '54px'
    }
};

const reasonCodeMap = {
    "HASH_NOT_FOUND" : "Hash Not Found",
    "INPUT_DISPUTED" : "Incorrect Data Input",
    "TRANSACTION_DATE_DISPUTED" : "Incorrect Transaction Date",
    "TRANSACTION_PARTIES_DISPUTED" : "Incorrect Transaction Participants",
    "DISPUTE_BUSINESS_TRANSACTIONS" : "Incorrect Transaction Events",
    "FINANCIAL_DISPUTED" : "Financial Issue"
};

@observer export default class DisputesView extends React.Component {

    constructor(...args) {
        super(...args);

        this.eventsPopoverRefsMap = {};
        this.actionsPopoverRefsMap = {};
        this.disputeParticipantsPopoverRefsMap = {};
        this.state = {
            redirect: false,
            eventsPopoverVisibilityMap: {},
            actionsPopoverVisibilityMap: {},
            disputeParticipantsPopoverVisibilityMap: {}
        };
    }

    componentDidMount() {
        BackChainActions.processApplicationSettings();
    }

    loadTransactionIntoStoreAndRedirect(disputedTransactionId) {
        let me = this;
        BackChainActions.loadTransactions(disputedTransactionId, "tnxId", function (redirect) {
            if (redirect) {
                me.setState({ redirect: redirect });
            }
        });
    }

    closeDispute(dispute) {
        BackChainActions.closeDispute(dispute);
    }

    discardDraftDispute(dispute) {
        BackChainActions.discardDisputeDraft(dispute.disputeId, true);
    }

    submitDispute(dispute) {
        BackChainActions.submitDisputeAllowed(dispute, this.props.store.disputeSubmissionWindowInMinutes)
        .then(function(result){
            if(result.submitDisputeAllowed) {
				BackChainActions.submitDispute(dispute);
            } else {
				BackChainActions.displayAlertPopup("Dispute Submission Failed", 
                    "Allowed dispute submission time for this transaction is elapsed. After creation of transaction, Maximum allowed time to submit dispute is " + this.props.store.disputeSubmissionWindowInMinutes + " Mins.", "ERROR");
            }
        })
        .catch(function (err) {
            console.error(err);
        });
    }

    render() {
        const disputes = toJS(this.props.store.disputes);

        let tableHead = (
            <thead style={fieldProps.tableHeader}>
                <tr>
                    <th style={fieldProps.columns}>Dispute Status</th>
                    <th style={fieldProps.columns}>Dispute ID</th>
                    <th style={fieldProps.columns}>Date Submitted</th>
                    <th style={fieldProps.columns}>Date Closed</th>
                    <th style={fieldProps.columns}>Transaction ID</th>
                    <th style={fieldProps.columns}>Transaction Date</th>
                    <th style={Object.assign({}, fieldProps.columns, { width: '6%' })}>Events</th>
                    <th style={fieldProps.columns}>Raised By</th>
                    <th style={fieldProps.columns}>Reason Code</th>
                    <th style={Object.assign({}, fieldProps.columns, { width: '6%' })}>Participants</th>
                    {this.props.store.showDisputeActions === false ? null : <th style={fieldProps.columns}>Actions</th>}
                </tr>
            </thead>
        );

        let tableBody = (
            <tbody>
                {this.renderDisputeRows(disputes)}
            </tbody>
        );

        if (this.state.redirect) {
            return <Redirect push to="/listTransactions" />;
        } else {
            return (
                <div>
                    <Table responsive condensed hover style={fieldProps.table}>
                        <AlertPopupView store={this.props.store} />    
                        {tableHead}
                        {tableBody}
                    </Table>
                </div>
            );
        }
       
    }

    renderDisputeRows(disputes) {
        let disputesRowsToDisplay = [];
        if (disputes.length == 0) {
            disputesRowsToDisplay.push(this.renderNoDisputesFoundRow());
        } else {
            for (let i = 0; i < disputes.length; i++) {
                let dispute = disputes[i];
                if (!dispute) {
                    continue;
                }
                disputesRowsToDisplay.push(this.renderDisputeRow(dispute, i));
            }
        }
        return disputesRowsToDisplay;
    }

    renderNoDisputesFoundRow() {
        return (
            <tr style={fieldProps.noDisputesFoundRow}>
                <td colSpan ='11' style={{ textAlign: 'center', paddingTop: '16px' }}>
                    <i className="fa fa-exclamation-circle" style={{color: '#F19500',fontSize: '20px',verticalAlign: 'top'}}/>
                    &nbsp;There are no disputes matching the selected search criteria.
                </td>
            </tr>    
        );
    }

    renderDisputeRow(dispute, idx) {
        return (
            <tr style={{ backgroundColor: idx % 2 ? 'rgba(250, 250, 250, 1)' : '' }} key={dispute.disputeId+idx}>
                {this.renderDisputeStatusCell(dispute)}
                {this.renderDisputeIdCell(dispute, idx)}
                {this.renderDateCell(dispute.submittedDate)}
                {this.renderDateCell(dispute.closedDate)}
                {this.renderTransactionIdCell(dispute, idx)}
                {this.renderDateCell(dispute.transaction ? dispute.transaction.date : null)}
                {this.renderDisputeEventsCell(dispute, idx)}
                {this.renderDisputeRaisedByCell(dispute, idx)}
                {this.renderDisputeReasonCell(dispute)}
                {this.renderDisputeParticipantsCell(dispute, idx)}
                {this.props.store.showDisputeActions === false ? null : this.renderDisputeActionsCell(dispute, idx)}
            </tr>
        );
    }
    
    getMinsInHrsAndMins(mins) {
        let hours = Math.floor( mins / 60); 
        let minutes = mins % 60;
        let hrsAndMins = hours == 0 ? "" : hours + "hrs ";
{'fraction_non_alphanumeric': 0.11854540902547411, 'fraction_numerical': 0.012392814671089691, 'mean_word_length': 1.9943778110944528, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 85, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4724719', 'n_tokens_mistral': 4676, 'n_tokens_neox': 4379, 'n_words': 885}