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>
2025-11-04 04:57:51 +00:00 · 2023-05-10 15:55:48 +05:30
parent 520bdabefe
commit 07aaa046c1
7 changed files with 42 additions and 32 deletions
--- a/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
+++ b/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",
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/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);
        });
    },
  },
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/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(
-            'CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'
-          );
-          this.showAlert();
+          this.showAlert(this.$t('CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'));
          this.resetForm();
          setTimeout(() => {
            this.onClose();
          }, 10);
        })
-        .catch(() => {
+        .catch(error => {
          this.editCanned.showLoading = false;
-          this.editCanned.message = this.$t(
-            'CANNED_MGMT.EDIT.API.ERROR_MESSAGE'
-          );
-          this.showAlert();
+          const errorMessage =
+            error?.message || this.$t('CANNED_MGMT.EDIT.API.ERROR_MESSAGE');
+          this.showAlert(errorMessage);
        });
    },
  },
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/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(() => {
-          this.showAlert(this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE'));
+        .catch(error => {
+          const errorMessage =
+            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
+          this.showAlert(errorMessage);
        });
    },
  },
--- a/app/javascript/dashboard/store/modules/cannedResponse.js
+++ b/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);
    }
  },
 };
--- a/app/views/devise/mailer/confirmation_instructions.html.erb
+++ b/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 %>
--- a/spec/mailers/confirmation_instructions_spec.rb
+++ b/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