Ivan - Add custom response field [skip ci]

client/src/actions/session-actions.js

@@ -1,9 +1,8 @@
 import API from 'lib-app/api-call';
+import AdminDataActions from 'actions/admin-data-actions';
 import sessionStore from 'lib-app/session-store';
 import store from 'app/store';
 
-import ConfigActions from 'actions/config-actions';
-
 export default {
     login(loginData) {
         return {
@@ -13,6 +12,10 @@ export default {
                 data: loginData
             }).then((result) => {
                 store.dispatch(this.getUserData(result.data.userId, result.data.token, result.data.staff));
+                
+                if(result.data.staff) {
+                    store.dispatch(AdminDataActions.retrieveCustomResponses());
+                }
 
                 return result;
             })

client/src/app-components/ticket-viewer.js

@@ -20,6 +20,7 @@ class TicketViewer extends React.Component {
         ticket: React.PropTypes.object,
         onChange: React.PropTypes.func,
         editable: React.PropTypes.bool,
+        customResponses: React.PropTypes.array,
         assignmentAllowed: React.PropTypes.bool
     };
 
@@ -58,6 +59,7 @@ class TicketViewer extends React.Component {
                 </div>
                 <div className="ticket-viewer__response">
                     <div className="ticket-viewer__response-title row">{i18n('RESPOND')}</div>
+                    {this.renderCustomResponses()}
                     <div className="ticket-viewer__response-field row">
                         <Form onSubmit={this.onSubmit.bind(this)} loading={this.state.loading}>
                             <FormField name="content" validation="TEXT_AREA" required field="textarea" />
@@ -186,6 +188,30 @@ class TicketViewer extends React.Component {
         );
     }
 
+    renderCustomResponses() {
+        let customResponsesNode = null;
+
+        if (this.props.customResponses && this.props.editable) {
+            let customResponses = this.props.customResponses.map((customResponse) => {
+                return {
+                    content: customResponse.name
+                };
+            });
+
+            customResponses.unshift({
+                content: i18n('SELECT_CUSTOM_RESPONSE')
+            });
+
+            customResponsesNode = (
+                <div className="ticket-viewer__response-custom row">
+                    <DropDown items={customResponses} size="medium" />
+                </div>
+            );
+        }
+
+        return customResponsesNode;
+    }
+
     onDepartmentDropdownChanged(event) {
         AreYouSure.openModal(null, this.changeDepartment.bind(this, event.index));
     }

client/src/app-components/ticket-viewer.scss

@@ -72,5 +72,11 @@
             padding: 20px;
             text-align: left;
         }
+
+        &-custom {
+            background-color: $very-light-grey;
+            padding: 20px 0 0 20px;
+            text-align: left;
+        }
     }
 }

client/src/app/admin/panel/tickets/admin-panel-view-ticket.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
+import {connect}  from 'react-redux';
 
 import API from 'lib-app/api-call';
 import i18n from 'lib-app/i18n';
@@ -62,16 +63,12 @@ class AdminPanelViewTicket extends React.Component {
             ticket: this.state.ticket,
             onChange: this.retrieveTicket.bind(this),
             assignmentAllowed: true,
+            customResponses: this.props.customResponses,
             editable: _.get(this.state.ticket, 'owner.id') === SessionStore.getUserData().id
         };
     }
 
     retrieveTicket() {
-        this.setState({
-            loading: true,
-            ticket: {}
-        });
-
         API.call({
             path: '/ticket/get',
             date: {
@@ -95,4 +92,8 @@ class AdminPanelViewTicket extends React.Component {
     }
 }
 
-export default AdminPanelViewTicket;
+export default connect((store) => {
+    return {
+        customResponses: store.adminData.customResponses
+    };
+})(AdminPanelViewTicket);

client/src/data/languages/en.js

@@ -71,6 +71,7 @@ export default {
     'ASSIGN_TO_ME': 'Assign to me',
     'UN_ASSIGN': 'Unassign',
     'VIEW_TICKET': 'View Ticket',
+    'SELECT_CUSTOM_RESPONSE': 'Select a custom response...',
 
     //VIEW DESCRIPTIONS
     'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',

client/src/reducers/admin-data-reducer.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 
 import Reducer from 'reducers/reducer';
+import sessionStore from 'lib-app/session-store';
 
 class AdminDataReducer extends Reducer {
 
@@ -13,16 +14,28 @@ class AdminDataReducer extends Reducer {
 
     getTypeHandlers() {
         return {
-            'CUSTOM_RESPONSES_FULFILLED': this.onCustomResponses
+            'CUSTOM_RESPONSES_FULFILLED': this.onCustomResponses,
+            'SESSION_CHECKED': this.onSessionChecked
         };
     }
 
     onCustomResponses(state, payload) {
+        sessionStore.setItem('customResponses', JSON.stringify(payload.data));
+
         return _.extend({}, state, {
             customResponses: payload.data,
             customResponsesLoaded: true
         });
     }
+
+    onSessionChecked(state) {
+        const customResponses = sessionStore.getItem('customResponses');
+
+        return _.extend({}, state, {
+            customResponses: JSON.parse(customResponses),
+            customResponsesLoaded: true
+        });
+    }
 }
 
 export default AdminDataReducer.getInstance();