Notes

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
Blotter,
Spinner,
ScrollToTop,
Toast,
OverlayModal,
Heading
} from 'foundation-components-core';
import { Grid, Row } from 'foundation-components-grid';
import { withRouter } from 'react-router-dom';
import { graphql, compose, withApollo } from 'react-apollo';
import { I18n } from 'react-i18next';
import { PropTypes } from 'prop-types';
import styled from 'styled-components';
import { exportOptions } from '../../constants';
import {
mandateBatchQuery,
primaryTabs,
secondaryTabs,
minimumNumberOfRecordsToDisplay,
initialGetFilterColumnsRqst,
printList,
MANDATE,
DIRECTDEBITS,
exportList,
FILES,
CHECKBOX_FILTER,
RANGE_FILTER,
SEARCH_FILTER,
DATERANGE_FILTER,
USER_ROLE,
deleteMandateBatches,
ACTION,
releaseToBankMandateBatches,
BY_MSG_CENTER
} from './constants';
import {
getColumns,
getFilters,
getRows,
updateAppliedFilters,
setFetchMoreVariables,
setUpdatedData,
getCommonActions,
setPrintExportVariables,
setActionVariables,
setFetchMoreVariablesAction
} from './MandateBatchListBuilder';
import { printExportAction } from '../../utils';
import Export from '../globalactions/Export';
import ListHeaders from '../globalactions/ListHeader';
import DeleteOverlay from '../../../components/DeleteOverlay';
import DeleteToast from '../../../components/DeleteToast';
import { getAppPageParams } from '../../../../login/reducer';
import { clearPageparms } from '../../../../login/action';

export class MandateBatchList extends React.Component {
constructor(props) {
super(props);
this.state = {
columns: [],
rows: [],
sort: {
column: '',
direction: ''
},
filters: [],
appliedFilters: [],
checkboxActions: ['EXPORT'],
isOverlayOpen: false,
showExportOverlay: false,
exportData: [],
showDeleteOverlay: false,
deleteVariables: {},
isOpen: false,
toastMessage: '',
isOpenReleaseBank: false,
batchRefNo: '',
exportSelected: exportOptions[0],
isPrintandExportStatus: false,
listSortCriteria: {},
groupingCriteria: {},
printExportMessage: '',
isPrintList: false,
counter: 0,
isYes: false,
selectedRowsCount: 0
};
}

componentWillReceiveProps = (nextProps) => {
const {
mandateHeaderDtls,
listHeader
} = nextProps.data.getMandateBatchList;
const { filters } = this.state;
const { listFilter } = nextProps.data.getMandateBatchListFilterColumns;
if (filters.length === 0) {
this.setState({
rows: getRows(mandateHeaderDtls),
columns: getColumns(listHeader, this.state.sort),
filters: getFilters(listFilter),
totalItems: nextProps.data.getMandateBatchList.count,
counter: this.state.counter + 1
});
} else {
this.setState({
rows: getRows(mandateHeaderDtls),
columns: getColumns(listHeader, this.state.sort),
totalItems: nextProps.data.getMandateBatchList.count,
counter: this.state.counter + 1
});
}
if (this.checkFilterApplied(nextProps.pageParams)) {
const updateFilter = getFilters(listFilter);
updateFilter.map((x) =>
(x.id === 'STATUS'
? Object.assign(x, { selected: JSON.parse(nextProps.pageParams) })
: x)
);
this.setState({
filters: updateFilter,
appliedFilters: updateAppliedFilters(updateFilter)
});
}
};

componentWillUnmount = () => {
this.props.actions.clearPageparms();
};

onPrimaryTabSelect = (id) => {
const path = this.getPath();
let switchedPath = '';
switch (id) {
case DIRECTDEBITS:
switchedPath = `${path}/ddi/batches`;
break;
case MANDATE:
switchedPath = `${path}/mandate/batches`;
break;
case FILES:
switchedPath = `${path}/files`;
break;
default:
switchedPath = this.state.redirectPath;
break;
}
this.props.history.push({
pathname: switchedPath
});
};

onSecondaryTabSelect = (id) => {
const path = this.getPath();
const switchedPath =
id === 'batch'
? `${path}/mandate/batches`
: `${path}/mandate/transactions`;
this.props.history.push({
pathname: switchedPath
});
};

onUpdateQuery = (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) {
return previousResult;
} else {
this.setState({ isLoadingMore: false });
const newAccountsData = [
...fetchMoreResult.getMandateBatchList.mandateHeaderDtls
];
const updatedData = setUpdatedData(
newAccountsData,
previousResult,
fetchMoreResult
);
return { ...previousResult, ...updatedData };
}
};

