feat: Adds the ability to delete a portal (#5305)

app/javascript/dashboard/api/helpCenter/portals.js

@@ -9,6 +9,10 @@ class PortalsAPI extends ApiClient {
   updatePortal({ portalSlug, params }) {
     return axios.patch(`${this.url}/${portalSlug}`, params);
   }
+
+  deletePortal(portalSlug) {
+    return axios.delete(`${this.url}/${portalSlug}`);
+  }
 }
 
 export default PortalsAPI;

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -85,7 +85,7 @@
 
   .modal-footer {
     @include flex;
-    @include flex-align($x: flex-start, $y: middle);
+    @include flex-align($x: flex-end, $y: middle);
     padding: $space-small $zero;
 
     button {

app/javascript/dashboard/components/ModalHeader.vue

@@ -6,6 +6,9 @@
     </h2>
     <p v-if="headerContent" class="small-12 column wrap-content">
       {{ headerContent }}
+      <span v-if="headerContentValue" class="content-value">
+        {{ headerContentValue }}
+      </span>
     </p>
     <slot />
   </div>
@@ -22,6 +25,10 @@ export default {
       type: String,
       default: '',
     },
+    headerContentValue: {
+      type: String,
+      default: '',
+    },
     headerImage: {
       type: String,
       default: '',
@@ -32,5 +39,8 @@ export default {
 <style scoped lang="scss">
 .wrap-content {
   word-wrap: break-word;
+  .content-value {
+    font-weight: var(--font-weight-bold);
+  }
 }
 </style>

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -5,9 +5,10 @@
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
       <div v-if="isHelpCenterSidebar" class="submenu-icons">
+        <!-- Hidden since this is in V2
         <div class="submenu-icon">
           <fluent-icon icon="search" size="16" />
-        </div>
+        </div> -->
         <div class="submenu-icon" @click="onClickOpen">
           <fluent-icon icon="add" size="16" />
         </div>

app/javascript/dashboard/components/ui/WootButton.vue

@@ -14,7 +14,9 @@
       :icon="icon"
       :icon-size="iconSize"
     />
-    <span v-if="$slots.default" class="button__content"><slot /></span>
+    <span v-if="$slots.default" class="button__content">
+      <slot />
+    </span>
   </button>
 </template>
 <script>

app/javascript/dashboard/components/widgets/modal/DeleteModal.vue

@@ -1,13 +1,22 @@
 <template>
   <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header :header-title="title" :header-content="message" />
+    <woot-modal-header
+      :header-title="title"
+      :header-content="message"
+      :header-content-value="messageValue"
+    />
     <div class="modal-footer delete-item">
-      <button class="alert button nice text-truncate" @click="onConfirm">
+      <woot-button variant="clear" class="action-button" @click="onClose">
-        {{ confirmText }}
-      </button>
-      <button class="button clear text-truncate" @click="onClose">
         {{ rejectText }}
-      </button>
+      </woot-button>
+      <woot-button
+        color-scheme="alert"
+        class="action-button"
+        variant="smooth"
+        @click="onConfirm"
+      >
+        {{ confirmText }}
+      </woot-button>
     </div>
   </modal>
 </template>
@@ -25,8 +34,14 @@ export default {
     onConfirm: { type: Function, default: () => {} },
     title: { type: String, default: '' },
     message: { type: String, default: '' },
+    messageValue: { type: String, default: '' },
     confirmText: { type: String, default: '' },
     rejectText: { type: String, default: '' },
   },
 };
 </script>
+<style lang="scss" scoped>
+.action-button {
+  max-width: var(--space-giga);
+}
+</style>

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

@@ -84,7 +84,8 @@
             "COUNT_LABEL": "articles",
             "ADD": "Add locale",
             "VISIT": "Visit site",
-            "SETTINGS": "Settings"
+            "SETTINGS": "Settings",
+            "DELETE": "Delete"
           },
           "PORTAL_CONFIG": {
             "TITLE": "Portal Configurations",
@@ -109,6 +110,16 @@
               "DEFAULT_LOCALE": "Default"
             }
           }
+        },
+        "DELETE_PORTAL": {
+          "TITLE": "Delete portal",
+          "MESSAGE": "Are you sure you want to delete this portal",
+          "YES": "Yes, delete portal",
+          "NO": "No, keep portal",
+          "API": {
+            "DELETE_SUCCESS": "Portal deleted successfully",
+            "DELETE_ERROR": "Error while deleting portal"
+          }
         }
       },
       "ADD": {

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -131,7 +131,8 @@
       :on-close="closeDelete"
       :on-confirm="confirmDeletion"
       :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
-      :message="confirmDeleteMessage"
+      :message="$t('DELETE_CONTACT.CONFIRM.MESSAGE')"
+      :message-value="confirmDeleteMessage"
       :confirm-text="$t('DELETE_CONTACT.CONFIRM.YES')"
       :reject-text="$t('DELETE_CONTACT.CONFIRM.NO')"
     />
@@ -215,9 +216,7 @@ export default {
     },
     // Delete Modal
     confirmDeleteMessage() {
-      return `${this.$t('DELETE_CONTACT.CONFIRM.MESSAGE')} ${
+      return ` ${this.contact.name}?`;
-        this.contact.name
-      } ?`;
     },
   },
   methods: {

app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue

@@ -6,7 +6,8 @@
       :on-close="closeDeletePopup"
       :on-confirm="deleteSavedCustomViews"
       :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"
-      :message="deleteMessage"
+      :message="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
@@ -51,9 +52,7 @@ export default {
       return '';
     },
     deleteMessage() {
-      return `${this.$t(
+      return ` ${this.activeCustomView && this.activeCustomView.name}?`;
-        'FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE'
-      )} ${this.activeCustomView && this.activeCustomView.name} ?`;
     },
     deleteConfirmText() {
       return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.YES')}`;

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue

@@ -26,6 +26,7 @@
       >
         {{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
       </woot-button>
+      <!-- Hidden since this is in V2
       <woot-button
         class-names="article--buttons"
         icon="add"
@@ -35,7 +36,7 @@
         @click="onClickAdd"
       >
         {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
-      </woot-button>
+      </woot-button> -->
       <woot-button
         v-if="!isSidebarOpen"
         v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue

@@ -6,7 +6,9 @@
         <header>
           <div>
             <div class="title-status--wrap">
-              <h2 class="portal-title block-title">{{ portal.name }}</h2>
+              <h2 class="portal-title block-title">
+                {{ portal.name }}
+              </h2>
               <Label
                 :title="status"
                 :color-scheme="labelColor"
@@ -59,6 +61,17 @@
               color-scheme="secondary"
               @click="openSettings"
             />
+            <woot-button
+              v-tooltip.top-end="
+                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.DELETE')
+              "
+              variant="hollow"
+              color-scheme="alert"
+              size="small"
+              icon="delete"
+              class="header-action-buttons"
+              @click="onClickOpenDeleteModal(portal)"
+            />
           </div>
         </header>
         <div class="portal-locales">
@@ -77,7 +90,9 @@
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
                   )
                 }}</label>
-                <span class="text-block-title">{{ portal.name }}</span>
+                <span class="text-block-title">
+                  {{ portal.name }}
+                </span>
               </div>
               <div class="configuration-item">
                 <label>{{
@@ -85,7 +100,9 @@
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
                   )
                 }}</label>
-                <span class="text-block-title">{{ portal.custom_domain }}</span>
+                <span class="text-block-title">
+                  {{ portal.custom_domain }}
+                </span>
               </div>
             </div>
             <div class="configuration-items">
@@ -95,7 +112,9 @@
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
                   )
                 }}</label>
