From b2debdc912c5ae00d9b6d5c70a2c62a12f7a9640 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 20 Mar 2025 19:03:53 +0530
Subject: [PATCH] chore: Update buttons in canned response page (#11121)

---
 .../dashboard/settings/canned/AddCanned.vue   | 21 +++++++-----
 .../dashboard/settings/canned/EditCanned.vue  | 21 +++++++-----
 .../dashboard/settings/canned/Index.vue       | 33 +++++++++----------
 3 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index b710275c4..3ec03d5ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -3,14 +3,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Modal from '../../../../components/Modal.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 export default {
   name: 'AddCanned',
   components: {
-    WootSubmitButton,
+    NextButton,
     Modal,
     WootMessageEditor,
   },
@@ -118,18 +118,23 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <WootSubmitButton
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT')"
+            @click.prevent="onClose"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
               addCanned.showLoading
             "
-            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
-            :loading="addCanned.showLoading"
+            :is-loading="addCanned.showLoading"
           />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-          </button>
         </div>
       </form>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
index 2eb4f7465..26a590ed3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -4,12 +4,12 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Modal from '../../../../components/Modal.vue';
 
 export default {
   components: {
-    WootSubmitButton,
+    NextButton,
     Modal,
     WootMessageEditor,
   },
@@ -122,18 +122,23 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <WootSubmitButton
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT')"
+            @click.prevent="onClose"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
               editCanned.showLoading
             "
-            :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
-            :loading="editCanned.showLoading"
+            :is-loading="editCanned.showLoading"
           />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-          </button>
         </div>
       </form>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 46c8203e8..474439663 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -7,6 +7,8 @@ import { computed, onMounted, ref, defineOptions } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 defineOptions({
   name: 'CannedResponseSettings',
 });
@@ -124,13 +126,11 @@ const tableHeaders = computed(() => {
       feature-name="canned_responses"
     >
       <template #actions>
-        <woot-button
-          class="button nice rounded-md"
-          icon="add-circle"
+        <Button
+          icon="i-lucide-circle-plus"
+          :label="$t('CANNED_MGMT.HEADER_BTN_TXT')"
           @click="openAddPopup"
-        >
-          {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
-        </woot-button>
+        />
       </template>
     </BaseSettingsHeader>
 
@@ -188,21 +188,20 @@ const tableHeaders = computed(() => {
               {{ cannedItem.content }}
             </td>
             <td class="py-4 flex justify-end gap-1">
-              <woot-button
+              <Button
                 v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-                variant="smooth"
-                size="tiny"
-                color-scheme="secondary"
-                icon="edit"
+                icon="i-lucide-pen"
+                slate
+                xs
+                faded
                 @click="openEditPopup(cannedItem)"
               />
-              <woot-button
+              <Button
                 v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                variant="smooth"
-                color-scheme="alert"
-                size="tiny"
-                icon="dismiss-circle"
-                class-names="grey-btn"
+                icon="i-lucide-trash-2"
+                xs
+                ruby
+                faded
                 :is-loading="loading[cannedItem.id]"
                 @click="openDeletePopup(cannedItem, index)"
               />