Notes

import React from 'react';
import { Blotter, Spinner, ScrollToTop } from 'foundation-components-core';
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 {
mandateBatchQuery,
primaryTabs,
secondaryTabs,
minimumNumberOfRecordsToDisplay,
initialGetFilterColumnsRqst,
printList,
exportList,
MANDATE,
DIRECTDEBITS,
FILES,
CHECKBOX_FILTER,
RANGE_FILTER,
SEARCH_FILTER,
DATERANGE_FILTER,
USER_ROLE,
deleteMandateBatches
} from './constants';
import {
getColumns,
getFilters,
getRows,
updateAppliedFilters,
setFetchMoreVariables,
setUpdatedData,
getCommonActions,
setPrintExportVariables,
setDeleteVariables,
setFetchMoreVariablesDelete
} 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';

export class MandateBatchList extends React.Component {
constructor(props) {
super(props);
this.state = {
columns: [],
rows: [],
sort: {
column: '',
direction: ''
},
filters: [],
appliedFilters: [],
checkboxActions: ['EXPORT', 'PRINT'],
isOverlayOpen: false,
showExportOverlay: false,
exportData: {},
showDeleteOverlay: false,
deleteVariables: {},
isOpen: false,
toastMessage: ''
};
}

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
});
} else {
this.setState({
rows: getRows(mandateHeaderDtls),
columns: getColumns(listHeader, this.state.sort),
totalItems: nextProps.data.getMandateBatchList.count
});
}
};

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) => {
const checkboxActions = getCommonActions(selectedRows, this.setActions(t));
this.setState({
checkboxActions,
isOverlayOpen: false,
isOpen: false
});
};

onCellClick = (rowID) => {
this.routeToSummaryPage(rowID);
};

setActions = (t) => {
const actions = {
EXPORT: {
label: t('approveList.export'),
action: (rows) => {
this.setState({
showExportOverlay: true,
isOverlayOpen: true
});
const variables = setPrintExportVariables(rows);
this.props.client
.query({
query: exportList,
variables
})
.then(({ data }) => {
this.setState({
exportData: data.exportMandateList
});
});
}
},
PRINT: {
label: t('approveList.print'),
action: (rows) => {
const variables = setPrintExportVariables(rows);
this.props.client
.query({
query: printList,
variables
})
.then(({ data }) => {
printExportAction(data.printMandateList);
});
}
},
DELETE: {
label: t('delete'),
action: (rows) => {
const list = this.props.data.getMandateBatchList.mandateHeaderDtls.find(
(obj) => obj.batchRefNo === rows[0].id
);
const deleteVariables = setDeleteVariables(
rows,
list.versionNo,
list.batchRefNo
);
this.setState({
showDeleteOverlay: true,
isOverlayOpen: true,
deleteVariables
});
}
},
EDIT: {
label: t('edit'),
action: (rows) => {
this.routeToInitiatePage(rows);
}
},
SUBMIT: {
label: t('submit'),
action: () => { }
},
VIEW: {
label: t('view'),
action: (rows) => {
this.routeToSummaryPage(rows[0].id);
}
},

COPY: {
label: t('copy'),
action: (rows) => {
this.routeToSummaryPage(rows[0].id);
}
},
'UPLOAD SCAN IMAGES': {
label: t('release'),
action: (rows) => {

}
},
'ALERT APPROVER': {
label: t('release'),
action: (rows) => {

}
},
RELEASE: {
label: t('release'),
action: (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;
};

routeToInitiatePage = (rows) => {
const path = this.props.location.pathname;
const collectionsPath = path.slice(0, path.indexOf('/lists'));
const switchedPath = `${collectionsPath}/mandate/initiate/edit`;
this.props.history.push({
pathname: switchedPath,
state: { batchRefNo: rows[0].id }// NOTE: rows will hold only 1 element

});
};

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
}
});
};

callBackOnSort = (sortColumn, nextSort) => {
const { columns, sort } = this.state;
const { data } = this.props;
this.setState({
isLoadingMore: true,
isOpen: false,
isOverlayOpen: false
});
const columnToSort = columns.find((col) => col.id === sortColumn.id);
const variables = setFetchMoreVariables(
columnToSort,
nextSort,
sort,
null,
null
);
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
});
};

callBackSubmitFilter = (updatedFilters) => {
const { sort } = this.state;
const { data } = this.props;
this.setState({
appliedFilters: updateAppliedFilters(updatedFilters),
filters: updatedFilters,
totalItems: data.getMandateBatchList.count,
isOpen: false,
isOverlayOpen: false
});
const variables = setFetchMoreVariables(
null,
null,
sort,
updatedFilters,
null
);
data.fetchMore({
variables,
updateQuery: (previousResult, { fetchMoreResult }) =>
this.onUpdateQuery(previousResult, { fetchMoreResult })
});
};

callBackOnLoadMore = () => {
const { sort, appliedFilters } = this.state;
const { data } = this.props;
this.setState({
isLoadingMore: true,
isOpen: false,
isOverlayOpen: false
});
const variables = setFetchMoreVariables(
null,
null,
sort,
appliedFilters,
data.getMandateBatchList.mandateHeaderDtls.length
);
data.fetchMore({
variables,
updateQuery: (previousResult, { fetchMoreResult }) =>
this.onLoadMoreUpdateQuery(previousResult, { fetchMoreResult })
});
};