-                <span class="text-block-title">{{ portal.slug }}</span>
+                <span class="text-block-title">
+                  {{ portal.slug }}
+                </span>
               </div>
               <div class="configuration-item">
                 <label>{{
@@ -103,7 +122,9 @@
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
                   )
                 }}</label>
-                <span class="text-block-title">{{ portal.page_title }}</span>
+                <span class="text-block-title">
+                  {{ portal.page_title }}
+                </span>
               </div>
             </div>
             <div class="configuration-items">
@@ -126,7 +147,9 @@
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
                   )
                 }}</label>
-                <span class="text-block-title">{{ portal.header_text }}</span>
+                <span class="text-block-title">
+                  {{ portal.header_text }}
+                </span>
               </div>
             </div>
           </div>
@@ -148,6 +171,16 @@
         </div>
       </div>
     </div>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="onClickDeletePortal"
+      :title="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.TITLE')"
+      :message="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.MESSAGE')"
+      :message-value="deleteMessageValue"
+      :confirm-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.YES')"
+      :reject-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.NO')"
+    />
   </div>
 </template>
 
@@ -155,12 +188,14 @@
 import thumbnail from 'dashboard/components/widgets/Thumbnail';
 import Label from 'dashboard/components/ui/Label';
 import LocaleItemTable from './PortalListItemTable';
