add button and modal dialog for invoice integration

client/src/components/GenerateFeesInORDButton/index.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { Button, Modal } from 'semantic-ui-react';
+
+class GenerateFeesInORDButton extends Component {
+    state = { open: false };
+
+    show = size => () => this.setState({ size, open: true });
+    close = () => this.setState({ open: false });
+    confirm = () => {
+        const { onConfirm } = this.props;
+        this.close();
+        if (onConfirm){
+            onConfirm();
+        }
+    };
+
+    render() {
+        const { open, size } = this.state;
+        const { singleMember, disabled } = this.props;
+
+        const modalContent = singleMember ?
+            'This will remove all existing fees in ORD for selected member in selected date range and generate new fees based on shown incident tables. Do you want to continue ?':
+            'This will remove all existing fees in ORD for all members in selected date range and generate new fees based on shown incident tables. Do you want to continue ?';
+
+        return (
+            <div>
+                <Button disabled={disabled} onClick={this.show('tiny')}>Generate fees in ORD</Button>
+
+                <Modal size={size} open={open} onClose={this.close}>
+                    <Modal.Header>Add fees to the ORD</Modal.Header>
+                    <Modal.Content>
+                        <p>{modalContent}</p>
+                    </Modal.Content>
+                    <Modal.Actions>
+                        <Button negative onClick={this.close}>No</Button>
+                        <Button positive icon='checkmark' onClick={this.confirm} labelPosition='right' content='Yes' />
+                    </Modal.Actions>
+                </Modal>
+            </div>
+        );
+    }
+}
+
+export default GenerateFeesInORDButton;

client/src/scenes/IncidentsReport/index.js

@@ -5,6 +5,7 @@ import { Container } from 'semantic-ui-react';
 import MainMenu from '../../components/MainMenu';
 import DateRangePicker from '../../components/DateRangePicker';
 import MemberIncidentsTables from '../../components/MemberIncidentsTables';
+import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';
 
 import { fetchIncidents } from '../../store/actions';
 
@@ -14,6 +15,8 @@ class IncidentsReport extends Component {
         fetchIncidents(dateRange);
     }
 
+    onAddFeesClick = () => {};
+
     render () {
         const { pendingIncidents, incidents } = this.props;
 
@@ -22,7 +25,14 @@ class IncidentsReport extends Component {
                 <MainMenu/>
                 <h3>Incidents Report</h3>
                 <hr/>
-                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
+                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} inlineButton />
+                <br/>
+                <GenerateFeesInORDButton
+                    disabled={pendingIncidents}
+                    onConfirm={this.onAddFeesClick}
+                />
+                <br/><br/>
+                <hr/>
                 <br/>
                 <MemberIncidentsTables pendingIncidents={pendingIncidents} incidents={incidents} />
             </Container>

client/src/scenes/PracticeSummaryReport/index.js

@@ -7,6 +7,7 @@ import DateRangePicker from '../../components/DateRangePicker';
 import MemberSelector from './components/MemberSelector';
 import MemberSummary from './components/MemberSummary';
 import MemberIncidentsTables from '../../components/MemberIncidentsTables';
+import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';
 
 import { fetchMemberIncidents } from '../../store/actions';
 
@@ -38,9 +39,13 @@ class PracticeSummaryReport extends Component {
         }
     }
 
+    onAddFeesClick = () => {};
+
     render () {
         const { memberIncidents, loading } = this.props;
-        const { memberId } = this.state;
+        const { memberId, dateRange } = this.state;
+
+        const addFeesButtonDisabled = !memberId || !dateRange || loading;
 
         return (
             <Container>
@@ -64,6 +69,15 @@ class PracticeSummaryReport extends Component {
                             />
                         </Grid.Column>
                     </Grid.Row>
+                    <Grid.Row>
+                        <Grid.Column>
+                            <GenerateFeesInORDButton
+                                singleMember
+                                disabled={addFeesButtonDisabled}
+                                onConfirm={this.onAddFeesClick}
+                            />
+                        </Grid.Column>
+                    </Grid.Row>
                     <Grid.Row/>
                     <Grid.Row>
                         <Grid.Column>