add and implement action to send "delete fees" request

client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Component } from 'react';
-import { Loader } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { Loader, Button } from 'semantic-ui-react';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 import { NavLink } from 'react-router-dom';
@@ -13,155 +14,180 @@ import {
     UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE
 } from '../../../constants/enums';
 import { doorLockRelatedWithReservationIncidentHeaders, standaloneDoorLockIncidentHeaders, bookingChangeIncidentHeaders } from '../../../constants/constants';
+import { deleteIncidents } from "../../../store/actions";
 
+class SingleIncidentsTable extends Component {
+    deleteSelectedFees = () => {
+        const { dateRange, deleteIncidentsById } = this.props;
 
-const SingleIncidentsTable = props => {
+        const unlockedIncidentIds = [];
-    const {
+        const unscheduledIncidentIds = [];
-        loading,
+        const bookingChangeIncidentIds = [];
-        title,
-        openMemberSummaryOnMemberClick,
-        hideMemberName,
-        tableType
-    } = props;
-    const incidents = props.incidents ? props.incidents : [];
-    const columns = [];
 
-    if (incidents && incidents.length > 0){
+        const incidentsToDelete = {
-        let tableHeaders;
+            unlockedIncidentIds,
-        switch (tableType) {
+            unscheduledIncidentIds,
-            case incidentTableTypes.INCIDENTS_RELATED_TO_RESERVATIONS:
+            bookingChangeIncidentIds
-                tableHeaders = doorLockRelatedWithReservationIncidentHeaders;
+        };
-                break;
+
-            case incidentTableTypes.STANDALONE_INCIDENTS:
+        deleteIncidentsById(dateRange, incidentsToDelete);
-                tableHeaders = standaloneDoorLockIncidentHeaders;
+    };
-                break;
+
-            case incidentTableTypes.BOOKING_CHANGE_INCIDENTS:
+    render(){
-                tableHeaders = bookingChangeIncidentHeaders;
+        const {
-                break;
+            loading,
-            default:
+            title,
-                break;
+            openMemberSummaryOnMemberClick,
+            hideMemberName,
+            tableType
+        } = this.props;
+        const incidents = this.props.incidents ? this.props.incidents : [];
+        const columns = [];
+
+        if (incidents && incidents.length > 0){
+            let tableHeaders;
+            switch (tableType) {
+                case incidentTableTypes.INCIDENTS_RELATED_TO_RESERVATIONS:
+                    tableHeaders = doorLockRelatedWithReservationIncidentHeaders;
+                    break;
+                case incidentTableTypes.STANDALONE_INCIDENTS:
+                    tableHeaders = standaloneDoorLockIncidentHeaders;
+                    break;
+                case incidentTableTypes.BOOKING_CHANGE_INCIDENTS:
+                    tableHeaders = bookingChangeIncidentHeaders;
+                    break;
+                default:
+                    break;
+            }
+
+            tableHeaders.forEach((header) => {
+                const columnTitle = incidentsReportHeaderTitles[header];
+
+                let showColumn = true;
+                if (header === 'memberName' && hideMemberName){
+                    showColumn = false;
+                }
+
+                if (columnTitle && showColumn){
+                    const columnAlignments = {
+                        left: 'left',
+                        right: 'right',
+                    };
+                    let columnContentsAlignment = columnAlignments.left;
+
+                    columns.push({
+                        Header: incidentsReportHeaderTitles[header],
+                        accessor: header,
+                        Cell: props => {
+                            let cellValue = '';
+                            let urlValue = undefined;
+
+                            switch (props.column.id) {
+                                case 'memberName':
+                                    const memberId = props.row['_original'].memberId;
+                                    urlValue = `/specific-member-incidents-report/${memberId}`;
+                                    cellValue = props.value;
+                                    break;
+                                case 'resourceName':
+                                    if (props.row['_original'].resourceName){
+                                        cellValue = props.row['_original'].resourceName || '---';
+                                    }else{
+                                        const oldResourceName = props.row['_original'].oldResourceName || '---';
+                                        const newResourceName = props.row['_original'].newResourceName || '---';
+                                        if (oldResourceName !== newResourceName){
+                                            cellValue = `${oldResourceName}\n${newResourceName}`;
+                                        }else{
+                                            cellValue = oldResourceName;
+                                        }
+                                    }
+                                    break;
+                                case 'reservation':
+                                    const bookingStart = props.row['_original'].bookingStart;
+                                    const bookingEnd = props.row['_original'].bookingEnd;
+                                    cellValue = `${bookingStart}\n${bookingEnd}`;
+                                    break;
+                                case 'doorLockTimestamps':
+                                    const unlockTimestamp = props.row['_original'].unlockTimestamp;
+                                    const lockTimestamp = props.row['_original'].lockTimestamp;
+                                    cellValue = `${unlockTimestamp ? unlockTimestamp : '---'}\n${lockTimestamp ? lockTimestamp : '---'}`;
+                                    break;
+                                case 'incidentType':
+                                    cellValue = incidentDescriptions[props.value];
+                                    break;
+                                case 'incidentLevel':
+                                    cellValue = incidentLevelDescriptions[props.value];
+                                    break;
+                                case 'feeDescription':
+                                    const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original'];
+
+                                    switch (incidentType) {
+                                        case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
+                                        case UNLOCKED_INCIDENT_STANDALONE:
+                                            cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
+                                            break;
+                                        case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
+                                        case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
+                                        case UNSCHEDULED_INCIDENT_STANDALONE:
+                                            cellValue = `${timeIntervalsToCharge} x 5 min`;
+                                            break;
+                                        default:
+                                            cellValue = '';
+                                            break;
+                                    }
+                                    break;
+                                case 'totalChargeFee':
+                                    const totalFee = (props.row['_original'].incidentPrice || props.value) || 0;
+                                    const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
+                                    cellValue = `$ ${totalFeeFormatted}`;
+                                    columnContentsAlignment = columnAlignments.right;
+                                    break;
+                                case 'oldReservation':
+                                    const oldBookingStart = props.row['_original'].oldBookingStart;
+                                    const oldBookingEnd = props.row['_original'].oldBookingEnd;
+                                    cellValue = `${oldBookingStart}\n${oldBookingEnd}`;
+                                    break;
+                                case 'newReservation':
+                                    const newBookingStart = props.row['_original'].newBookingStart || '---';
+                                    const newBookingEnd = props.row['_original'].newBookingEnd || '---';
+                                    cellValue = `${newBookingStart}\n${newBookingEnd}`;
+                                    break;
+                                default:
+                                    cellValue = props.value;
+                            }
+
+                            if (openMemberSummaryOnMemberClick && urlValue){
+                                return <NavLink to={urlValue}>{cellValue}</NavLink>
+                            }else{
+                                return <div style={{ textAlign: columnContentsAlignment, whiteSpace: 'pre' }}>{cellValue}</div>
+                            }
+                        }
+                    });
+                }
+            });
         }
 
-        tableHeaders.forEach((header) => {
+        return (
-            const columnTitle = incidentsReportHeaderTitles[header];
+            <div>
-
+                <h4>{title}</h4>
-            let showColumn = true;
+                <Loader active={loading} />
-            if (header === 'memberName' && hideMemberName){
+                {
-                showColumn = false;
+                    <Button disabled={loading} onClick={this.deleteSelectedFees}>Delete</Button>
-            }
+                }
-
+                {
-            if (columnTitle && showColumn){
+                    !loading && incidents &&
-                const columnAlignments = {
+                    <ReactTable
-                    left: 'left',
+                        data={incidents}
-                    right: 'right',
+                        multiSort={false}
-                };
+                        columns={columns}
-                let columnContentsAlignment = columnAlignments.left;
+                    />
-
+                }
-                columns.push({
+            </div>
-                    Header: incidentsReportHeaderTitles[header],
+        );
-                    accessor: header,
-                    Cell: props => {
-                        let cellValue = '';
-                        let urlValue = undefined;
-
-                        switch (props.column.id) {
-                            case 'memberName':
-                                const memberId = props.row['_original'].memberId;
-                                urlValue = `/specific-member-incidents-report/${memberId}`;
-                                cellValue = props.value;
-                                break;
-                            case 'resourceName':
-                                if (props.row['_original'].resourceName){
-                                    cellValue = props.row['_original'].resourceName || '---';
-                                }else{
-                                    const oldResourceName = props.row['_original'].oldResourceName || '---';
-                                    const newResourceName = props.row['_original'].newResourceName || '---';
-                                    if (oldResourceName !== newResourceName){
-                                        cellValue = `${oldResourceName}\n${newResourceName}`;
-                                    }else{
-                                        cellValue = oldResourceName;
-                                    }
-                                }
-                                break;
-                            case 'reservation':
-                                const bookingStart = props.row['_original'].bookingStart;
-                                const bookingEnd = props.row['_original'].bookingEnd;
-                                cellValue = `${bookingStart}\n${bookingEnd}`;
-                                break;
-                            case 'doorLockTimestamps':
-                                const unlockTimestamp = props.row['_original'].unlockTimestamp;
-                                const lockTimestamp = props.row['_original'].lockTimestamp;
-                                cellValue = `${unlockTimestamp ? unlockTimestamp : '---'}\n${lockTimestamp ? lockTimestamp : '---'}`;
-                                break;
-                            case 'incidentType':
-                                cellValue = incidentDescriptions[props.value];
-                                break;
-                            case 'incidentLevel':
-                                cellValue = incidentLevelDescriptions[props.value];
-                                break;
-                            case 'feeDescription':
-                                const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original'];
-
-                                switch (incidentType) {
-                                    case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
-                                    case UNLOCKED_INCIDENT_STANDALONE:
-                                        cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
-                                        break;
-                                    case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
-                                    case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
-                                    case UNSCHEDULED_INCIDENT_STANDALONE:
-                                        cellValue = `${timeIntervalsToCharge} x 5 min`;
-                                        break;
-                                    default:
-                                        cellValue = '';
-                                        break;
-                                }
-                                break;
-                            case 'totalChargeFee':
-                                const totalFee = (props.row['_original'].incidentPrice || props.value) || 0;
-                                const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
-                                cellValue = `$ ${totalFeeFormatted}`;
-                                columnContentsAlignment = columnAlignments.right;
-                                break;
-                            case 'oldReservation':
-                                const oldBookingStart = props.row['_original'].oldBookingStart;
-                                const oldBookingEnd = props.row['_original'].oldBookingEnd;
-                                cellValue = `${oldBookingStart}\n${oldBookingEnd}`;
-                                break;
-                            case 'newReservation':
-                                const newBookingStart = props.row['_original'].newBookingStart || '---';
-                                const newBookingEnd = props.row['_original'].newBookingEnd || '---';
-                                cellValue = `${newBookingStart}\n${newBookingEnd}`;
-                                break;
-                            default:
-                                cellValue = props.value;
-                        }
-
-                        if (openMemberSummaryOnMemberClick && urlValue){
-                            return <NavLink to={urlValue}>{cellValue}</NavLink>
-                        }else{
-                            return <div style={{ textAlign: columnContentsAlignment, whiteSpace: 'pre' }}>{cellValue}</div>
-                        }
-                    }
-                });
-            }
-        });
     }
+}
 
-    return (
+const mapDispatchToProps = (dispatch) => ({
-        <div>
+    deleteIncidentsById: (dateRange, incidentsToDelete) => deleteIncidents(dispatch, {dateRange, incidentsToDelete})
-            <h4>{title}</h4>
+});
-            <Loader active={loading} />
-            {
-                !loading && incidents &&
-                <ReactTable
-                    data={incidents}
-                    multiSort={false}
-                    columns={columns}
-                />
-            }
-        </div>
-    );
-};
 
-export default SingleIncidentsTable;
+export default connect(null, mapDispatchToProps)(SingleIncidentsTable);

client/src/components/MemberIncidentsTables/index.js

@@ -8,7 +8,7 @@ import {
 } from '../../constants/enums';
 
 export default function MemberIncidentsTables (props) {
-    const { pendingIncidents, incidents, hideMemberName } = props;
+    const { pendingIncidents, incidents, hideMemberName, dateRange } = props;
 
     const incidentsRelatedToReservations = [];
     const standaloneIncidents = [];
@@ -46,6 +46,7 @@ export default function MemberIncidentsTables (props) {
             openMemberSummaryOnMemberClick
             hideMemberName={hideMemberName}
             tableType={incidentTableTypes.INCIDENTS_RELATED_TO_RESERVATIONS}
+            dateRange={dateRange}
         />
     );
 
@@ -56,6 +57,7 @@ export default function MemberIncidentsTables (props) {
             openMemberSummaryOnMemberClick
             hideMemberName={hideMemberName}
             tableType={incidentTableTypes.STANDALONE_INCIDENTS}
+            dateRange={dateRange}
         />
     );
 
@@ -66,6 +68,7 @@ export default function MemberIncidentsTables (props) {
             openMemberSummaryOnMemberClick
             hideMemberName={hideMemberName}
             tableType={incidentTableTypes.BOOKING_CHANGE_INCIDENTS}
+            dateRange={dateRange}
         />
     );
 

client/src/scenes/IncidentsReport/index.js

@@ -47,7 +47,7 @@ class IncidentsReport extends Component {
                 <br/><br/>
                 <hr/>
                 <br/>
-                <MemberIncidentsTables pendingIncidents={loading} incidents={incidents} />
+                <MemberIncidentsTables pendingIncidents={loading} incidents={incidents} dateRange={dateRange} />
             </Container>
         );
     }

client/src/store/actions/integrationActions.js

@@ -88,6 +88,17 @@ export const fetchIncidents = (dispatch, dateRange) => {
         });
 };
 
+export const deleteIncidents = (dispatch, deleteData) => {
+    dispatch({type: FETCH_INCIDENTS_PENDING});
+    API.delete(`/integration/fees`, { data: deleteData })
+        .then(response => {
+            dispatch({type: FETCH_INCIDENTS_SUCCESS, payload: response.data});
+        })
+        .catch(error => {
+            dispatch({type: FETCH_INCIDENTS_FAILED, payload: error.response});
+        });
+};
+
 export const fetchMembersList = (dispatch) => {
     dispatch({type: FETCH_MEMBERS_PENDING});
     API.get('officeRnD/membersList')