feat: End conversation from widget (#3660)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/HeaderActions.vue

@@ -1,5 +1,13 @@
 <template>
   <div v-if="showHeaderActions" class="actions flex items-center">
+    <button
+      v-if="conversationStatus === 'open'"
+      class="button transparent compact"
+      :title="$t('END_CONVERSATION')"
+      @click="resolveConversation"
+    >
+      <fluent-icon icon="sign-out" size="22" class="text-black-900" />
+    </button>
     <button
       v-if="showPopoutButton"
       class="button transparent compact new-window--button "
@@ -19,6 +27,7 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { buildPopoutURL } from '../helpers/urlParamsHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -33,6 +42,9 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      conversationAttributes: 'conversationAttributes/getConversationParams',
+    }),
     isIframe() {
       return IFrameHelper.isIFrame();
     },
@@ -40,7 +52,13 @@ export default {
       return RNHelper.isRNWebView();
     },
     showHeaderActions() {
-      return this.isIframe || this.isRNWebView;
+      return this.isIframe || this.isRNWebView || this.hasWidgetOptions;
+    },
+    conversationStatus() {
+      return this.conversationAttributes.status;
+    },
+    hasWidgetOptions() {
+      return this.showPopoutButton || this.conversationStatus === 'open';
     },
   },
   methods: {
@@ -72,6 +90,9 @@ export default {
         RNHelper.sendMessage({ type: 'close-widget' });
       }
     },
+    resolveConversation() {
+      this.$store.dispatch('conversation/resolveConversation');
+    },
   },
 };
 </script>

app/javascript/widget/components/dropdown/DropdownMenu.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="relative">
+    <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
+      <slot name="button"></slot>
+    </button>
+
+    <!-- to close when clicked on space around it-->
+    <button
+      v-if="isOpen"
+      tabindex="-1"
+      class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
+      @click="toggleMenu"
+    ></button>
+
+    <!--dropdown menu-->
+    <transition
+      enter-active-class="transition-all duration-200 ease-out"
+      leave-active-class="transition-all duration-750 ease-in"
+      enter-class="opacity-0 scale-75"
+      enter-to-class="opacity-100 scale-100"
+      leave-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-75"
+    >
+      <div
+        v-if="isOpen"
+        class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
+        :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
+      >
+        <slot name="content"></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    menuPlacement: {
+      type: String,
+      default: 'right',
+      validator: value => ['right', 'left'].indexOf(value) !== -1,
+    },
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    toggleMenu: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  watch: {
+    open() {
+      this.isOpen = !this.isOpen;
+    },
+  },
+  mounted() {
+    document.addEventListener('keydown', this.onEscape);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.onEscape);
+  },
+  methods: {
+    onEscape(e) {
+      if (e.key === 'Esc' || e.key === 'Escape') {
+        this.isOpen = false;
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.menu-content {
+  width: max-content;
+}
+</style>

app/javascript/widget/components/dropdown/DropdownMenuItem.vue

@@ -0,0 +1,67 @@
+<template>
+  <button :class="['menu-item', itemClass]" @click="action">
+    <fluent-icon
+      v-if="icon"
+      :icon="iconName"
+      :size="iconSize"
+      :class="iconClass"
+    />
+    <span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
+  </button>
+</template>
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  components: { FluentIcon },
+  props: {
+    text: {
+      type: String,
+      default: 'Default',
+    },
+    textClass: {
+      type: String,
+      default: 'text-sm',
+    },
+    icon: {
+      type: Boolean,
+      default: true,
+    },
+    iconName: {
+      type: String,
+      default: '',
+    },
+    iconSize: {
+      type: String,
+      default: '15',
+    },
+    iconClass: {
+      type: String,
+      default: 'text-black-900',
+    },
+    itemClass: {
+      type: String,
+      default:
+        'flex items-center p-3 cursor-pointer ml-0 border-b border-slate-100',
+    },
+    action: {
+      type: Function,
+      default: () => {},
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.menu-item {
+  margin-left: $zero !important;
+  outline: none;
+  &:last-child {
+    border-bottom: none;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+</style>