PaymentGatewayFailureUI

import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import withMobileDialog from '@material-ui/core/withMobileDialog';
import { withStyles } from '@material-ui/core/styles';
import axios from "axios";
import {appURLs, webAPI} from "../../enums/urls";
import Loader from "../../components/independentComponents/Loader";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import "../../styles/policy/PaymentGateway.less";
import "../../styles/baseStyles/Reset.less";

let id = 0;
let rows = []

class PaymentGatewayFailureUI extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isDialogOpen: this.props.redirectionFallbackUIOpenStatus,
            loaders: {
                getFunctionTypeForRedirection: false,
                savePaymentGatewayResponse: false,
            },
        };

        this.handleClose = this.handleClose.bind(this);
    }

    componentDidMount() {
        console.log('this.props.paymentGatewayResponse in component did mount', this.props.paymentGatewayResponse);

        if (this.props.paymentGatewayResponse) {
            rows = [
                this.createData("Transaction Status", this.props.paymentGatewayResponse.status),
                this.createData("Transaction Info", this.props.paymentGatewayResponse.info),
                this.createData("Customer Email", this.props.paymentGatewayResponse.email),
                this.createData("Payment Reference No", this.props.paymentGatewayResponse.reference_no),
                this.createData("Payment Transaction Id", this.props.paymentGatewayResponse.transaction_id),
                this.createData("Payment Amount", this.props.paymentGatewayResponse.amount),
                this.createData("Recommended Action", this.props.paymentGatewayResponse.status === "CANCELED" ? "Please Contact Administrator" : "Close the Dialog Box and continue")
            ]

            //Saving the data to the table
            this.handleLoaders('savePaymentGatewayResponse', true);
            axios.post(appURLs.web + webAPI.savePaymentGatewayResponse, {
                uniqueId: this.props.paymentGatewayResponse.unique_value,
                transactionId: this.props.paymentGatewayResponse.transaction_id,
                amount: this.props.paymentGatewayResponse.amount,
                currencyCode: this.props.paymentGatewayResponse.currency_code,
                email: this.props.paymentGatewayResponse.email,
                info: this.props.paymentGatewayResponse.info,
                description: this.props.paymentGatewayResponse.description,
                customerName: this.props.paymentGatewayResponse.customer_name,
                referenceNo: this.props.paymentGatewayResponse.reference_no,
                merchantName: this.props.paymentGatewayResponse.merchant_name,
                approvalCode: this.props.paymentGatewayResponse.approval_code
            }, this.props.config)
                .then((response) => {
                    this.handleLoaders('savePaymentGatewayResponse', false);
                    console.log('response.data in savePaymentGatewayResponse', response.data);
                }).catch((error) => {
                this.handleLoaders('savePaymentGatewayResponse', false);
                console.log('error in savePaymentGatewayResponse ', error);
            })
        }
    }

    handleClose() {
        this.setState({
            isDialogOpen: false
        })

        if (this.props.paymentGatewayResponse && this.props.paymentGatewayResponse.status === "CANCELED") {

            //Saving the Payment Response to the table
            if (this.props.paymentGatewayResponse) {
                this.handleLoaders('getFunctionTypeForRedirection', true);
                axios.post(appURLs.web + webAPI.getFunctionTypeForRedirection, {
                    uniqueId: this.props.paymentGatewayResponse.unique_value
                }, this.props.config)
                    .then((response) => {
                        this.handleLoaders('getFunctionTypeForRedirection', false);
                        console.log('response.data.functionType', response.data.functionType);

                        //Setting the redirection URL
                        if (response.data.data.functionType) {
                            if (response.data.data.functionType === "#creation") {
                                this.props.history.push("/policy#endorsement")
                            } else if (response.data.data.functionType === "#endorsement") {
                                this.props.history.push("/policy#renewal")
                            } else {
                                this.props.history.push("/policy#creation")
                            }
                        } else {
                            this.props.history.push("/policy#creation")
                        }

                    }).catch((error) => {
                    this.handleLoaders('getFunctionTypeForRedirection', false);
                    console.log('error in getFunctionTypeForRedirection ', error);
                })
            }
        }
    }

    handleLoaders(loaderKey, isEnable) {
        // console.log('handleLoaders :', );
        const {loaders} = this.state;
        loaders[loaderKey] = isEnable;

        this.setState({
            loaders,
        });
    }

    createData(name, value) {
        id += 1;
        return {id, name, value};
    }

    render() {
        const {classes} = this.props;
        return (
            <div>
                {this.state.loaders &&
                Object.keys(this.state.loaders).filter(i => this.state.loaders[i] === true).length > 0 ?
                    <div>
                        <Loader/>
                    </div>
                    :
                    <Dialog
                        fullScreen={false}
                        open={this.state.isDialogOpen}
                        onClose={this.handleClose}
                        disableBackdropClick={true}
                    >
                        <DialogTitle
                            className={
                                this.props.paymentGatewayResponse.status === "CANCELED"
                                    ? "payment-gateway-receipt-title-unsuccessful"
                                    : "payment-gateway-receipt-title-successful"
                            }
                        >
                            {this.props.paymentGatewayResponse.status === "CANCELED"
                                ? "Transaction Failed"
                                : "Transaction Successful"
                            }
                        </DialogTitle>
                        <DialogContent>
                            <Paper>
                                <Table className={classes.table}>
                                    <TableBody>
                                        {rows.map((row) => {
                                            return (
                                                <TableRow key={row.id}>
                                                    <TableCell component="th" scope="row">
                                                        {row.name}
                                                    </TableCell>
                                                    <TableCell align="left">{row.value}</TableCell>
                                                </TableRow>
                                            );
                                        })}
                                    </TableBody>
                                </Table>
                            </Paper>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={this.handleClose} color="primary" autoFocus>
                                Close
                            </Button>
                        </DialogActions>
                    </Dialog>
                }
            </div>
        );
    }
}

const styles = theme => ({
    table: {
        fontSize: 20,
    }
});

// PaymentGatewayFailureUI.propTypes = {
//     fullScreen: PropTypes.bool.isRequired,
// };

export default withStyles(styles())(PaymentGatewayFailureUI);

// export default RedirectionFallbackUI;