Notes

import React from 'react';
import { Blotter, Spinner } from 'foundation-components-core';
import { Redirect } 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 {
ddiTransactionsQuery,
primaryTabs,
secondaryTabs,
minimumNumberOfRecordsToDisplay,
initialGetFilterColumnsRqst,
printList,
exportList,
MANDATE,
DIRECTDEBITS,
FILES,
USER_ROLE,
CHECKBOX_FILTER,
RANGE_FILTER,
SEARCH_FILTER,
DATERANGE_FILTER
} from './constants';
import {
getColumns,
getFilters,
getRows,
updateAppliedFilters,
setFetchMoreVariables,
setUpdatedData,
getCommonActions,
setPrintExportVariables
} from './DirectDebitTransactionListBuilder';
import { printExportAction } from '../../utils';
import Export from '../globalactions/Export';
import ListHeaders from '../globalactions/ListHeader';

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

componentWillReceiveProps = (nextProps) => {
const { filters } = this.state;
const { dDIDetails, listHeader } = nextProps.data.getDDIList;
const { listFilter } = nextProps.data.getDDIListFilterColumns;
if (filters.length === 0) {
this.setState({
rows: getRows(dDIDetails),
columns: getColumns(listHeader, this.state.sort),
filters: getFilters(listFilter),
totalItems: nextProps.data.getDDIList.count
});
} else {
this.setState({
rows: getRows(dDIDetails),
columns: getColumns(listHeader, this.state.sort),
totalItems: nextProps.data.getDDIList.count
});
}
};

onPrimaryTabSelect = (id) => {
const { redirectPath } = this.state;
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 = redirectPath;
break;
}
this.setState({
redirect: true,
redirectPath: switchedPath,
redirectParam: 'selected'
});
};

onSecondaryTabSelect = (id) => {
const path = this.getPath();
const switchedPath =
id === 'batch' ? `${path}/ddi/batches` : `${path}/ddi/transactions`;
this.setState({
redirect: true,
redirectPath: switchedPath,
redirectParam: 'selected'
});
};

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

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

onRowCheckboxClick = (selectedRows, t) => {
const checkboxActions = getCommonActions(selectedRows, this.setActions(t));
this.setState({
checkboxActions
});
};

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

setActions = (t) => {
const actions = {
EXPORT: {
label: t('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('print'),
action: (rows) => {
const variables = setPrintExportVariables(rows);
this.props.client
.query({
query: printList,
variables
})
.then(({ data }) => {
printExportAction(data.printMandateList);
});
}
},
DELETE: {
label: t('delete'),
action: () => {
// TODO : (SD-24048) - Need handle DELETE Mandate Instruction
}
},
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);
}
}
};
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}/directdebit/initiate`;
this.setState({
redirect: true,
redirectPath: switchedPath,
redirectParam: { batchRefNo: rows[0].id } // NOTE: rows will hold only 1 element
});
};

routeToSummaryPage = (batchRefNo) => {
const path = this.props.location.pathname;
const collectionsPath = path.slice(0, path.indexOf('/lists'));
const switchedPath = `${collectionsPath}/mandate/batch/batchdetails`;
this.setState({
redirect: true,
redirectPath: switchedPath,
redirectParam: { batchRefNo }
});
};

callBackOnSort = (sortColumn, nextSort) => {
const { columns, sort } = this.state;
const { data } = this.props;
this.setState({ isLoadingMore: true });
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.getDDIList.count
});
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 });
const variables = setFetchMoreVariables(
null,
null,
sort,
appliedFilters,
data.getDDIList.dDIDetails.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);
};

render = () => {
const {
columns,
rows,
isLoadingMore,
totalItems,
filters,
appliedFilters,
checkboxActions,
isOverlayOpen,
exportData,
showExportOverlay
} = this.state;
const { data } = this.props;
return this.state.redirect ? (
<div>
<Redirect
to={{
pathname: this.state.redirectPath,
state: this.state.redirectParam
}}
/>
</div>
) : (
<div>
<ListHeaders />
<I18n ns="collections/collections">
{(t) => (
<MandateBatch>
{data.getDDIList ? (
/* ToDo: will be worked as per JIRA SD-22831 */
<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)}
/>
) : (
<Loader />
)}
{showExportOverlay && (
<Export isOverlayOpen={isOverlayOpen} data={exportData} />
)}
</MandateBatch>
)}
</I18n>
</div>
);
};
}

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

/** structure of data returned by GraphIQL */
getDDIList: PropTypes.shape({
count: PropTypes.number,
dDIDetails: 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
};

export default compose(
graphql(ddiTransactionsQuery, {
options: {
fetchPolicy: 'network-only',
variables: {
getDDIListRqst: {
startIndex: 1,
noOfRecords: minimumNumberOfRecordsToDisplay,
userRole: USER_ROLE
},
getFilterColumnsGQLRqst: initialGetFilterColumnsRqst,
needListFilterColumns: true
}
}
})
)(withApollo(DirectDebitTransactionList));

const MandateBatch = styled.section`
font-family: SCSans-Bold;
& tbody {
font-family: SCSans-Regular;
}
`;
const Loader = styled(Spinner)`
margin-left: 50%;
`;