Clear create ticket form after create a ticket with mandatory login disabled (#966)

* Clear create ticket form after create a ticket with mandatory login disabled.

* WIP

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js

@@ -17,6 +17,12 @@ import FormField          from 'core-components/form-field';
 import SubmitButton       from 'core-components/submit-button';
 import Message            from 'core-components/message';
 
+const DEFAULT_CREATE_TICKET_FORM_VALUE = {
+    title: '',
+    email: '',
+    name: ''
+};
+
 class CreateTicketForm extends React.Component {
     
     static propTypes = {
@@ -34,23 +40,15 @@ class CreateTicketForm extends React.Component {
         loading: false,
         message: null,
         form: {
-            title: '',
+            ...DEFAULT_CREATE_TICKET_FORM_VALUE,
             content: TextEditor.createEmpty(),
             departmentIndex: getPublicDepartmentIndexFromDepartmentId(this.props.defaultDepartmentId, SessionStore.getDepartments()),
-            email: '',
-            name: '',
             language: this.props.language
         }
     };
 
     render() {
-        const {
-            userLogged,
-            isDefaultDepartmentLocked,
-            isStaff,
-            onlyOneSupportedLanguage,
-            allowAttachments
-        } = this.props;
+        const { userLogged, isDefaultDepartmentLocked, isStaff, onlyOneSupportedLanguage, allowAttachments } = this.props;
 
         return (
             <div className="create-ticket-form">
@@ -118,7 +116,7 @@ class CreateTicketForm extends React.Component {
     renderMessage() {
         switch (this.state.message) {
             case 'success':
-                return <Message className="create-ticket-form__message" type="success">{i18n('TICKET_SENT')}</Message>;
+                return this.props.userLogged ? <Message className="create-ticket-form__message" type="success">{i18n('TICKET_SENT')}</Message> : null;
             case 'fail':
                 return <Message className="create-ticket-form__message" type="error">{i18n('TICKET_SENT_ERROR')}</Message>;
             default:
@@ -127,10 +125,7 @@ class CreateTicketForm extends React.Component {
     }
 
     getFormProps() {
-        const {
-            loading,
-            form
-        } = this.state;
+        const { loading, form } = this.state;
 
         return {
             loading,
@@ -161,16 +156,26 @@ class CreateTicketForm extends React.Component {
         }
     }
 
-    onTicketSuccess(email, result) {
-        const { onSuccess } = this.props;
+    onTicketSuccess() {
+        const { onSuccess, userLogged, language } = this.props;
+        const { form } = this.state;
         const message = 'success';
 
         this.setState(
             {
                 loading: false,
-                message
+                message,
+                form: !userLogged ?
+                    {
+                        ...form,
+                        ...DEFAULT_CREATE_TICKET_FORM_VALUE,
+                        content: TextEditor.createEmpty(),
+                        departmentIndex: getPublicDepartmentIndexFromDepartmentId(this.props.defaultDepartmentId, SessionStore.getDepartments()),
+                        language
+                    } :
+                    form
             },
-            () => {onSuccess && onSuccess(result, email, message);}
+            () => {onSuccess && onSuccess(message);}
         );
     }
 
@@ -184,6 +189,7 @@ class CreateTicketForm extends React.Component {
 
 export default connect((store) => {
     const { language, supportedLanguages } = store.config;
+
     return {
         language: _.includes(supportedLanguages, language) ? language : supportedLanguages[0],
         onlyOneSupportedLanguage: supportedLanguages.length == 1 ? true : false,

client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
 import {connect} from 'react-redux';
-import history from 'lib-app/history';
+import queryString from 'query-string';
+
+import history from 'lib-app/history';
+import i18n from 'lib-app/i18n';
 
-import SessionActions     from 'actions/session-actions';
 import CreateTicketForm from 'app/main/dashboard/dashboard-create-ticket/create-ticket-form';
 
 import Widget from 'core-components/widget';
+import Message from 'core-components/message';
 
 class DashboardCreateTicketPage extends React.Component {
 
@@ -23,21 +26,24 @@ class DashboardCreateTicketPage extends React.Component {
 
         return (
             <div className={this.getClass()}>
-                <Wrapper>
-                    <CreateTicketForm
-                        userLogged={(this.props.location.pathname !== '/create-ticket')}
-                        onSuccess={this.onCreateTicketSuccess.bind(this)}/>
+                <Wrapper className="dashboard-create-ticket-page__container">
+                    {queryString.parse(window.location.search)["message"] ?
+                        <Message className="dashboard-create-ticket-page__message" type="success">
+                            {i18n('TICKET_NUMBER_SENT')}
+                        </Message> :
+                        null}
+                    <div className={this.getCreateTicketFormClass()}>
+                        <CreateTicketForm
+                            userLogged={(this.props.location.pathname !== '/create-ticket')}
+                            onSuccess={this.onCreateTicketSuccess.bind(this)} />
+                    </div>
                 </Wrapper>
             </div>
         );
     }
 
-    onCreateTicketSuccess(result, email, message) {
-        if((this.props.location.pathname !== '/create-ticket')) {
-            history.push(`/dashboard?message=${message}`);
-        } else {
-            setTimeout(() => {history.push('/check-ticket/' + result.data.ticketNumber + '/' + email)}, 1000);
-        }
+    onCreateTicketSuccess(message) {
+        history.push(`${(this.props.location.pathname !== '/create-ticket') ? "/dashboard" : "/create-ticket"}?message=${message}`);
     }
 
     getClass() {
@@ -49,6 +55,15 @@ class DashboardCreateTicketPage extends React.Component {
 
         return classNames(classes);
     }
+
+    getCreateTicketFormClass() {
+        let classes = {
+            'dashboard-create-ticket-page__create-ticket-form': true,
+            'dashboard-create-ticket-page__create-ticket-form__hidden': !!queryString.parse(window.location.search)["message"]
+        };
+
+        return classNames(classes);
+    }
 }
 
 export default connect((store) => {

client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.scss

@@ -7,4 +7,14 @@
             float: none;
         }
     }
-}
+
+    &__container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    &__create-ticket-form__hidden {
+        display: none;
+    }
+}

client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js

@@ -42,16 +42,8 @@ class DashboardListTicketsPage extends React.Component {
     }
 
     render() {
-        const {
-            userUsers
-        } = this.props;
-        const {
-            loading,
-            page,
-            pages,
-            tickets,
-            message
-        } = this.state;
+        const { userUsers } = this.props;
+        const { loading, page, pages, tickets, message } = this.state;
 
         return (
             <div className="dashboard-ticket-list">

client/src/data/languages/en.js

@@ -408,6 +408,7 @@ export default {
     'SIGNUP_SUCCESS': 'You have registered successfully in our support system.',
     'INVITE_USER_SUCCESS': 'You have invited a new user successfully in our support system',
     'TICKET_SENT': 'Ticket has been created successfully.',
+    'TICKET_NUMBER_SENT': 'Ticket has been created successfully and an email with the ticket number has been sent.',
     'VALID_RECOVER': 'Password recovered successfully',
     'EMAIL_EXISTS': 'Email already exists',
     'ARE_YOU_SURE': 'Confirm action',