onLoadMoreUpdateQuery = (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) {
return previousResult;
} else {
this.setState({ isLoadingMore: false });
const newAccountsData = [
...previousResult.getMandateBatchList.mandateHeaderDtls,
...fetchMoreResult.getMandateBatchList.mandateHeaderDtls
];
const updatedData = setUpdatedData(
newAccountsData,
previousResult,
fetchMoreResult
);
return { ...updatedData };
}
};

onRowCheckboxClick = (selectedRows, t) => {
console.log(selectedRows, 'selectedRows==============');
const checkboxActions = getCommonActions(selectedRows, this.setActions(t));
this.setState({
checkboxActions,
showExportOverlay: false,
isOpen: false,
showDeleteOverlay: false,
selectedRowsCount: selectedRows && selectedRows.length > 0 ? selectedRows.length : 0
});
};

onCellClick = (rowID) => {
this.setState({ showDeleteOverlay: false });
this.routeToSummaryPage(rowID);
};

setActions = (t) => {
const actions = {
EXPORT: {
label: t('approveList.export'),
action: (rows) => {
this.setState({
showExportOverlay: true,
exportData: rows
});
}
},
PRINT: {
label: t('approveList.print'),
action: (rows) => {
const variables = {
printExportRequest: {
selectedIds:
Object.keys(rows).length !== 0 ? rows.map((row) => row.id) : '',
userRole: USER_ROLE
}
};
this.props.client
.query({
query: printList,
variables
})
.then(({ data }) => {
if (data.printMandateBatchDetails.docId === null) {
this.setState({
isPrintList: true,
printExportMessage: data.printMandateBatchDetails.status,
isPrintandExportStatus: true
});
}
printExportAction(data.printMandateBatchDetails);
});
}
},
DELETE: {
label: t('delete'),
action: (rows) => {
const list = this.props.data.getMandateBatchList.mandateHeaderDtls.find(
(obj) => obj.batchRefNo === rows[0].id
);
const deleteVariables = setActionVariables(
rows,
list.versionNo,
list.batchRefNo
);
const numberOfBatches = deleteVariables.actionRqst.refNoList.length;
let SingleBatchRefno = '';
if (numberOfBatches < 2) {
SingleBatchRefno = list.batchRefNo;
}
this.setState({
showDeleteOverlay: true,
// isOverlayOpen: true,
deleteVariables,
batchRefNo: SingleBatchRefno
});
}
},
EDIT: {
label: t('edit'),
action: (rows) => {
this.routeToInitiatePage(rows);
}
},
SUBMIT: {
label: t('submit'),
action: (rows) => {
this.routeToSummaryPage(rows[0].id);
}
},
VIEW: {
label: t('view'),
action: (rows) => {
this.routeToSummaryPage(rows[0].id);
}
},
REJECT: {
label: t('reject'),
action: () => {
// TODO : (SD-24048) - Need handle REJECT Mandate Batch
}
},
CANCEL: {
label: t('cancel'),
action: () => {
// TODO : (SD-24048) - Need handle REJECT Mandate Batch
}
},
'SEND FOR REPAIR': {
label: t('sendForRepair'),
action: () => {
// TODO : (SD-24044) - Need handle SEND FOR REPAIR Mandate Batch
}
},
APPROVE: {
label: t('approve'),
action: () => {
// TODO : (SD-24048) - Need handle APPROVE Mandate Batch
}
},
AMEND: {
label: t('amend'),
action: (rows) => {
this.routeToAmendPage(rows);
}
},
SEND_TO_BANK: {
label: t('sendToBank'),
action: () => {
// TODO : (SD-24048) - Need handle SEND_TO_BANK Mandate Batch
}
},
COPY: {
label: t('copy'),
action: () => {
// TODO : (SD-24042) - Need handle COPY Mandate Batch
}
},
STOP: {
label: t('stop'),
action: () => {
// TODO : (SD-24051) - Need handle STOP Mandate Batch
}
},
'UPLOAD SCAN IMAGES': {
label: t('uploadScanImages'),
action: () => {
// TODO : (SD-22811) - Need handle UPLOAD SCAN IMAGES Mandate Batch
}
},
'RELEASE TO BANK': {
label: t('releaseToBank'),
action: (rows) => {
const list = this.props.data.getMandateBatchList.mandateHeaderDtls.find(
(obj) => obj.batchRefNo === rows[0].id
);

const sendtobankVariables = setActionVariables(rows, list.versionNo);
const variables = setFetchMoreVariablesAction(
null,
null,
this.state.sort,
this.state.appliedFilters,
0
);
this.handleReleaseToBank(sendtobankVariables, variables, t);
}
},
'ALERT APPROVER': {
label: t('alertApprover'),
action: () => {
// TODO : (SD-22832) - Need handle ALERT APPROVER Mandate Batch
}
},
REPAIR: {
label: t('repair'),
action: (rows) => {
this.routeToRepairPage(rows);
}
}
};
return actions;
};

