/**
 * ApproveRestrictedPayeeCTR.js
 */

import React, { Component } from "react";
import Helmet from "react-helmet";
import { BaseContainers, BaseComponents } from "frontend-react-f4-base-ui";
import { BaseContext } from "frontend-react-f4-base-commons";
import { observer } from "mobx-react";
import TextArea from "../../components/TextArea/TextArea";
import moment from "moment";
import { Modal } from "antd";
import MaintenanceApprovalConfirmPanel from "../../components/MaintenanceApprovalConfirmPanel/MaintenanceApprovalConfirmPanel";
import MaintenanceApprovalPanel from "../../components/MaintenanceApprovalPanel/MaintenanceApprovalPanel";
import CitrineFunctionCodes from "../../enums/CitrineFunctionCodes";
import MaintenanceApprovalAckPanel from "../../components/MaintenanceApprovalAckPanel/MaintenanceApprovalAckPanel";
import ViewPage from "../../components/ViewPage/ViewPage";
import AckMessage from "../../components/AckMessage/AckMessage";
import _ from "underscore";
import ApproveRejectViewPageActionPanel from "../../components/ApproveRejectViewPageActionPanel/ApproveRejectViewPageActionPanel";

import BoNewViewPage from "../../components/BoNewViewPage/BoNewViewPage";
import NewViewRestrictedPayeePanel from "../../components/NewViewRestrictedPayeePanel/NewViewRestrictedPayeePanel";

const { connect } = BaseContext;
const { F4ContentContainer } = BaseContainers;
const { strings, F4Stepper, Feedback } = BaseComponents;

import ClientConfig from "../../config/ClientConfig";

