From cbb4c29bf37dc3a7eae89db2f41da6ec12cbcd10 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 14 Aug 2024 16:10:43 +0530
Subject: [PATCH] feat: add empty state for captain

---
 .../i18n/locale/en/integrations.json          |  5 +++
 .../integrations/Captain/CaptainInboxRow.vue  | 37 ++++++++++++++++++
 .../integrations/Captain/EmptyState.vue       | 39 +++++++++++++++++++
 .../settings/integrations/Captain/Index.vue   | 24 +++++++++++-
 4 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/CaptainInboxRow.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/EmptyState.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index f5a198153..94f311381 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -15,6 +15,11 @@
       "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again.",
       "ERRORS": {
         "CREATE_INBOX_IDS": "Please select at least one inbox to enable Captain"
+      },
+      "LIST": {
+        "EMPTY_STATE": "There are no inboxes configured with captain. To enable captain, click on the setup.",
+        "TABLE_HEADER": ["Inbox Name", "Type"],
+        "CONFIGURE": "Setup Captain"
       }
     },
     "WEBHOOK": {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/CaptainInboxRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/CaptainInboxRow.vue
new file mode 100644
index 000000000..d1dfb22d1
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/CaptainInboxRow.vue
@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  inbox: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+defineEmits(['delete']);
+</script>
+
+<template>
+  <tr class="max-w-full py-1">
+    <td
+      class="py-4 pr-4 text-sm w-40 max-w-[10rem] truncate"
+      :title="inbox.name"
+    >
+      {{ inbox.name }}
+    </td>
+    <td class="max-w-lg py-4 pr-4 text-sm truncate" :title="inbox.type">
+      {{ inbox.type }}
+    </td>
+    <td class="flex gap-2 py-4 pr-4 text-sm sm:pr-0 justify-end">
+      <woot-button
+        v-tooltip.top="
+          $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.DELETE_TOOLTIP')
+        "
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        class-names="grey-btn"
+        @click="$emit('delete', app)"
+      />
+    </td>
+  </tr>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/EmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/EmptyState.vue
new file mode 100644
index 000000000..c4c5149ea
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/EmptyState.vue
@@ -0,0 +1,39 @@
+<script setup>
+import CaptainInboxRow from './CaptainInboxRow.vue';
+
+const dummyInboxes = [
+  { name: 'Website Live Chat', type: 'Channel::WebWidget' },
+  { name: 'Email', type: 'Channel::Email' },
+  { name: 'Facebook Messenger', type: 'Channel::Facebook' },
+];
+</script>
+
+<template>
+  <div class="w-full min-h-[12rem] relative">
+    <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+      <thead>
+        <th
+          v-for="thHeader in $t(
+            'INTEGRATION_SETTINGS.CAPTAIN.LIST.TABLE_HEADER'
+          )"
+          :key="thHeader"
+          class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+        >
+          {{ thHeader }}
+        </th>
+      </thead>
+      <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
+        <CaptainInboxRow
+          v-for="inbox in dummyInboxes"
+          :key="inbox.name"
+          :inbox="inbox"
+        />
+      </tbody>
+    </table>
+    <div
+      class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/Index.vue
index 68c80dfbf..449461c40 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/Index.vue
@@ -1,6 +1,12 @@
 <script setup>
+import { computed } from 'vue';
 import IntegrationSettingsLayout from '../Layout.vue';
+import EmptyState from './EmptyState.vue';
 import BaseSettingsHeader from 'dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue';
+
+const isSetup = computed(() => {
+  return false;
+});
 </script>
 
 <template>
@@ -14,11 +20,27 @@ import BaseSettingsHeader from 'dashboard/routes/dashboard/settings/components/B
         :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
       >
         <template #actions>
-          <woot-button class="rounded-md button nice" icon="add-circle">
+          <woot-button
+            v-if="isSetup"
+            class="rounded-md button nice"
+            icon="plus-sign"
+          >
             {{ $t('INTEGRATION_SETTINGS.CAPTAIN.HEADER_BTN_TXT') }}
           </woot-button>
         </template>
       </BaseSettingsHeader>
     </template>
+    <EmptyState>
+      <p class="max-w-xs text-sm font-medium text-center">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.LIST.EMPTY_STATE') }}
+      </p>
+      <woot-button
+        v-if="!isSetup"
+        class="rounded-md button nice"
+        icon="plus-sign"
+      >
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.LIST.CONFIGURE') }}
+      </woot-button>
+    </EmptyState>
   </IntegrationSettingsLayout>
 </template>