getPath = () => {
const { pathname } = this.props.location;
const splitPathWithBackslash = pathname.split('/');
const productName =
splitPathWithBackslash[splitPathWithBackslash.length - 2];
const lastIndexPath = pathname.slice(
0,
pathname.lastIndexOf(`/${productName}`)
);
return lastIndexPath;
};

checkFilterApplied = (pageParams) => {
if (pageParams !== undefined) {
if (pageParams.length > 0) {
return true;
} else if (
Object.keys(pageParams).length === 0 ||
Object.keys(pageParams) === null
) {
return false;
} else {
return false;
}
}
return false;
};

submitExportOverlay = () => {
this.props.client
.query({
query: exportList,
variables: setPrintExportVariables(
this.state.groupingCriteria,
this.state.listSortCriteria,
this.state.exportData,
this.state.exportSelected
)
})
.then(({ data }) => {
if (data.exportMandateBatchList.docId === null) {
this.setState({
printExportMessage: data.exportMandateBatchList.status,
isPrintandExportStatus: true
});
}
printExportAction(data.exportMandateBatchList);
this.setState({ exportData: '' });
});
this.setState({ showExportOverlay: false });
};

closeDeleteOverlay = () => {
this.setState({ showDeleteOverlay: false });
};

closeExportOverlay = () => {
this.setState({
showExportOverlay: false
});
};

closePrintToast = () => {
this.setState({ isPrintandExportStatus: false });
};

printExportMessageToast = (t) => {
const { printExportMessage, isPrintList } = this.state;
if (isPrintList) {
if (printExportMessage === BY_MSG_CENTER) {
return t('list.messageCenterPrintExport');
} else {
return t('list.messageForToomanyPrintStatus');
}
} else if (printExportMessage === BY_MSG_CENTER) {
return t('list.messageCenterPrintExport');
} else {
return t('list.messageForToomanyExportStatus');
}
};

handleReleaseToBank = (sendtobankVariables, variables, t) => {
this.props
.releaseToBank({
variables: sendtobankVariables
})
.then(({ data }) => {
const { transactionSuccess } = data.releaseToBankMandateBatch;
if (transactionSuccess) {
this.props.data.refetch(variables);
const toastMessage = t('list.mandateReleaseToBanksuccess');
this.setState({
isOpenReleaseBank: true,
toastType: 'confirm',
toastMessage
});
} else {
const warningMessage = t('list.mandateReleaseToBankfail');
this.setState({
isOpenReleaseBank: false,
toastType: 'critical',
toastMessage: warningMessage
});
}
});
};

