fix: Welcome email copy changes and canned response API error handling [cw-1290] (#6905)

* fix: Welcome email copy changes and canned response API error handling

* Review fixes

* Uses mixin for alerts in canned page

* Typo fixes

* Copy changes

* Fixes broken tests

* Fixes review comments

* Fixes typo errors with mail template

* Removes unwanted case

* Fixes repetitive texts

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/i18n/locale/en/cannedMgmt.json

@@ -34,7 +34,7 @@
       },
       "API": {
         "SUCCESS_MESSAGE": "Canned Response added successfully",
-        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+        "ERROR_MESSAGE": "Could not create canned response, Please try again later"
       }
     },
     "EDIT": {
@@ -56,14 +56,14 @@
       "BUTTON_TEXT": "Edit",
       "API": {
         "SUCCESS_MESSAGE": "Canned Response updated successfully",
-        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+        "ERROR_MESSAGE": "Could not update canned response, Please try again later"
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "Delete",
       "API": {
         "SUCCESS_MESSAGE": "Canned response deleted successfully",
-        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+        "ERROR_MESSAGE": "Could not delete canned response, Please try again later"
       },
       "CONFIRM": {
         "TITLE": "Confirm Deletion",

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -5,7 +5,7 @@
         :header-title="$t('CANNED_MGMT.ADD.TITLE')"
         :header-content="$t('CANNED_MGMT.ADD.DESC')"
       />
-      <form class="row" @submit.prevent="addAgent()">
+      <form class="row" @submit.prevent="addCannedResponse()">
         <div class="medium-12 columns">
           <label :class="{ error: $v.shortCode.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
@@ -107,7 +107,7 @@ export default {
       this.$v.shortCode.$reset();
       this.$v.content.$reset();
     },
-    addAgent() {
+    addCannedResponse() {
       // Show loading on button
       this.addCanned.showLoading = true;
       // Make API Calls
@@ -123,9 +123,11 @@ export default {
           this.resetForm();
           this.onClose();
         })
-        .catch(() => {
+        .catch(error => {
           this.addCanned.showLoading = false;
-          this.showAlert(this.$t('CANNED_MGMT.ADD.API.ERROR_MESSAGE'));
+          const errorMessage =
+            error?.message || this.$t('CANNED_MGMT.ADD.API.ERROR_MESSAGE');
+          this.showAlert(errorMessage);
         });
     },
   },

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -57,6 +57,7 @@
 import { required, minLength } from 'vuelidate/lib/validators';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
+import alertMixin from 'shared/mixins/alertMixin';
 import Modal from '../../../../components/Modal';
 
 export default {
@@ -65,6 +66,7 @@ export default {
     Modal,
     WootMessageEditor,
   },
+  mixins: [alertMixin],
   props: {
     id: { type: Number, default: null },
     edcontent: { type: String, default: '' },
@@ -76,7 +78,6 @@ export default {
       editCanned: {
         showAlert: false,
         showLoading: false,
-        message: '',
       },
       shortCode: this.edshortCode,
       content: this.edcontent,
@@ -102,9 +103,6 @@ export default {
       this.$v.content.$touch();
       this.content = name;
     },
-    showAlert() {
-      bus.$emit('newToastMessage', this.editCanned.message);
-    },
     resetForm() {
       this.shortCode = '';
       this.content = '';
@@ -124,21 +122,17 @@ export default {
         .then(() => {
           // Reset Form, Show success message
           this.editCanned.showLoading = false;
-          this.editCanned.message = this.$t(
+          this.showAlert(this.$t('CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-            'CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'
-          );
-          this.showAlert();
           this.resetForm();
           setTimeout(() => {
             this.onClose();
           }, 10);
         })
-        .catch(() => {
+        .catch(error => {
           this.editCanned.showLoading = false;
-          this.editCanned.message = this.$t(
+          const errorMessage =
-            'CANNED_MGMT.EDIT.API.ERROR_MESSAGE'
+            error?.message || this.$t('CANNED_MGMT.EDIT.API.ERROR_MESSAGE');
-          );
+          this.showAlert(errorMessage);
-          this.showAlert();
         });
     },
   },

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -198,8 +198,10 @@ export default {
         .then(() => {
           this.showAlert(this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
         })
-        .catch(() => {
+        .catch(error => {
-          this.showAlert(this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE'));
+          const errorMessage =
+            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
+          this.showAlert(errorMessage);
         });
     },
   },

app/javascript/dashboard/store/modules/cannedResponse.js

@@ -1,3 +1,4 @@
+import { throwErrorMessage } from 'dashboard/store/utils/api';
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
 import CannedResponseAPI from '../../api/cannedResponse';
@@ -46,8 +47,10 @@ const actions = {
       const response = await CannedResponseAPI.create(cannedObj);
       commit(types.default.ADD_CANNED, response.data);
       commit(types.default.SET_CANNED_UI_FLAG, { creatingItem: false });
+      return response.data;
     } catch (error) {
       commit(types.default.SET_CANNED_UI_FLAG, { creatingItem: false });
+      return throwErrorMessage(error);
     }
   },
 
@@ -60,8 +63,10 @@ const actions = {
       const response = await CannedResponseAPI.update(id, updateObj);
       commit(types.default.EDIT_CANNED, response.data);
       commit(types.default.SET_CANNED_UI_FLAG, { updatingItem: false });
+      return response.data;
     } catch (error) {
       commit(types.default.SET_CANNED_UI_FLAG, { updatingItem: false });
+      return throwErrorMessage(error);
     }
   },
 
@@ -71,8 +76,10 @@ const actions = {
       await CannedResponseAPI.delete(id);
       commit(types.default.DELETE_CANNED, id);
       commit(types.default.SET_CANNED_UI_FLAG, { deletingItem: true });
+      return id;
     } catch (error) {
       commit(types.default.SET_CANNED_UI_FLAG, { deletingItem: true });
+      return throwErrorMessage(error);
     }
   },
 };

app/views/devise/mailer/confirmation_instructions.html.erb

@@ -1,22 +1,27 @@
-<p>Welcome, <%= @resource.name %>!</p>
+<p>Hi, <%= @resource.name %>!</p>
 
 <% account_user = @resource&.account_users&.first %>
+
 <% if account_user&.inviter.present? && @resource.unconfirmed_email.blank? %>
-  <p><%= account_user.inviter.name %>, with <%= account_user.account.name %>, has invited you to try out <%= global_config['BRAND_NAME'] || 'Chatwoot' %>! </p>
+  <p><%= account_user.inviter.name %>, with <%= account_user.account.name %>, has invited you to try out <%= global_config['BRAND_NAME'] || 'Chatwoot' %>.</p>
 <% end %>
 
 <% if @resource.confirmed? %>
-<p>You can login to your account through the link below:</p>
+  <p>You can login to your <%= global_config['BRAND_NAME'] || 'Chatwoot' %> account through the link below:</p>
 <% else %>
-<p>You can confirm your account email through the link below:</p>
+  <p>
+    Welcome to <%= global_config['BRAND_NAME'] || 'Chatwoot' %>! We have a suite of powerful tools ready for you to explore. Before that we quickly need to verify your email address to know it's really you.
+  </p>
+  <p>Please take a moment and click the link below and activate your account.</p>
 <% end %>
 
+
 <% if @resource.unconfirmed_email.present? %>
-<p><%= link_to 'Confirm my account', frontend_url('auth/confirmation', confirmation_token: @token) %></p>
+  <p><%= link_to 'Confirm my account', frontend_url('auth/confirmation', confirmation_token: @token) %></p>
 <% elsif @resource.confirmed? %>
-<p><%= link_to 'Login to my account', frontend_url('auth/sign_in') %></p>
+  <p><%= link_to 'Login to my account', frontend_url('auth/sign_in') %></p>
 <% elsif account_user&.inviter.present? %>
-<p><%= link_to 'Confirm my account', frontend_url('auth/password/edit', reset_password_token: @resource.send(:set_reset_password_token)) %></p>
+  <p><%= link_to 'Confirm my account', frontend_url('auth/password/edit', reset_password_token: @resource.send(:set_reset_password_token)) %></p>
 <% else %>
-<p><%= link_to 'Confirm my account', frontend_url('auth/confirmation', confirmation_token: @token) %></p>
+  <p><%= link_to 'Confirm my account', frontend_url('auth/confirmation', confirmation_token: @token) %></p>
 <% end %>

spec/mailers/confirmation_instructions_spec.rb

@@ -22,7 +22,7 @@ RSpec.describe 'Confirmation Instructions', type: :mailer do
     end
 
     it 'uses the user\'s name' do
-      expect(mail.body).to match("Welcome, #{CGI.escapeHTML(confirmable_user.name)}!")
+      expect(mail.body).to match("Hi #{CGI.escapeHTML(confirmable_user.name)},")
     end
 
     it 'does not refer to the inviter and their account' do
@@ -39,7 +39,7 @@ RSpec.describe 'Confirmation Instructions', type: :mailer do
 
       it 'refers to the inviter and their account' do
         expect(mail.body).to match(
-          "#{CGI.escapeHTML(inviter_val.name)}, with #{CGI.escapeHTML(account.name)}, has invited you to try out Chatwoot!"
+          "#{CGI.escapeHTML(inviter_val.name)}, with #{CGI.escapeHTML(account.name)}, has invited you to try out Chatwoot."
         )
       end