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>

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",

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

@@ -1,238 +1,222 @@
-<script>
+<script setup>
-import { mapGetters } from 'vuex';
 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 {
+const getters = useStoreGetters();
-  components: {
+const store = useStore();
-    AddCanned,
+const { t } = useI18n();
-    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;
-    },
 
-    // Edit Modal Functions
+const showAddPopup = ref(false);
-    openEditPopup(response) {
+const loading = ref({});
-      this.showEditPopup = true;
+const showEditPopup = ref(false);
-      this.selectedResponse = response;
+const showDeleteConfirmationPopup = ref(false);
-    },
+const activeResponse = ref({});
-    hideEditPopup() {
+const cannedResponseAPI = ref({ message: '' });
-      this.showEditPopup = false;
-    },
 
-    // Delete Modal Functions
+const sortOrder = ref('asc');
-    openDeletePopup(response) {
+const records = computed(() =>
-      this.showDeleteConfirmationPopup = true;
+  getters.getSortedCannedResponses.value(sortOrder.value)
-      this.selectedResponse = response;
+);
-    },
+const uiFlags = computed(() => getters.getUIFlags.value);
-    closeDeletePopup() {
+
-      this.showDeleteConfirmationPopup = false;
+const deleteConfirmText = computed(
-    },
+  () =>
-    // Set loading and call Delete API
+    `${t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${activeResponse.value.short_code}`
-    confirmDeletion() {
+);
-      this.loading[this.selectedResponse.id] = true;
+
-      this.closeDeletePopup();
+const deleteRejectText = computed(
-      this.deleteCannedResponse(this.selectedResponse.id);
+  () =>
-    },
+    `${t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${activeResponse.value.short_code}`
-    deleteCannedResponse(id) {
+);
-      this.$store
+
-        .dispatch('deleteCannedResponse', id)
+const deleteMessage = computed(() => {
-        .then(() => {
+  return ` ${activeResponse.value.short_code} ? `;
-          this.showAlertMessage(
+});
-            this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE')
+
-          );
+const toggleSort = () => {
-        })
+  sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
-        .catch(error => {
+};
-          const errorMessage =
+
-            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
+const fetchCannedResponses = async () => {
-          this.showAlertMessage(errorMessage);
+  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
+    <BaseSettingsHeader
-      color-scheme="success"
+      :title="$t('CANNED_MGMT.HEADER')"
-      class-names="button--fixed-top"
+      :description="$t('CANNED_MGMT.DESCRIPTION')"
-      icon="add-circle"
+      :link-text="$t('CANNED_MGMT.LEARN_MORE')"
-      @click="openAddPopup()"
+      feature-name="canned_responses"
     >
-      {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
+      <template #actions>
-    </woot-button>
+        <woot-button
-
+          class="button nice rounded-md"
-    <!-- List Canned Response -->
+          icon="add-circle"
-    <div class="flex flex-row gap-4 p-8">
+          @click="openAddPopup"
-      <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"
         >
-          {{ $t('CANNED_MGMT.LIST.404') }}
+          {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
-        </p>
+        </woot-button>
-        <woot-loading-state
+      </template>
-          v-if="uiFlags.fetchingList"
+    </BaseSettingsHeader>
-          :message="$t('CANNED_MGMT.LOADING')"
-        />
 
-        <table
+    <div class="mt-6 flex-1">
-          v-if="!uiFlags.fetchingList && records.length"
+      <woot-loading-state
-          class="woot-table"
+        v-if="uiFlags.fetchingList"
-        >
+        :message="$t('CANNED_MGMT.LOADING')"
-          <thead>
+      />
-            <!-- Header -->
+      <p
-            <th
+        v-else-if="!records.length"
-              v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
+        class="flex flex-col items-center justify-center h-full text-base text-slate-600 dark:text-slate-300 py-8"
-              :key="thHeader"
+      >
-              class="last:text-right first:m-0 first:p-0"
+        {{ $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>
+              </span>
-
+              <fluent-icon
-              <button
+                class="ml-2"
-                v-if="thHeader === $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')"
+                :icon="sortOrder === 'desc' ? 'chevron-up' : 'chevron-down'"
-                class="flex items-center p-0 cursor-pointer"
+              />
-                @click="toggleSort"
+            </button>
-              >
+          </th>
-                <p class="uppercase">
+        </thead>
-                  {{ thHeader }}
+        <tbody
-                </p>
+          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-                <fluent-icon
+        >
-                  class="mb-2 ml-2"
+          <tr
-                  :icon="sortOrder === 'asc' ? 'chevron-up' : 'chevron-down'"
+            v-for="(cannedItem, index) in records"
-                />
+            :key="cannedItem.short_code"
-              </button>
+          >
-            </th>
+            <td
-          </thead>
+              class="py-4 pr-4 truncate max-w-xs font-medium"
-          <tbody>
+              :title="cannedItem.short_code"
-            <tr
-              v-for="(cannedItem, index) in records"
-              :key="cannedItem.short_code"
             >
-              <!-- Short Code  -->
+              {{ cannedItem.short_code }}
-              <td
+            </td>
-                class="w-[8.75rem] truncate max-w-[8.75rem]"
+            <td class="py-4 pr-4 md:break-all whitespace-normal">
-                :title="cannedItem.short_code"
+              {{ cannedItem.content }}
-              >
+            </td>
-                {{ cannedItem.short_code }}
+            <td class="py-4 flex justify-end gap-1">
-              </td>
+              <woot-button
-              <!-- Content -->
+                v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-              <td class="break-all whitespace-normal">
+                variant="smooth"
-                {{ cannedItem.content }}
+                size="tiny"
-              </td>
+                color-scheme="secondary"
-              <!-- Action Buttons -->
+                icon="edit"
-              <td class="flex justify-end gap-1 min-w-[12.5rem]">
+                @click="openEditPopup(cannedItem)"
-                <woot-button
+              />
-                  v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
+              <woot-button
-                  variant="smooth"
+                v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                  size="tiny"
+                variant="smooth"
-                  color-scheme="secondary"
+                color-scheme="alert"
-                  icon="edit"
+                size="tiny"
-                  @click="openEditPopup(cannedItem)"
+                icon="dismiss-circle"
-                />
+                class-names="grey-btn"
-                <woot-button
+                :is-loading="loading[cannedItem.id]"
-                  v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
+                @click="openDeletePopup(cannedItem, index)"
-                  variant="smooth"
+              />
-                  color-scheme="alert"
+            </td>
-                  size="tiny"
+          </tr>
-                  icon="dismiss-circle"
+        </tbody>
-                  class-names="grey-btn"
+      </table>
-                  :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>
     </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"
+        :id="activeResponse.id"
-        :edshort-code="selectedResponse.short_code"
+        :edshort-code="activeResponse.short_code"
-        :edcontent="selectedResponse.content"
+        :edcontent="activeResponse.content"
         :on-close="hideEditPopup"
       />
     </woot-modal>
 
-    <!-- Delete Canned Response -->
     <woot-delete-modal
       :show.sync="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"

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,
+      component: SettingsWrapper,
-      props: {
-        headerTitle: 'CANNED_MGMT.HEADER',
-        icon: 'chat-multiple',
-        showNewButton: false,
-      },
       children: [
         {
           path: '',

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;
   },

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 });
+  });
+});