feat: Add a dropdown to change status to "bot" (#1997)

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -1,29 +1,86 @@
 <template>
-  <button
-    type="button"
-    class="button resolve--button"
-    :class="buttonClass"
-    @click="toggleStatus"
-  >
-    <i v-if="!isLoading" class="icon" :class="buttonIconClass" />
-    <spinner v-if="isLoading" />
-    {{ currentStatus }}
-  </button>
+  <div class="resolve-actions">
+    <div class="button-group">
+      <woot-button
+        v-if="isOpen"
+        class-names="resolve"
+        color-scheme="success"
+        icon="ion-checkmark"
+        :is-loading="isLoading"
+        @click="() => toggleStatus(STATUS_TYPE.RESOLVED)"
+      >
+        {{ this.$t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-else-if="isResolved"
+        class-names="resolve"
+        color-scheme="warning"
+        icon="ion-refresh"
+        :is-loading="isLoading"
+        @click="() => toggleStatus(STATUS_TYPE.OPEN)"
+      >
+        {{ this.$t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-else-if="isBot"
+        class-names="resolve"
+        color-scheme="primary"
+        icon="ion-person"
+        :is-loading="isLoading"
+        @click="() => toggleStatus(STATUS_TYPE.OPEN)"
+      >
+        {{ this.$t('CONVERSATION.HEADER.OPEN_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-if="showDropDown"
+        class="icon--small"
+        :color-scheme="buttonClass"
+        :disabled="isLoading"
+        icon="ion-arrow-down-b"
+        @click="openDropdown"
+      >
+      </woot-button>
+    </div>
+    <div
+      v-if="showDropdown"
+      v-on-clickaway="closeDropdown"
+      class="dropdown-pane dropdown-pane--open"
+    >
+      <woot-dropdown-menu>
+        <woot-dropdown-item v-if="!isBot">
+          <woot-button
+            variant="clear"
+            @click="() => toggleStatus(STATUS_TYPE.BOT)"
+          >
+            {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.OPEN_BOT') }}
+          </woot-button>
+        </woot-dropdown-item>
+      </woot-dropdown-menu>
+    </div>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner';
+import { mixin as clickaway } from 'vue-clickaway';
+import alertMixin from 'shared/mixins/alertMixin';
+
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import wootConstants from '../../constants';
 
 export default {
   components: {
-    Spinner,
+    WootDropdownItem,
+    WootDropdownMenu,
   },
+  mixins: [clickaway, alertMixin],
   props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {
       isLoading: false,
+      showDropdown: false,
+      STATUS_TYPE: wootConstants.STATUS_TYPE,
     };
   },
   computed: {
@@ -33,26 +90,60 @@ export default {
     isOpen() {
       return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN;
     },
-    currentStatus() {
-      return this.isOpen
-        ? this.$t('CONVERSATION.HEADER.RESOLVE_ACTION')
-        : this.$t('CONVERSATION.HEADER.REOPEN_ACTION');
+    isBot() {
+      return this.currentChat.status === wootConstants.STATUS_TYPE.BOT;
+    },
+    isResolved() {
+      return this.currentChat.status === wootConstants.STATUS_TYPE.RESOLVED;
     },
     buttonClass() {
-      return this.isOpen ? 'success' : 'warning';
+      if (this.isBot) return 'primary';
+      if (this.isOpen) return 'success';
+      if (this.isResolved) return 'warning';
+      return '';
     },
-    buttonIconClass() {
-      return this.isOpen ? 'ion-checkmark' : 'ion-refresh';
+    showDropDown() {
+      return !this.isBot;
     },
   },
   methods: {
-    toggleStatus() {
+    closeDropdown() {
+      this.showDropdown = false;
+    },
+    openDropdown() {
+      this.showDropdown = true;
+    },
+    toggleStatus(status) {
+      this.closeDropdown();
       this.isLoading = true;
-      this.$store.dispatch('toggleStatus', this.currentChat.id).then(() => {
-        bus.$emit('newToastMessage', this.$t('CONVERSATION.CHANGE_STATUS'));
-        this.isLoading = false;
-      });
+      this.$store
+        .dispatch('toggleStatus', {
+          conversationId: this.currentChat.id,
+          status,
+        })
+        .then(() => {
+          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
+          this.isLoading = false;
+        });
     },
   },
 };
 </script>
+<style lang="scss" scoped>
+.resolve-actions {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.dropdown-pane {
+  left: unset;
+  top: 4.2rem;
+  margin-top: var(--space-micro);
+  right: 0;
+  max-width: 20rem;
+}
+.icon--small::v-deep .icon {
+  font-size: var(--font-size-small);
+}
+</style>