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

2022-09-01 13:27:08 +05:30
parent 6e945dd61e
commit f4fc53b425
19 changed files with 158 additions and 48 deletions
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/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')} ${
-        this.contact.name
-      } ?`;
+      return ` ${this.contact.name}?`;
    },
  },
  methods: {
--- a/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
+++ b/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(
-        'FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE'
-      )} ${this.activeCustomView && this.activeCustomView.name} ?`;
+      return ` ${this.activeCustomView && this.activeCustomView.name}?`;
    },
    deleteConfirmText() {
      return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.YES')}`;
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/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')"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/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');
    },
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/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,
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ b/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 ||
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ b/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 ||
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/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')} ${
-        this.currentAgent.name
-      } ?`;
+      return ` ${this.currentAgent.name}?`;
    },
  },
  mounted() {
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/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')} ${
-        this.selectedResponse.name
-      } ?`;
+      return ` ${this.selectedResponse.name}?`;
    },
  },
  mounted() {
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/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')} ${
-        this.selectedResponse.short_code
-      } ?`;
+      return ` ${this.selectedResponse.short_code}?`;
    },
  },
  mounted() {
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/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')} ${
-        this.selectedResponse.title
-      } ?`;
+      return ` ${this.selectedResponse.title}?`;
    },
  },
  mounted() {