+import alertMixin from 'shared/mixins/alertMixin';
 export default {
   components: {
     thumbnail,
     Label,
     LocaleItemTable,
   },
+  mixins: [alertMixin],
   props: {
     portal: {
       type: Object,
@@ -172,6 +207,13 @@ export default {
       values: ['archived', 'draft', 'published'],
     },
   },
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+      alertMessage: '',
+      selectedPortalForDelete: {},
+    };
+  },
   computed: {
     labelColor() {
       switch (this.status) {
@@ -181,6 +223,10 @@ export default {
           return 'success';
       }
     },
+    // Delete portal modal
+    deleteMessageValue() {
+      return ` ${this.selectedPortalForDelete.name}?`;
+    },
 
     locales() {
       return this.portal ? this.portal.config.allowed_locales : [];
@@ -196,6 +242,34 @@ export default {
     openSettings() {
       this.navigateToPortalEdit();
     },
+    onClickOpenDeleteModal(portal) {
+      this.selectedPortalForDelete = portal;
+      this.showDeleteConfirmationPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    async onClickDeletePortal() {
+      const { slug } = this.selectedPortalForDelete;
+      try {
+        await this.$store.dispatch('portals/delete', {
+          portalSlug: slug,
+        });
+        this.selectedPortalForDelete = {};
+        this.closeDeletePopup();
+        this.alertMessage = this.$t(
+          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS'
+        );
+      } catch (error) {
+        this.alertMessage =
+          error?.message ||
+          this.$t(
+            'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
+          );
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
     swapLocale() {
       this.$emit('swap');
     },

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue

@@ -33,6 +33,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
 import PortalListItem from '../../components/PortalListItem';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState';
@@ -44,6 +45,7 @@ export default {
     Spinner,
     AddPortal,
   },
+  mixins: [alertMixin],
   data() {
     return {
       isAddModalOpen: false,

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue

@@ -120,9 +120,6 @@ export default {
             allowed_locales: ['en'],
           },
         });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE'
-        );
       } catch (error) {
         this.alertMessage =
           error?.message ||

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue

@@ -17,6 +17,7 @@
           </label>
           <div class="logo-container">
             <thumbnail :username="name" size="56" variant="square" />
+            <!-- Hidden since this is in V2
             <woot-button
               class="upload-button"
               variant="smooth"
@@ -25,7 +26,7 @@
               size="small"
             >
               {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.UPLOAD_BUTTON') }}
-            </woot-button>
+            </woot-button> -->
           </div>
           <p class="logo-help--text">
             {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
@@ -145,9 +146,6 @@ export default {
             custom_domain: this.domain,
           },
         });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC'
-        );
       } catch (error) {
         this.alertMessage =
           error?.message ||

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

@@ -117,7 +117,8 @@
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('AGENT_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="deleteMessage"
+      :message="$t('AGENT_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
@@ -167,9 +168,7 @@ export default {
       }`;
     },
     deleteMessage() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+      return ` ${this.currentAgent.name}?`;
-        this.currentAgent.name
-      } ?`;
     },
   },
   mounted() {

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

@@ -98,7 +98,8 @@
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="deleteMessage"
+      :message="$t('AUTOMATION.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
@@ -165,9 +166,7 @@ export default {
       }`;
     },
     deleteMessage() {
-      return `${this.$t('AUTOMATION.DELETE.CONFIRM.MESSAGE')} ${
+      return ` ${this.selectedResponse.name}?`;
-        this.selectedResponse.name
-      } ?`;
     },
   },
   mounted() {

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

@@ -99,7 +99,8 @@
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('CANNED_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="deleteMessage"
+      :message="$t('CANNED_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
@@ -144,9 +145,7 @@ export default {
       }`;
     },
     deleteMessage() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+      return ` ${this.selectedResponse.short_code}?`;
-        this.selectedResponse.short_code
-      } ?`;
     },
   },
   mounted() {

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

@@ -91,7 +91,8 @@
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="deleteMessage"
+      :message="$t('LABEL_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
@@ -136,9 +137,7 @@ export default {
       }`;
     },
     deleteMessage() {
-      return `${this.$t('LABEL_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+      return ` ${this.selectedResponse.title}?`;
-        this.selectedResponse.title
-      } ?`;
     },
   },
   mounted() {

app/javascript/dashboard/store/modules/helpCenterPortals/actions.js

@@ -76,6 +76,7 @@ export const actions = {
       });
     }
   },
+
   updatePortal: async ({ commit }, portal) => {
     commit(types.UPDATE_PORTAL_ENTRY, portal);
   },