From c1671b7e1ab70dafa5931a1cc179cff93b159f4d Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Wed, 4 Jan 2017 17:16:07 -0300
Subject: [PATCH] Ivan - Complete email templates view [skip ci]

---
 .../settings/admin-panel-email-templates.js   | 25 +++++++++++++------
 .../settings/admin-panel-email-templates.scss | 21 ++++++++++++++++
 client/src/data/languages/en.js               |  5 +++-
 client/src/lib-app/i18n.js                    |  1 +
 4 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 client/src/app/admin/panel/settings/admin-panel-email-templates.scss

diff --git a/client/src/app/admin/panel/settings/admin-panel-email-templates.js b/client/src/app/admin/panel/settings/admin-panel-email-templates.js
index 03bdc641..99bdee30 100644
--- a/client/src/app/admin/panel/settings/admin-panel-email-templates.js
+++ b/client/src/app/admin/panel/settings/admin-panel-email-templates.js
@@ -52,14 +52,15 @@ class AdminPanelEmailTemplates extends React.Component {
                     <Listing {...this.getListingProps()}/>
                 </div>
                 <div className="col-md-9">
+                    <FormField label={i18n('LANGUAGE')} decorator={LanguageSelector} value={this.state.language} onChange={event => this.onItemChange(this.state.selectedIndex, event.target.value)} fieldProps={{
+                        type: 'allowed',
+                        size: 'medium'
+                    }}/>
                     <Form {...this.getFormProps()}>
                         <div className="row">
                             <div className="col-md-7">
                                 <FormField label={i18n('TITLE')} name="title" validation="TITLE" required fieldProps={{size: 'large'}}/>
                             </div>
-                            <div className="col-md-5">
-                                <LanguageSelector type="allowed" size="medium" value={this.state.language} onChange={event => this.onItemChange(this.state.selectedIndex, event.target.value)}/>
-                            </div>
                         </div>
                         <FormField label={i18n('CONTENT')} name="content" validation="TEXT_AREA" required field="textarea" />
                         <div className="admin-panel-email-templates__actions">
@@ -67,11 +68,11 @@ class AdminPanelEmailTemplates extends React.Component {
                                 <SubmitButton type="secondary" size="small">{i18n('SAVE')}</SubmitButton>
                             </div>
                             <div className="admin-panel-email-templates__optional-buttons">
-                                <div className="admin-panel-email-templates__discard-button">
-                                    <Button onClick={this.onDiscardChangesClick.bind(this)}>{i18n('DISCARD_CHANGES')}</Button>
-                                </div>
+                                {(this.state.edited) ? this.renderDiscardButton() : null}
                                 <div className="admin-panel-email-templates__recover-button">
-                                    <Button onClick={this.onRecoverClick.bind(this)}>{i18n('RECOVER_DEFAULT')}</Button>
+                                    <Button onClick={this.onRecoverClick.bind(this)} size="medium">
+                                        {i18n('RECOVER_DEFAULT')}
+                                    </Button>
                                 </div>
                             </div>
                         </div>
@@ -89,6 +90,16 @@ class AdminPanelEmailTemplates extends React.Component {
         );
     }
 
+    renderDiscardButton() {
+        return (
+            <div className="admin-panel-email-templates__discard-button">
+                <Button onClick={this.onDiscardChangesClick.bind(this)} size="medium">
+                    {i18n('DISCARD_CHANGES')}
+                </Button>
+            </div>
+        );
+    }
+
     getListingProps() {
         return {
             title: i18n('EMAIL_TEMPLATES'),
diff --git a/client/src/app/admin/panel/settings/admin-panel-email-templates.scss b/client/src/app/admin/panel/settings/admin-panel-email-templates.scss
new file mode 100644
index 00000000..340c7059
--- /dev/null
+++ b/client/src/app/admin/panel/settings/admin-panel-email-templates.scss
@@ -0,0 +1,21 @@
+.admin-panel-email-templates {
+
+    &__save-button {
+        display: inline-block;
+        float: left;
+    }
+
+    &__optional-buttons {
+        display: inline-block;
+        float: right;
+    }
+
+    &__discard-button {
+        display: inline-block;
+    }
+
+    &__recover-button {
+        display: inline-block;
+        margin-left: 10px;
+    }
+}
\ No newline at end of file
diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js
index b1472eee..2fb72996 100644
--- a/client/src/data/languages/en.js
+++ b/client/src/data/languages/en.js
@@ -118,6 +118,7 @@ export default {
     'COMMENTS': 'Comments',
     'DELETE_STAFF_MEMBER': 'Delete staff member',
     'MAINTENANCE_MODE': 'Maintenance mode',
+    'RECOVER_DEFAULT': 'Recover default',
 
     //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.',
@@ -147,6 +148,7 @@ export default {
     'MY_ACCOUNT_DESCRIPTION': 'Here you can edit information about you.',
     'DEPARTMENTS_DESCRIPTION': 'A department is a group where the tickets can go. They are used to categorize the tickets. You can assign them to other staff members.',
     'MAINTENANCE_MODE_DESCRIPTION': 'The support system is in maintenance mode, thus unavailable at the moment. We will come back as soon as possible.',
+    'EMAIL_TEMPLATES_DESCRIPTION': 'Here you can edit the templates of the emails that will be sent to users. Remember that the double brackets curly braces indicate a variable value. For example, \'name\' represents the user\'s name.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',
@@ -186,5 +188,6 @@ export default {
     'DEPARTMENTS_UPDATED': 'Departments have been updated successfully.',
     'FAILED_EDIT_STAFF': 'An error occurred while trying to edit staff member.',
     'EMAIL_BANNED_SUCCESSFULLY': 'Email has been banned successfully',
-    'WILL_DELETE_STAFF': 'This staff member will be deleted and all its tickets will be unassigned.'
+    'WILL_DELETE_STAFF': 'This staff member will be deleted and all its tickets will be unassigned.',
+    'WILL_RECOVER_EMAIL_TEMPLATE': 'This email template will be recover to it\'s default value on this language.'
 };
diff --git a/client/src/lib-app/i18n.js b/client/src/lib-app/i18n.js
index 731f5a7f..ecf1fe89 100644
--- a/client/src/lib-app/i18n.js
+++ b/client/src/lib-app/i18n.js
@@ -8,6 +8,7 @@ let mf = new MessageFormat('en');
 let i18n = function (key, params = null) {
     let i18nKey = i18nData(key, store.getState().config.language);
     let message = mf.compile(i18nKey);
+    debugger;
 
     return message(params);
 };