callBackRemoveFilter = (id) => {
const { filters } = this.state;
const updatedFilters = filters.map((filter) => {
if (filter.id === id) {
if (
filter.type === CHECKBOX_FILTER.toLowerCase() ||
filter.type.toLowerCase() === SEARCH_FILTER ||
filter.type.toLowerCase() === DATERANGE_FILTER
) {
return {
...filter,
selected: undefined
};
} else if (filter.type.toLowerCase() === RANGE_FILTER.toLowerCase()) {
return {
...filter,
valueMin: undefined,
valueMax: undefined
};
}
}
return filter;
});
this.callBackSubmitFilter(updatedFilters);
};

handleDelete = () => {
const variables = setFetchMoreVariablesDelete(
null,
null,
this.state.sort,
this.state.appliedFilters,
0
);

this.props
.mutate({
variables: this.state.deleteVariables
})
.then(({ data }) => {
const {
transactionSuccess,
actionResult
} = data.deleteMandateBatch;
const deletedData = (actionResult.map((obj) => obj.batchRefNo)).join();

if (transactionSuccess) {
this.props.data.refetch(variables);
const toastMessage = `Batch ${
deletedData
} has been successfully deleted`;
this.setState({
isOpen: true,
toastType: 'confirm',
toastMessage
});
} else {
const warningMessage = 'Error';
this.setState({
isOpen: false,
toastType: 'critical',
toastMessage: warningMessage
});
}
});
this.setState({
showDeleteOverlay: false
});
};

render = () => {
const {
columns,
rows,
isLoadingMore,
totalItems,
filters,
appliedFilters,
checkboxActions,
isOverlayOpen,
showExportOverlay,
exportData,
showDeleteOverlay
} = this.state;
const { data } = this.props;
return (<div>
<ListHeaders product="mandateBatch" />
<I18n ns="collections/collections">
{(t) => (
<MandateBatch>
{data.getMandateBatchList ? (
/* ToDo: will be worked as per JIRA SD-22831 */
<div>
<Blotter
columns={columns.map((col) => ({
...col,
label: t(col.label)
}))}
rows={rows}
isLoadingMore={isLoadingMore}
onLoadMore={this.callBackOnLoadMore}
totalItems={totalItems}
primaryTabs={primaryTabs.map((tabDescription) => ({
...tabDescription,
label: t(tabDescription.label)
}))}
onPrimaryTabSelect={this.onPrimaryTabSelect}
secondaryTabs={secondaryTabs.map((tabDescription) => ({
...tabDescription,
label: t(tabDescription.label)
}))}
onSecondaryTabSelect={this.onSecondaryTabSelect}
onSort={this.callBackOnSort}
filters={filters.map((filter) => ({
...filter,
label: t(filter.label)
}))}
appliedFilters={appliedFilters}
onFilterSubmit={this.callBackSubmitFilter}
onFilterRemove={this.callBackRemoveFilter}
onCellClick={this.onCellClick}
onRowCheckboxClick={(selectedRows) =>
this.onRowCheckboxClick(selectedRows, t)
}
checkboxActions={checkboxActions.map((action) => t(action))}
actions={this.setActions(t)}
/>
<ScrollContainer>
{' '}
<ScrollToTop />
</ScrollContainer>
</div>
) : (
<Loader />
)}
{showExportOverlay && (
<Export overlayOpen={isOverlayOpen} data={exportData} />
)}
{showDeleteOverlay && (
<DeleteOverlay
overlayOpen={isOverlayOpen}
deleteCallBack={this.handleDelete}
translation={t}
/>
)}
{this.state.isOpen && (
<DeleteToast
isOpen={this.state.isOpen}
toastType={this.state.toastType}
toastMessage={this.state.toastMessage}
translation={t}
/>
)}
</MandateBatch>
)}
</I18n>
</div>
);
};
}

MandateBatchList.propTypes = {
/** Apollo Client */
client: PropTypes.object,

/** structure of data returned by GraphIQL */
getMandateBatchList: PropTypes.shape({
count: PropTypes.number,
mandateHeaderDtls: PropTypes.arrayOf(
PropTypes.shape({
mandateRef: PropTypes.string,
batchRefNo: PropTypes.string,
payer: PropTypes.shape({
payerName: PropTypes.string
}),
startDate: PropTypes.string,
endDate: PropTypes.string,
maxAmount: PropTypes.shape({
value: PropTypes.number,
currency: PropTypes.string
}),
minAmount: PropTypes.shape({
value: PropTypes.number,
currency: PropTypes.string
}),
debtorAmount: PropTypes.shape({
value: PropTypes.number,
currency: PropTypes.string
}),
mandateType: PropTypes.string,
mandateStatus: PropTypes.string
})
),
listHeader: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string,
isSortable: PropTypes.Boolean,
label: PropTypes.string,
sortKey: PropTypes.string
})
)
}),

/** Object returned by GraphIQL */
data: PropTypes.object,

/** location property of component */
location: PropTypes.object,

/** function call for mutate query */
mutate: PropTypes.func
};

export default compose(
graphql(mandateBatchQuery, {
options: {
fetchPolicy: 'network-only',
variables: {
getMandateBatchListRqst: {
startIndex: 1,
noOfRecords: minimumNumberOfRecordsToDisplay,
userRole: 'O'
},
getFilterColumnsGQLRqst: initialGetFilterColumnsRqst,
needListFilterColumns: true
}
}
}),
graphql(deleteMandateBatches, {
actionRqst: {
refNoList: [],
batchRefNo: ''
}
})
)(withApollo(withRouter(MandateBatchList)));

const MandateBatch = styled.section`
padding: 3px;
margin: 15px 28px;
font-family: SCSans-Bold;
& tbody {
font-family: SCSans-Regular;
}
`;
const Loader = styled(Spinner) `
margin-left: 50%;
`;
const ScrollContainer = styled.div`
position: fixed;
right: 0px;
bottom: 18px;
margin: 0px 14px;
`;