feat: Update the design for canned responses (#9903)

This is the continuation of the design update series. Canned responses listing page is rewritten with the design change. --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
2025-10-29 18:22:53 +00:00 · 2024-08-07 09:43:47 -07:00
parent 646cfb97e7
commit 80a90d9d8c
5 changed files with 251 additions and 215 deletions
--- a/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
@@ -1,15 +1,20 @@
 {
  "CANNED_MGMT": {
    "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
    "HEADER_BTN_TXT": "Add canned response",
    "LOADING": "Fetching canned responses...",
    "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
    "LIST": {
      "404": "There are no canned responses available in this account.",
      "TITLE": "Manage canned responses",
      "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
-      "TABLE_HEADER": ["Short code", "Content", "Actions"]
+      "TABLE_HEADER": [
+        "Short code",
+        "Content",
+        "Actions"
+      ]
    },
    "ADD": {
      "TITLE": "Add canned response",
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -1,238 +1,222 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { useAlert } from 'dashboard/composables';
 import AddCanned from './AddCanned.vue';
 import EditCanned from './EditCanned.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';

-export default {
-  components: {
-    AddCanned,
-    EditCanned,
-  },
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showEditPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedResponse: {},
-      cannedResponseAPI: {
-        message: '',
-      },
-      sortOrder: 'asc',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'getCannedResponses',
-      uiFlags: 'getUIFlags',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedResponse.short_code
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${
-        this.selectedResponse.short_code
-      }`;
-    },
-    deleteMessage() {
-      return ` ${this.selectedResponse.short_code}?`;
-    },
-  },
-  mounted() {
-    // Fetch API Call
-    this.$store.dispatch('getCannedResponse').then(() => {
-      this.toggleSort();
-    });
-  },
-  methods: {
-    toggleSort() {
-      this.records.sort((a, b) => {
-        if (this.sortOrder === 'asc') {
-          return a.short_code.localeCompare(b.short_code);
-        }
-        return b.short_code.localeCompare(a.short_code);
-      });
-      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-    },
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.loading[this.selectedResponse.id] = false;
-      this.selectedResponse = {};
-      // Show message
-      this.cannedResponseAPI.message = message;
-      useAlert(message);
-    },
-    // Edit Function
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
+const getters = useStoreGetters();
+const store = useStore();
+const { t } = useI18n();

-    // Edit Modal Functions
-    openEditPopup(response) {
-      this.showEditPopup = true;
-      this.selectedResponse = response;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
+const showAddPopup = ref(false);
+const loading = ref({});
+const showEditPopup = ref(false);
+const showDeleteConfirmationPopup = ref(false);
+const activeResponse = ref({});
+const cannedResponseAPI = ref({ message: '' });

-    // Delete Modal Functions
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedResponse = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    // Set loading and call Delete API
-    confirmDeletion() {
-      this.loading[this.selectedResponse.id] = true;
-      this.closeDeletePopup();
-      this.deleteCannedResponse(this.selectedResponse.id);
-    },
-    deleteCannedResponse(id) {
-      this.$store
-        .dispatch('deleteCannedResponse', id)
-        .then(() => {
-          this.showAlertMessage(
-            this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE')
-          );
-        })
-        .catch(error => {
-          const errorMessage =
-            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
-          this.showAlertMessage(errorMessage);
-        });
-    },
-  },
+const sortOrder = ref('asc');
+const records = computed(() =>
+  getters.getSortedCannedResponses.value(sortOrder.value)
+);
+const uiFlags = computed(() => getters.getUIFlags.value);
+
+const deleteConfirmText = computed(
+  () =>
+    `${t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${activeResponse.value.short_code}`
+);
+
+const deleteRejectText = computed(
+  () =>
+    `${t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${activeResponse.value.short_code}`
+);
+
+const deleteMessage = computed(() => {
+  return ` ${activeResponse.value.short_code} ? `;
+});
+
+const toggleSort = () => {
+  sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
+};
+
+const fetchCannedResponses = async () => {
+  try {
+    await store.dispatch('getCannedResponse');
+  } catch (error) {
+    // Ignore Error
+  }
+};
+
+onMounted(() => {
+  fetchCannedResponses();
+});
+
+const showAlertMessage = message => {
+  loading[activeResponse.value.id] = false;
+  activeResponse.value = {};
+  cannedResponseAPI.value.message = message;
+  useAlert(message);
+};
+
+const openAddPopup = () => {
+  showAddPopup.value = true;
+};
+const hideAddPopup = () => {
+  showAddPopup.value = false;
+};
+
+const openEditPopup = response => {
+  showEditPopup.value = true;
+  activeResponse.value = response;
+};
+const hideEditPopup = () => {
+  showEditPopup.value = false;
+};
+
+const openDeletePopup = response => {
+  showDeleteConfirmationPopup.value = true;
+  activeResponse.value = response;
+};
+
+const closeDeletePopup = () => {
+  showDeleteConfirmationPopup.value = false;
+};
+
+const deleteCannedResponse = async id => {
+  try {
+    await store.dispatch('deleteCannedResponse', id);
+    showAlertMessage(t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.message || t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
+    showAlertMessage(errorMessage);
+  }
+};
+
+const confirmDeletion = () => {
+  loading[activeResponse.value.id] = true;
+  closeDeletePopup();
+  deleteCannedResponse(activeResponse.value.id);
 };
 </script>

 <template>
  <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
+    <BaseSettingsHeader
+      :title="$t('CANNED_MGMT.HEADER')"
+      :description="$t('CANNED_MGMT.DESCRIPTION')"
+      :link-text="$t('CANNED_MGMT.LEARN_MORE')"
+      feature-name="canned_responses"
    >
-      {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-
-    <!-- List Canned Response -->
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full xl:w-3/5">
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex flex-col items-center justify-center h-full"
+      <template #actions>
+        <woot-button
+          class="button nice rounded-md"
+          icon="add-circle"
+          @click="openAddPopup"
        >
-          {{ $t('CANNED_MGMT.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('CANNED_MGMT.LOADING')"
-        />
+          {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
+        </woot-button>
+      </template>
+    </BaseSettingsHeader>

-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table"
-        >
-          <thead>
-            <!-- Header -->
-            <th
-              v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
-              :key="thHeader"
-              class="last:text-right first:m-0 first:p-0"
+    <div class="mt-6 flex-1">
+      <woot-loading-state
+        v-if="uiFlags.fetchingList"
+        :message="$t('CANNED_MGMT.LOADING')"
+      />
+      <p
+        v-else-if="!records.length"
+        class="flex flex-col items-center justify-center h-full text-base text-slate-600 dark:text-slate-300 py-8"
+      >
+        {{ $t('CANNED_MGMT.LIST.404') }}
+      </p>
+      <table
+        v-else
+        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <thead>
+          <th
+            v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
+            :key="thHeader"
+            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+          >
+            <span v-if="thHeader !== $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')">
+              {{ thHeader }}
+            </span>
+
+            <button
+              v-if="thHeader === $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')"
+              class="flex items-center p-0 cursor-pointer"
+              @click="toggleSort"
            >
-              <p v-if="thHeader !== $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')">
+              <span class="mb-0">
                {{ thHeader }}
-              </p>
-
-              <button
-                v-if="thHeader === $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')"
-                class="flex items-center p-0 cursor-pointer"
-                @click="toggleSort"
-              >
-                <p class="uppercase">
-                  {{ thHeader }}
-                </p>
-                <fluent-icon
-                  class="mb-2 ml-2"
-                  :icon="sortOrder === 'asc' ? 'chevron-up' : 'chevron-down'"
-                />
-              </button>
-            </th>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(cannedItem, index) in records"
-              :key="cannedItem.short_code"
+              </span>
+              <fluent-icon
+                class="ml-2"
+                :icon="sortOrder === 'desc' ? 'chevron-up' : 'chevron-down'"
+              />
+            </button>
+          </th>
+        </thead>
+        <tbody
+          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+        >
+          <tr
+            v-for="(cannedItem, index) in records"
+            :key="cannedItem.short_code"
+          >
+            <td
+              class="py-4 pr-4 truncate max-w-xs font-medium"
+              :title="cannedItem.short_code"
            >
-              <!-- Short Code  -->
-              <td
-                class="w-[8.75rem] truncate max-w-[8.75rem]"
-                :title="cannedItem.short_code"
-              >
-                {{ cannedItem.short_code }}
-              </td>
-              <!-- Content -->
-              <td class="break-all whitespace-normal">
-                {{ cannedItem.content }}
-              </td>
-              <!-- Action Buttons -->
-              <td class="flex justify-end gap-1 min-w-[12.5rem]">
-                <woot-button
-                  v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  icon="edit"
-                  @click="openEditPopup(cannedItem)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  :is-loading="loading[cannedItem.id]"
-                  @click="openDeletePopup(cannedItem, index)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 xl:block">
-        <span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')" />
-      </div>
+              {{ cannedItem.short_code }}
+            </td>
+            <td class="py-4 pr-4 md:break-all whitespace-normal">
+              {{ cannedItem.content }}
+            </td>
+            <td class="py-4 flex justify-end gap-1">
+              <woot-button
+                v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
+                variant="smooth"
+                size="tiny"
+                color-scheme="secondary"
+                icon="edit"
+                @click="openEditPopup(cannedItem)"
+              />
+              <woot-button
+                v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
+                variant="smooth"
+                color-scheme="alert"
+                size="tiny"
+                icon="dismiss-circle"
+                class-names="grey-btn"
+                :is-loading="loading[cannedItem.id]"
+                @click="openDeletePopup(cannedItem, index)"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
    </div>
-    <!-- Add Agent -->
+
    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
      <AddCanned :on-close="hideAddPopup" />
    </woot-modal>

-    <!-- Edit Canned Response -->
    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
      <EditCanned
        v-if="showEditPopup"
-        :id="selectedResponse.id"
-        :edshort-code="selectedResponse.short_code"
-        :edcontent="selectedResponse.content"
+        :id="activeResponse.id"
+        :edshort-code="activeResponse.short_code"
+        :edcontent="activeResponse.content"
        :on-close="hideEditPopup"
      />
    </woot-modal>

-    <!-- Delete Canned Response -->
    <woot-delete-modal
      :show.sync="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
@@ -1,18 +1,13 @@
 import { frontendURL } from '../../../../helper/URLHelper';

-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const CannedHome = () => import('./Index.vue');

 export default {
  routes: [
    {
      path: frontendURL('accounts/:accountId/settings/canned-response'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CANNED_MGMT.HEADER',
-        icon: 'chat-multiple',
-        showNewButton: false,
-      },
+      component: SettingsWrapper,
      children: [
        {
          path: '',
--- a/app/javascript/dashboard/store/modules/cannedResponse.js
+++ b/app/javascript/dashboard/store/modules/cannedResponse.js
@@ -18,6 +18,15 @@ const getters = {
  getCannedResponses(_state) {
    return _state.records;
  },
+  getSortedCannedResponses(_state) {
+    return sortOrder =>
+      [..._state.records].sort((a, b) => {
+        if (sortOrder === 'asc') {
+          return a.short_code.localeCompare(b.short_code);
+        }
+        return b.short_code.localeCompare(a.short_code);
+      });
+  },
  getUIFlags(_state) {
    return _state.uiFlags;
  },
--- a/app/javascript/dashboard/store/modules/specs/cannedResponses/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/cannedResponses/getters.spec.js
@@ -0,0 +1,43 @@
+import CannedResponses from '../../cannedResponse';
+
+const CANNED_RESPONSES = [
+  { short_code: 'hello', content: 'Hi ' },
+  { short_code: 'ask', content: 'Ask questions' },
+  { short_code: 'greet', content: 'Good morning' },
+];
+
+const getters = CannedResponses.getters;
+
+describe('#getCannedResponses', () => {
+  it('returns canned responses', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getCannedResponses(state)).toEqual(CANNED_RESPONSES);
+  });
+});
+
+describe('#getSortedCannedResponses', () => {
+  it('returns sort canned responses in ascending order', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getSortedCannedResponses(state)('asc')).toEqual([
+      CANNED_RESPONSES[1],
+      CANNED_RESPONSES[2],
+      CANNED_RESPONSES[0],
+    ]);
+  });
+
+  it('returns sort canned responses in descending order', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getSortedCannedResponses(state)('desc')).toEqual([
+      CANNED_RESPONSES[0],
+      CANNED_RESPONSES[2],
+      CANNED_RESPONSES[1],
+    ]);
+  });
+});
+
+describe('#getUIFlags', () => {
+  it('returns uiFlags', () => {
+    const state = { uiFlags: { isFetching: true } };
+    expect(getters.getUIFlags(state)).toEqual({ isFetching: true });
+  });
+});