mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 20:18:08 +00:00
4303007786
Fixes https://linear.app/chatwoot/issue/CW-4150/support-for-multiple-issues-linking-in-linear This PR significantly improves the Linear integration user experience by relocating the Linear integration from the conversation header to the contact panel and adding support for multiple issue linking per conversation. ### Key Changes - **Relocated Linear integration**: Moved from conversation header to contact panel for better organization and accessibility - **Multi-issue support**: Added ability to link/create multiple Linear issues for a single conversation - **Integration CTA**: Added a dedicated call-to-action section for users who haven't connected their Linear account yet - **UI/UX improvements**: Enhanced design consistency and user flow <details> <summary>Screenshots</summary> #### Multiple Issues Support  #### Integration CTA  --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
55 lines
1.7 KiB
Vue
55 lines
1.7 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useStoreGetters } from 'dashboard/composables/store';
|
|
import NextButton from 'dashboard/components-next/button/Button.vue';
|
|
import { frontendURL } from 'dashboard/helper/URLHelper';
|
|
import { useAdmin } from 'dashboard/composables/useAdmin';
|
|
|
|
const { isAdmin } = useAdmin();
|
|
const getters = useStoreGetters();
|
|
const accountId = getters.getCurrentAccountId;
|
|
|
|
const integrationId = 'linear';
|
|
|
|
const actionURL = computed(() =>
|
|
frontendURL(
|
|
`accounts/${accountId.value}/settings/integrations/${integrationId}`
|
|
)
|
|
);
|
|
|
|
const openLinearAccount = () => {
|
|
window.open(actionURL.value, '_blank');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col p-3">
|
|
<div class="w-12 h-12 mb-3">
|
|
<img
|
|
:src="`/dashboard/images/integrations/${integrationId}.png`"
|
|
class="object-contain w-full h-full border rounded-md shadow-sm border-n-weak dark:hidden dark:bg-n-alpha-2"
|
|
/>
|
|
<img
|
|
:src="`/dashboard/images/integrations/${integrationId}-dark.png`"
|
|
class="hidden object-contain w-full h-full border rounded-md shadow-sm border-n-weak dark:block"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1 mb-4">
|
|
<h3 class="mb-1.5 text-sm font-medium text-n-slate-12">
|
|
{{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.TITLE') }}
|
|
</h3>
|
|
<p v-if="isAdmin" class="text-sm text-n-slate-11">
|
|
{{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.DESCRIPTION') }}
|
|
</p>
|
|
<p v-else class="text-sm text-n-slate-11">
|
|
{{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.AGENT_DESCRIPTION') }}
|
|
</p>
|
|
</div>
|
|
|
|
<NextButton v-if="isAdmin" faded slate @click="openLinearAccount">
|
|
{{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.BUTTON_TEXT') }}
|
|
</NextButton>
|
|
</div>
|
|
</template>
|