feat: Generate SSO URL in Chatwoot, move Captain to primary tab (#9871)

- Generate SSO URL in Chatwoot, move Captain to the primary tab

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/routes/dashboard/Captain.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+import integrations from '../../api/integrations';
+import Spinner from 'shared/components/Spinner.vue';
+
+const isLoading = ref(true);
+const captainURL = ref('');
+const hasError = ref(false);
+
+const loadCaptainFrame = async integration => {
+  if (!integration || !integration.enabled) {
+    return;
+  }
+  try {
+    isLoading.value = true;
+    const { data } = await integrations.fetchCaptainURL();
+    captainURL.value = data.sso_url;
+  } catch (error) {
+    hasError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const getters = useStoreGetters();
+const captainIntegration = computed(() =>
+  getters['integrations/getIntegration'].value('captain', null)
+);
+
+onMounted(() => loadCaptainFrame(captainIntegration.value));
+
+watch(captainIntegration, updatedIntegration =>
+  loadCaptainFrame(updatedIntegration)
+);
+</script>
+
+<template>
+  <div
+    class="flex-1 overflow-auto flex gap-8 flex-col font-inter text-slate-900 dark:text-slate-500"
+  >
+    <div class="flex-1 flex items-center justify-center">
+      <div v-if="!captainIntegration">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}
+      </div>
+      <div
+        v-else-if="!captainIntegration.enabled"
+        class="flex-1 flex flex-col gap-2 items-center justify-center"
+      >
+        <div>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}</div>
+        <router-link :to="{ name: 'settings_applications' }">
+          <woot-button class="clear link">
+            {{ $t('INTEGRATION_SETTINGS.CAPTAIN.CLICK_HERE_TO_CONFIGURE') }}
+          </woot-button>
+        </router-link>
+      </div>
+      <div
+        v-else-if="isLoading"
+        class="flex-1 flex items-center justify-center"
+      >
+        <Spinner color-scheme="primary" />
+        <span>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.LOADING_CONSOLE') }}</span>
+      </div>
+      <div v-else-if="!isLoading && hasError">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.FAILED_TO_LOAD_CONSOLE') }}
+      </div>
+      <iframe
+        v-else-if="!isLoading && captainURL"
+        :src="captainURL"
+        class="w-full min-h-[800px] h-full"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -8,6 +8,7 @@ import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
 const AppContainer = () => import('./Dashboard.vue');
+const Captain = () => import('./Captain.vue');
 const Suspended = () => import('./suspended/Index.vue');
 
 export default {
@@ -17,6 +18,14 @@ export default {
       path: frontendURL('accounts/:account_id'),
       component: AppContainer,
       children: [
+        {
+          path: frontendURL('accounts/:accountId/captain'),
+          name: 'captain',
+          component: Captain,
+          meta: {
+            permissions: ['administrator', 'agent'],
+          },
+        },
         ...inboxRoutes,
         ...conversation.routes,
         ...settings.routes,