closeReleaseToBankToast = () => {
this.setState({ isOpenReleaseBank: false });
};

routeToInitiatePage = (rows) => {
const path = this.props.location.pathname;
const { mandateHeaderDtls } = this.props.data.getMandateBatchList;
const collectionsPath = path.slice(0, path.indexOf('/lists'));
const switchedPath = `${collectionsPath}/mandate/edit`;
const selectedBatch = mandateHeaderDtls.find(
(record) => record.batchRefNo === rows[0].id
);
// Added country code to get mandatedetials.
this.props.history.push({
pathname: switchedPath,
state: {
batchRef: rows[0].id,
isMandateList: true,
ctryCode: selectedBatch.ctryCode,
isTransaction: true,
isManageList: 'MandateBatchList'
} // NOTE: rows will hold only 1 element
});
};

closeToast = () => {
this.setState({ isOpen: false });
};

routeToRepairPage = (rows) => {
const path = this.props.location.pathname;
const { mandateHeaderDtls } = this.props.data.getMandateBatchList;
const collectionsPath = path.slice(0, path.indexOf('/lists'));
const switchedPath = `${collectionsPath}/mandate/repair`;
const selectedBatch = mandateHeaderDtls.find(
(record) => record.batchRefNo === rows[0].id
);
this.props.history.push({
pathname: switchedPath,
state: {
batchRef: rows[0].id,
isMandateList: true,
ctryCode: selectedBatch.ctryCode,
isTransaction: true,
isManageList: 'MandateBatchList'
}
});
};

routeToSummaryPage = (batchRefNo) => {
const { location, data } = this.props;
const path = location.pathname;
const collectionsPath = path.slice(0, path.indexOf('/lists'));
const switchedPath = `${collectionsPath}/mandate/batch/batchdetails`;
const selectedRecord = data.getMandateBatchList.mandateHeaderDtls.filter(
(record) => record.batchRefNo === batchRefNo
);
const selectedRecordStatus = selectedRecord[0].status;
this.props.history.push({
pathname: switchedPath,
state: {
batchRefNo,
batchStatus: selectedRecordStatus,
userRole: USER_ROLE,
subAction: selectedRecord[0].subAction,
batchName: selectedRecord[0].batchName,
noOfMandates: selectedRecord[0].noOfMandates,
creditAcctName: selectedRecord[0].creditAcctName,
creditAcctNo: selectedRecord[0].creditAcctNo,
creditBankCode: selectedRecord[0].creditBankCode,
ctryCode: selectedRecord[0].ctryCode,
creditCurrency: selectedRecord[0].creditCurrency,
versionNo: selectedRecord[0].versionNo,
customerId: selectedRecord[0].customerId || ''
}
});
};

callBackOnSort = (sortColumn, nextSort) => {
const sortType = nextSort === 'none' ? '' : nextSort;
const { columns, sort, filters } = this.state;
const { data } = this.props;
this.setState({ isLoadingMore: true });
const columnToSort = columns.find((col) => col.id === sortColumn.id);
const variables = setFetchMoreVariables(
columnToSort,
sortType,
sort,
filters,
null,
null
);
const { groupingCriteria } = variables.getMandateBatchListRqst;
const { listSortCriteria } = variables.getMandateBatchListRqst;
this.setState({
groupingCriteria,
listSortCriteria
});
data.fetchMore({
variables,
updateQuery: (previousResult, { fetchMoreResult }) =>
this.onUpdateQuery(previousResult, { fetchMoreResult })
});
const nextColumns = columns.map((col) => {
const newCol = { ...col };

if (newCol.sortable) {
newCol.sorted = newCol.id === sortColumn ? nextSort : newCol.sorted;
}
return newCol;
});
const sortChange = {
column: columnToSort.sortKey,
direction: nextSort
};
this.setState({
columns: nextColumns,
sort: sortChange,
showExportOverlay: false
});
};