feat: add linear cta

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -71,10 +71,7 @@
         :class="{ 'justify-end': isContactPanelOpen }"
       >
         <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
-        <linear
-          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
-          :conversation-id="currentChat.id"
-        />
+        <linear :conversation-id="currentChat.id" />
         <more-actions :conversation-id="currentChat.id" />
       </div>
     </div>

app/javascript/dashboard/components/widgets/conversation/linear/CTAModal.vue

@@ -0,0 +1,48 @@
+<script setup>
+import FormButton from 'v3/components/Form/Button.vue';
+
+const emits = defineEmits(['on-dismiss']);
+
+const onDismiss = () => {
+  emits('on-dismiss');
+};
+</script>
+
+<template>
+  <div
+    class="absolute flex flex-col items-start bg-ash-50 dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[270px] rounded-xl gap-4 max-h-96 overflow-auto"
+  >
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row justify-between">
+        <img
+          class="w-8 h-8"
+          :src="`/dashboard/images/integrations/linear.png`"
+          alt="Linear-logo"
+        />
+        <div class="flex items-center">
+          <woot-button
+            variant="clear"
+            icon="dismiss"
+            color-scheme="secondary"
+            @click="onDismiss"
+          />
+        </div>
+      </div>
+
+      <span class="mt-3 font-medium text-ash-900">Connect to Linear</span>
+      <span class="mt-2 text-sm text-ash-800">
+        Create Linear issues from conversations, or link existing ones for
+        seamless tracking.
+      </span>
+      <form-button
+        type="submit"
+        size="large"
+        class="justify-center w-full mt-6"
+        variant="solid"
+        color-scheme="secondary"
+      >
+        Connect to Linear
+      </form-button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative" :class="{ group: linkedIssue }">
+  <div class="relative" :class="{ group: linkedIssue || shouldShowPopup }">
     <woot-button
       v-on-clickaway="closeIssue"
       v-tooltip="tooltipText"
@@ -24,6 +24,11 @@
       class="absolute right-0 top-[40px] invisible group-hover:visible"
       @unlink-issue="unlinkIssue"
     />
+    <CTAModal
+      v-if="shouldShowCTA"
+      class="absolute right-0 top-[40px]"
+      @on-dismiss="onDismissCTAModal"
+    />
     <woot-modal
       :show.sync="shouldShowPopup"
       :on-close="closePopup"
@@ -41,11 +46,13 @@
 <script setup>
 import { computed, ref, onMounted, watch } from 'vue';
 import { useAlert } from 'dashboard/composables';
-import { useStoreGetters } from 'dashboard/composables/store';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import { useI18n } from 'dashboard/composables/useI18n';
 import LinearAPI from 'dashboard/api/integrations/linear';
 import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
 import Issue from './Issue.vue';
+import CTAModal from './CTAModal.vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const props = defineProps({
   conversationId: {
@@ -53,7 +60,7 @@ const props = defineProps({
     required: true,
   },
 });
-
+const store = useStore();
 const getters = useStoreGetters();
 const { t } = useI18n();
 
@@ -62,9 +69,37 @@ const shouldShow = ref(false);
 const shouldShowPopup = ref(false);
 
 const currentAccountId = getters.getCurrentAccountId;
+const uiSettings = getters.getUISettings;
+
+const currentUserRole = getters.getCurrentRole;
+
+const isAdmin = computed(() => {
+  return currentUserRole.value === 'administrator';
+});
+
+const isLinearFeatureEnabled = computed(() => {
+  return getters['accounts/isFeatureEnabledonAccount'].value(
+    currentAccountId.value,
+    FEATURE_FLAGS.LINEAR
+  );
+});
+const isLinearIntegrationEnabled = computed(() => {
+  return getters['integrations/getAppIntegrations'].value.find(
+    integration => integration.id === 'linear' && !!integration.hooks.length
+  );
+});
+
+const shouldShowCTA = computed(() => {
+  return (
+    isLinearFeatureEnabled.value &&
+    !uiSettings.is_linear_cta_modal_dismissed &&
+    !isLinearIntegrationEnabled.value &&
+    isAdmin.value
+  );
+});
 
 const tooltipText = computed(() => {
-  return linkedIssue.value === null
+  return linkedIssue.value === null && isLinearIntegrationEnabled.value
     ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')
     : null;
 });
@@ -90,7 +125,21 @@ const unlinkIssue = async linkId => {
   }
 };
 
+const onDismissCTAModal = async () => {
+  try {
+    await store.dispatch('updateUISettings', {
+      uiSettings: {
+        ...uiSettings.value,
+        ...{ is_open_ai_cta_modal_dismissed: true },
+      },
+    });
+  } catch (error) {
+    useAlert(t('INTEGRATION_SETTINGS.LINEAR.UNLINK.DELETE_ERROR'));
+  }
+};
+
 const openIssue = () => {
+  if (!isLinearIntegrationEnabled.value) return;
   if (!linkedIssue.value) shouldShowPopup.value = true;
   shouldShow.value = true;
 };
@@ -112,6 +161,8 @@ watch(
 );
 
 onMounted(() => {
-  loadLinkedIssue();
+  if (isLinearIntegrationEnabled.value) {
+    loadLinkedIssue();
+  }
 });
 </script>