@observer
@connect
class ApproveRestrictedPayeeCTR extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pages: {
        initial: 0,
        confirm: 1,
        ack: 2,
        view: 3,
        viewForConfirmAck: 4,
        ackForSingle: 5
      },
      showErrorModal: false,
      errorModalMsg: "",
      readOnly: false,
      prevPage: 0,
      isForView: false,
      clickedApprove: false,
      clickedReject: false
    };
  }

  componentDidMount() {
    const { RestrictedPayeeStore } = this.context.store;
    const { onLoadResults } = this.props;
    RestrictedPayeeStore.resetApprovalFields();
    if (onLoadResults && onLoadResults === true) {
      this.onSearch();
    }
  }

  redirectTo = pageNo => {
    const { RestrictedPayeeStore } = this.context.store;
    RestrictedPayeeStore.selectedMenuOnApprove = pageNo;
  };

  confirmOnClickBack = () => {
    const { MaintenanceStore, RestrictedPayeeStore } = this.context.store;
    MaintenanceStore.approveList = null;
    RestrictedPayeeStore.resetApprovalFields();
    this.redirectTo(
      this.state.isForView ? this.state.pages.view : this.state.pages.initial
    );
    this.setState({ isForView: false });
  };

  confirmOnClickSubmit = (isApprove, succCB) => {
    const { auth, RestrictedPayeeStore, SettingsStore } = this.context.store;

    SettingsStore.isScreenLoading = true;
    this.setState({ prevPage: this.state.pages.confirm });
    RestrictedPayeeStore.approveListReqModel.localUserCd =
      auth.sessionUser.user.cd;
    RestrictedPayeeStore.approveListReqModel.isApprove = isApprove;
    RestrictedPayeeStore.approveListReqModel.remarks =
      RestrictedPayeeStore.approvalConfirmProps.remarks;
    RestrictedPayeeStore.approveListReqModel.maintenanceList =
      RestrictedPayeeStore.approvalConfirmProps.dataList;

    if (isApprove) {
      RestrictedPayeeStore.validateApproval(
        RestrictedPayeeStore.approveListReqModel.maintenanceList,
        res => {
          console.log("Res on validate Approval", res);
          if (res.body && res.body.error) {
            if (res.body.error.errors) {
              _.each(res.body.error.errors, errStr => {
                RestrictedPayeeStore.errors.push(errStr.message);
              });
            } else if (res.body.error.message) {
              RestrictedPayeeStore.errors.push(res.body.error.message);
            }
            SettingsStore.isScreenLoading = false;
            this.setState({ clickedApprove: false });
            succCB && succCB();
          } else {
            this.approveList(isApprove, succCB);
            // SettingsStore.isScreenLoading = false;
          }
        }
      );
    } else {
      this.approveList(isApprove, succCB);
      // SettingsStore.isScreenLoading = false;
    }
  };

  approveList = (isApprove, succCB) => {
    const { RestrictedPayeeStore, SettingsStore } = this.context.store;

    let message = isApprove
      ? strings.formatString(
          strings.feedback_success_approval,
          strings.global_restrictedpayeenm,
          "approved"
        )
      : strings.formatString(
          strings.feedback_success_approval,
          strings.global_restrictedpayeenm,
          "rejected"
        );
    let messageSingle = isApprove
      ? "Restricted Payee Name was approved."
      : "Restricted Payee Name was rejected.";
    RestrictedPayeeStore.approveList(
      RestrictedPayeeStore.approveListReqModel,
      res => {
        console.log("Approve List: ", res);
        if (!res.body && res.text) {
          RestrictedPayeeStore.approvalAckProps = {
            dataList: RestrictedPayeeStore.approvalConfirmProps.dataList,
            action: isApprove
              ? strings.global_approve.toLowerCase()
              : strings.global_reject.toLowerCase(),
            remarks: RestrictedPayeeStore.approvalConfirmProps.remarks,
            refNo: res.text,
            message: this.state.isForView ? messageSingle : message
          };
          if (this.state.isForView) {
            let maintenanceList =
              RestrictedPayeeStore.approvalAckProps.dataList;
            RestrictedPayeeStore.restrictedPayeeDtlString =
              maintenanceList &&
              maintenanceList.length > 0 &&
              JSON.parse(maintenanceList[0].dtlString);
            this.redirectTo(this.state.pages.ackForSingle);
            this.setState({
              prevPage: this.state.pages.ackForSingle
            });
          } else {
            this.redirectTo(this.state.pages.ack);
            this.setState({ prevPage: this.state.pages.ack });
          }
          SettingsStore.isScreenLoading = false;
          succCB && succCB();
        } else {
          if (res.body.error.errors) {
            _.each(res.body.error.errors, errStr => {
              RestrictedPayeeStore.errors.push(errStr.message);
            });
          } else if (res.body.error.message) {
            RestrictedPayeeStore.errors.push(res.body.error.message);
          }
          SettingsStore.isScreenLoading = false;
          succCB && succCB();
        }
      }
    );
  };

  onClickRefNo = data => {
    const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
    RestrictedPayeeStore.resetErrorList();
    RestrictedPayeeStore.viewPageMaintenanceData = data;

    MaintenanceStore.remarks = null;
    RestrictedPayeeStore.resetApprovalFields();
    this.redirectTo(this.state.pages.view);
    this.setState({
      readOnly: false,
      prevPage: this.state.pages.confirm,
      isForView: true
    });
  };

  onClickRefNoForConfirmAck = data => {
    const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
    RestrictedPayeeStore.viewPageMaintenanceData = data;
    this.redirectTo(this.state.pages.viewForConfirmAck);
    this.setState({ readOnly: true });
  };

  onClickApprove = (maintenanceList, remarks, succCB) => {
    const {
      RestrictedPayeeStore,
      MaintenanceStore,
      auth,
      SettingsStore
    } = this.context.store;
    MaintenanceStore.errors = [];
    SettingsStore.isScreenLoading = true;
    this.setState({ clickedApprove: true });
    RestrictedPayeeStore.validateApproval(maintenanceList, res => {
      console.log("Res on Validate Payee Approval: ", res);
      if (res.body && res.body.error) {
        if (res.body.error.errors) {
          _.each(res.body.error.errors, errStr => {
            MaintenanceStore.errors.push(errStr.message);
            RestrictedPayeeStore.errors.push(errStr.message);
          });
        } else if (res.body.error.message) {
          MaintenanceStore.errors.push(res.body.error.message);
          RestrictedPayeeStore.errors.push(res.body.error.message);
        }
        MaintenanceStore.remarks = null;
        SettingsStore.isScreenLoading = false;
        this.setState({ clickedApprove: false });
        succCB && succCB();
      } else {
        console.log("No Errors.");
        MaintenanceStore.validateApprovalReqModel.isApprove = true;
        MaintenanceStore.validateApprovalReqModel.maintenanceList = maintenanceList;
        MaintenanceStore.validateApprovalReqModel.modelNm =
          strings.global_payee;
        MaintenanceStore.validateApprovalReqModel.remarks = remarks;
        MaintenanceStore.validateApprovalReqModel.requiresApprovalFuncCd =
          CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL;
        //CitrineFunctionCodes.COURIER_MAINTENANCE_REQUIRES_APPROVAL;
        MaintenanceStore.validateApprovalReqModel.userCd =
          auth.sessionUser.user.cd;

        MaintenanceStore.validateApproval(
          MaintenanceStore.validateApprovalReqModel,
          res => {
            if (res.body && res.body.error) {
              _.each(res.body.error.errors, errStr => {
                MaintenanceStore.errors.push(errStr.message);
              });
              this.setState({ clickedApprove: false });
              SettingsStore.isScreenLoading = false;
              succCB && succCB();
            } else {
              console.log("No Errors.");

              RestrictedPayeeStore.approvalConfirmProps = {
                action: strings.global_approve.toLowerCase(),
                remarks: remarks,
                dataList: maintenanceList
              };
              RestrictedPayeeStore.resetErrorList();
              if (this.state.isForView) {
                this.confirmOnClickSubmit(true, null);
              } else {
                this.redirectTo(this.state.pages.confirm);
                this.setState({
                  prevPage: this.state.pages.confirm
                });
                SettingsStore.isScreenLoading = false;
              }
              MaintenanceStore.remarks = null;
              this.setState({ clickedApprove: false });
              succCB && succCB();
            }
          }
        );
      }
    });
  };

  onClickReject = (maintenanceList, remarks, succCB) => {
    const {
      RestrictedPayeeStore,
      MaintenanceStore,
      auth,
      SettingsStore
    } = this.context.store;

    SettingsStore.isScreenLoading = true;
    MaintenanceStore.errors = [];
    this.setState({ clickedReject: true });

    MaintenanceStore.validateApprovalReqModel.isApprove = false;
    MaintenanceStore.validateApprovalReqModel.maintenanceList = maintenanceList;
    MaintenanceStore.validateApprovalReqModel.modelNm = strings.global_payee;
    MaintenanceStore.validateApprovalReqModel.remarks = remarks;
    MaintenanceStore.validateApprovalReqModel.requiresApprovalFuncCd =
      CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL;
    // CitrineFunctionCodes.COURIER_MAINTENANCE_REQUIRES_APPROVAL;
    MaintenanceStore.validateApprovalReqModel.userCd = auth.sessionUser.user.cd;

    MaintenanceStore.validateApproval(
      MaintenanceStore.validateApprovalReqModel,
      res => {
        if (res.body && res.body.error) {
          _.each(res.body.error.errors, errStr => {
            MaintenanceStore.errors.push(errStr.message);
          });

          this.setState({
            showErrorModal: true,
            errorModalMsg: MaintenanceStore.errors[0],
            clickedReject: false
          });
          SettingsStore.isScreenLoading = false;
          succCB && succCB();
        } else {
          console.log("No Errors.");
          RestrictedPayeeStore.approvalConfirmProps = {
            action: strings.global_reject.toLowerCase(),
            remarks: remarks,
            dataList: maintenanceList
          };
          RestrictedPayeeStore.resetErrorList();
          if (this.state.isForView) {
            this.confirmOnClickSubmit(false, () => {
              this.setState({
                clickedReject: false
              });
            });
          } else {
            this.redirectTo(this.state.pages.confirm);
            this.setState({
              prevPage: this.state.pages.confirm,
              clickedReject: false
            });
          }
          SettingsStore.isScreenLoading = false;
          succCB && succCB();
        }
        MaintenanceStore.remarks = null;
      }
    );
  };

  onSearch = multiSort => {
    const { RestrictedPayeeStore, MaintenanceStore, auth } = this.context.store;

    if (!multiSort) {
      multiSort = {
        page: 0,
        count: 10,
        sortList: [
          {
            direction: "desc",
            sort: "updatedDt"
          }
        ]
      };
    }

    let fields = RestrictedPayeeStore.approvalFields;
    {
      fields != undefined &&
        fields.map(
          field =>
            (MaintenanceStore.searchRequestModel[field.index] = field.value)
        );
    }

    MaintenanceStore.errors = [];

    MaintenanceStore.searchRequestModel.notCreatedBy = auth.sessionUser.user.cd;
    MaintenanceStore.searchRequestModel.filterTypeOne = {
      isCaseSensitive: false,
      isEq: true
    };
    MaintenanceStore.searchRequestModel.filterTypeTwo = {
      isCaseSensitive: false,
      isEq: false
    };
    MaintenanceStore.searchRequestModel.funcCd =
      CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL;
    //CitrineFunctionCodes.COURIER_MAINTENANCE_REQUIRES_APPROVAL;

    MaintenanceStore.findBySearchModel(
      MaintenanceStore.searchRequestModel,
      multiSort,
      res => {
        if (res.body && !res.body.error) {
          console.log("app res: ", res);
          MaintenanceStore.responseBody = res.body;
          MaintenanceStore.approveList = res.body.content;
          let data = MaintenanceStore.approveList;
          MaintenanceStore.dataTableRef.setState({
            data: data,
            copyOfData: data,
            totalItemsCount: res.body.totalElements
          });
          MaintenanceStore.dataTableRef &&
            MaintenanceStore.dataTableRef.forceUpdate();
        } else {
          console.log("Error", res.body.error);
        }
        // this.setState({ hasClickedSearch: true });
      }
    );
  };

  _createData = () => {
    return [
      {
        headerTitle: strings.global_refno,
        name: "refNo",
        type: "link",
        width: 100,
        cell: props => (
          <span
            className="linkInTable"
            onClick={() => this.onClickRefNo(props.data)}
          >
            {" "}
            {props.data.refNo}{" "}
          </span>
        )
      },
      {
        headerTitle: strings.global_restrictedpayeenm,
        name: "filterOne",
        type: "text",
        width: 100
      },
      {
        headerTitle: strings.global_amount,
        name: "filterTwo",
        type: "text",
        width: 100
      },
      {
        headerTitle: strings.global_func,
        // name: "actnFuncCd",
        name: "actnFunc.description",
        type: "text",
        width: 150,
        sortBy: "actnFunc.description",
        cell: props => (
          <span className="abstractInTable">
            {props.data.actnFunc.description}
          </span>
        )
      },
      {
        headerTitle: strings.global_creatdby,
        name: "createdBy",
        type: "text",
        width: 150
      },
      {
        headerTitle: strings.global_createdt,
        name: "createdDt",
        type: "text",
        width: 150,
        formatter: "date"
      }
    ];
  };

  _createDataForConfirmAck = () => {
    return [
      {
        headerTitle: strings.global_refno,
        name: "refNo",
        type: "link",
        width: 100,
        cell: props => (
          <span
            className="linkInTable"
            onClick={() => this.onClickRefNoForConfirmAck(props.data)}
          >
            {" "}
            {props.data.refNo}{" "}
          </span>
        )
      },
      {
        headerTitle: strings.global_restrictedpayeenm,
        name: "filterOne",
        type: "text",
        width: 100
      },
      {
        headerTitle: strings.global_amount,
        name: "filterTwo",
        type: "text",
        width: 100
      },
      {
        headerTitle: strings.global_func,
        // name: "actnFuncCd",
        name: "actnFunc.description",
        type: "text",
        width: 150,
        sortBy: "actnFunc.description",
        cell: props => (
          <span className="abstractInTable">
            {props.data.actnFunc.description}
          </span>
        )
      },
      {
        headerTitle: strings.global_creatdby,
        name: "createdBy",
        type: "text",
        width: 150
      },
      {
        headerTitle: strings.global_createdt,
        name: "createdDt",
        type: "text",
        width: 120,
        formatter: "date"
      }
    ];
  };

  onClickDownload = multiSort => {
    const { MaintenanceStore, auth } = this.context.store;
    return new Promise(resolve => {
      MaintenanceStore.findBySearchModel(
        MaintenanceStore.searchRequestModel,
        multiSort,
        res => {
          if (res.body && !res.body.error) {
            resolve(res.body.content);
          }
        }
      );
    });
  };

  _showMaintenanceApprovalPanel() {
    const { RestrictedPayeeStore } = this.context.store;
    return (
      <MaintenanceApprovalPanel
        reportProps={{
          onClickDownload: this.onClickDownload,
          reportHeader2: "Approve/Reject Checkbook Type Report",
          fileName: "Approve_Reject_Payee"
        }}
        title={strings.formatString(
          strings.portlet_title_maintenance,
          strings.global_restrictedpayeenm
        )}
        initialFields={RestrictedPayeeStore.approvalFields}
        funcCd={CitrineFunctionCodes.RESTRICTED_PAYEE_NM_APPROVE_REJECT}
        //funcCd={CitrineFunctionCodes.COURIER_MAINTENANCE_APPROVE_REJECT}
        columnHeaders={this._createData()}
        onSearchApprove={this.onSearch}
        onApprove={this.onClickApprove}
        onReject={this.onClickReject}
      />
    );
  }

  _showMaintenanceApprovalConfirmPanel() {
    const { MaintenanceStore, RestrictedPayeeStore } = this.context.store;
    let isApprove =
      RestrictedPayeeStore.approvalConfirmProps.action === "approve";
    return (
      <MaintenanceApprovalAckPanel
        isMultiple={true}
        isAck={false}
        isConfirm={true}
        columnHeaders={this._createDataForConfirmAck()}
        action={RestrictedPayeeStore.approvalConfirmProps.action}
        remarks={RestrictedPayeeStore.approvalConfirmProps.remarks}
        dataList={RestrictedPayeeStore.approvalConfirmProps.dataList}
        onClickBack={() => {
          MaintenanceStore.remarks = null;
          RestrictedPayeeStore.resetErrorList();
          this.confirmOnClickBack();
        }}
        onClickSubmit={() => this.confirmOnClickSubmit(isApprove, null)}
        errorFeedback={RestrictedPayeeStore.errors}
        stepWizardHeader={"Confirm Details"}
        modelName={strings.global_payee}
      />
    );
  }

  _showMaintenanceApprovalAckPanel() {
    const { MaintenanceStore, RestrictedPayeeStore } = this.context.store;
    return (
      <MaintenanceApprovalAckPanel
        isMultiple={true}
        isAck={true}
        isConfirm={false}
        header={RestrictedPayeeStore.approvalAckProps.message}
        refNo={RestrictedPayeeStore.approvalAckProps.refNo}
        columnHeaders={this._createDataForConfirmAck()}
        action={RestrictedPayeeStore.approvalAckProps.action}
        remarks={RestrictedPayeeStore.approvalAckProps.remarks}
        dataList={RestrictedPayeeStore.approvalAckProps.dataList}
        hasButtons
        modelName={strings.global_payee}
        backButtonLabel={strings.formatString(
          strings.button_middle_backxtopage,
          strings.formatString(
            strings.global_approveobj,
            strings.global_restrictedpayeenms
          )
        )}
        onClickBack={() => {
          MaintenanceStore.remarks = null;
          RestrictedPayeeStore.resetApprovalFields();
          MaintenanceStore.approveList = null;
          this.redirectTo(this.state.pages.initial);
        }}
        stepWizardHeader={strings.global_acknowledgement}
      />
    );
  }

  _showViewPage(actionButtons) {
    const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
    let dtlStringData = RestrictedPayeeStore.viewPageMaintenanceData
      ? JSON.parse(RestrictedPayeeStore.viewPageMaintenanceData.dtlString)
      : null;
    let funcDscp =
      RestrictedPayeeStore.viewPageMaintenanceData &&
      RestrictedPayeeStore.viewPageMaintenanceData.actnFunc.description;
    return (
      <BoNewViewPage
        errorList={RestrictedPayeeStore.errors}
        isApproveReject
        funcDscp={funcDscp}
        hasBackButton
        backButtonLabel={strings.formatString(
          strings.global_approveobj,
          strings.global_restrictedpayeenm
        )}
        store={MaintenanceStore}
        modelNm={strings.global_payee}
        viewPanel={
          <NewViewRestrictedPayeePanel
            isView={true}
            data={dtlStringData ? dtlStringData : null}
          />
        }
        onClickBack={() => {
          MaintenanceStore.resetRemarks();
          MaintenanceStore.errors = [];
          RestrictedPayeeStore.resetErrorList();
          MaintenanceStore.approveList = null;
          this.setState({ isForView: false });
          this.redirectTo(this.state.pages.initial);
        }}
        onClickApprove={() => {
          this.setState({ isForView: true });
          let data = [];
          data.push(RestrictedPayeeStore.viewPageMaintenanceData);
          this.onClickApprove(data, MaintenanceStore.remarks);
          MaintenanceStore.errors = [];
        }}
        onClickReject={() => {
          this.setState({ isForView: true });
          let data = [];
          data.push(RestrictedPayeeStore.viewPageMaintenanceData);
          this.checkIfHasRemarks(data);
          MaintenanceStore.errors = [];
        }}
      />
    );
  }

  _showViewPageForConfirmAck() {
    const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
    let dtlStringData = this.showViewPageConfirmAckData();
    return (
      <BoNewViewPage
        fullView={true}
        errorList={RestrictedPayeeStore.errors}
        // isApproveReject
        hasBackButton
        backButtonLabel={
          this.state.prevPage == this.state.pages.ack
            ? strings.global_acknowledgement
            : strings.global_confirm
        }
        store={MaintenanceStore}
        modelNm={strings.global_payee}
        viewPanel={
          <NewViewRestrictedPayeePanel
            isView={true}
            data={dtlStringData ? dtlStringData : null}
          />
        }
        onClickBack={() => {
          this.state.prevPage == this.state.pages.ack
            ? this.redirectTo(this.state.pages.ack)
            : this.redirectTo(this.state.pages.confirm);
        }}
      />
    );
  }

  _showAckForSingle() {
    const { MaintenanceStore, RestrictedPayeeStore } = this.context.store;
    let data = RestrictedPayeeStore.restrictedPayeeDtlString;
    let funcDscp =
      RestrictedPayeeStore.viewPageMaintenanceData &&
      RestrictedPayeeStore.viewPageMaintenanceData.actnFunc.description;
    return (
      <MaintenanceApprovalAckPanel
        isAck={true}
        isConfirm={false}
        funcDscp={funcDscp}
        columnHeaders={this._createDataForConfirmAck()}
        action={RestrictedPayeeStore.approvalAckProps.action}
        remarks={RestrictedPayeeStore.approvalAckProps.remarks}
        dataList={RestrictedPayeeStore.approvalAckProps.dataList}
        hasButtons
        modelName={strings.global_payee}
        backButtonLabel={strings.formatString(
          strings.button_middle_backxtopage,
          strings.formatString(
            strings.global_approveobj,
            strings.global_restrictedpayeenm
          )
        )}
        onClickBack={() => {
          MaintenanceStore.remarks = null;
          MaintenanceStore.approveList = null;
          RestrictedPayeeStore.resetApprovalFields();
          this.redirectTo(this.state.pages.initial);
          this.setState({
            isForView: false
          });
        }}
        viewPanel={
          <NewViewRestrictedPayeePanel
            header={RestrictedPayeeStore.approvalAckProps.message}
            refNo={RestrictedPayeeStore.approvalAckProps.refNo}
            isConfirm={false}
            isAck={true}
            data={data ? data : null}
            store={MaintenanceStore}
            errorFeedback={MaintenanceStore.errors}
            hideStepper={true}
          />
        }
      />
    );
  }

  showViewPageConfirmAckData() {
    const { RestrictedPayeeStore } = this.context.store;
    return RestrictedPayeeStore.viewPageMaintenanceData
      ? JSON.parse(RestrictedPayeeStore.viewPageMaintenanceData.dtlString)
      : null;
  }

  handleCancel = () => {
    this.setState({
      showErrorModal: false,
      errorModalMsg: ""
    });
  };

  handleKeyDown = e => {
    const { MaintenanceStore } = this.context.store;
    MaintenanceStore.remarks = e.target.value;
  };

  checkIfHasRemarks = data => {
    const { MaintenanceStore, SettingsStore } = this.context.store;
    if (!MaintenanceStore.remarks) {
      let errorList = [
        strings.formatString(
          strings.feedback_bad_isrequired,
          strings.global_remarks
        )
      ];
      RestrictedPayeeStore.errors = errorList;
      this.setState({
        showErrorModal: true,
        errorModalMsg: errorList[0]
      });
      SettingsStore.isScreenLoading = false;
    } else {
      this.onClickReject(data, MaintenanceStore.remarks);
    }
  };

  render() {
    const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;

    const actionButtons = (
      <div>
        <div className="row approval-remarks">
          <TextArea
            labelField={strings.global_remarks}
            value={MaintenanceStore.remarks}
            placeHolder={strings.global_remarks}
            onChange={this.handleKeyDown}
            maxLength="255"
          />
        </div>
        <div className="bo-feedback">
          <Feedback isError={true} feedbackList={RestrictedPayeeStore.errors} />
        </div>
        <ApproveRejectViewPageActionPanel
          approveMessage={strings.formatString(
            strings.global_approveobj,
            strings.global_restrictedpayeenm
          )}
          rejectMessage={strings.formatString(
            strings.global_rejectobj,
            strings.global_restrictedpayeenm
          )}
          onClickApprove={() => {
            this.setState({ isForView: true });
            let data = [];
            data.push(RestrictedPayeeStore.viewPageMaintenanceData);
            this.onClickApprove(data, MaintenanceStore.remarks);
            MaintenanceStore.errors = [];
          }}
          onClickReject={() => {
            this.setState({ isForView: true });
            let data = [];
            data.push(RestrictedPayeeStore.viewPageMaintenanceData);
            this.checkIfHasRemarks(data);
            MaintenanceStore.errors = [];
          }}
        />
      </div>
    );

    const data = [
      { key: 0, content: this._showMaintenanceApprovalPanel() },
      { key: 1, content: this._showMaintenanceApprovalConfirmPanel() },
      { key: 2, content: this._showMaintenanceApprovalAckPanel() },
      { key: 3, content: this._showViewPage(actionButtons) },
      { key: 4, content: this._showViewPageForConfirmAck() },
      { key: 5, content: this._showAckForSingle() }
    ];

    return (
      <F4ContentContainer>
        <Helmet title={strings.business_banking} />
        <Modal
          visible={this.state.showErrorModal}
          closable={true}
          onClose={this.handleCancel}
          onCancel={this.handleCancel}
          okButtonProps={{
            style: { display: "none" }
          }}
          cancelButtonProps={{
            style: { display: "none" }
          }}
          destroyOnClose={true}
          className="errorModalFeedback"
        >
          {this.state.showErrorModal ? (
            <div>
              <div
                class="swal2-icon swal2-error swal2-animate-error-icon"
                style={{ display: "flex" }}
              >
                <span class="swal2-x-mark">
                  <span class="swal2-x-mark-line-left" />
                  <span class="swal2-x-mark-line-right" />
                </span>
              </div>
              <div className="errorModalLabel">{this.state.errorModalMsg}</div>
            </div>
          ) : null}
        </Modal>
        <F4Stepper
          data={data}
          activeKey="key"
          activeValue={RestrictedPayeeStore.selectedMenuOnApprove}
        />
      </F4ContentContainer>
    );
  }
}

export default ApproveRestrictedPayeeCTR;