From bc67705982b1c16f804464234d33511d0c762cc5 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 17 Jun 2025 11:00:11 +0530
Subject: [PATCH] feat: add notion page

---
 .../i18n/locale/en/integrations.json          |  8 +++
 .../settings/integrations/Notion.vue          | 57 +++++++++++++++++++
 .../integrations/integrations.routes.js       | 10 ++++
 3 files changed, 75 insertions(+)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 071c95604..cafea7fa5 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -328,6 +328,14 @@
         "DESCRIPTION": "Linear workspace is not connected. Click the button below to connect your workspace to use this integration.",
         "BUTTON_TEXT": "Connect Linear workspace"
       }
+    },
+    "NOTION": {
+      "DELETE": {
+        "TITLE": "Are you sure you want to delete the Notion integration?",
+        "MESSAGE": "Deleting this integration will remove access to your Notion workspace and stop all related functionality.",
+        "CONFIRM": "Yes, delete",
+        "CANCEL": "Cancel"
+      }
     }
   },
   "CAPTAIN": {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
new file mode 100644
index 000000000..970e3e1e9
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import {
+  useFunctionGetter,
+  useMapGetter,
+  useStore,
+} from 'dashboard/composables/store';
+
+import Integration from './Integration.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+const store = useStore();
+
+const integrationLoaded = ref(false);
+
+const integration = useFunctionGetter('integrations/getIntegration', 'notion');
+
+const uiFlags = useMapGetter('integrations/getUIFlags');
+
+const integrationAction = computed(() => {
+  if (integration.value.enabled) {
+    return 'disconnect';
+  }
+  return integration.value.action;
+});
+
+const initializeNotionIntegration = async () => {
+  await store.dispatch('integrations/get', 'notion');
+  integrationLoaded.value = true;
+};
+
+onMounted(() => {
+  initializeNotionIntegration();
+});
+</script>
+
+<template>
+  <div class="flex-grow flex-shrink p-4 overflow-auto mx-auto">
+    <div v-if="integrationLoaded && !uiFlags.isCreatingNotion">
+      <Integration
+        :integration-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction"
+        :delete-confirmation-text="{
+          title: $t('INTEGRATION_SETTINGS.NOTION.DELETE.TITLE'),
+          message: $t('INTEGRATION_SETTINGS.NOTION.DELETE.MESSAGE'),
+        }"
+      />
+    </div>
+    <div v-else class="flex items-center justify-center flex-1">
+      <Spinner size="" color-scheme="primary" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index e50eccb3a..bb700fc74 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -8,6 +8,7 @@ import DashboardApps from './DashboardApps/Index.vue';
 import Slack from './Slack.vue';
 import SettingsContent from '../Wrapper.vue';
 import Linear from './Linear.vue';
+import Notion from './Notion.vue';
 import Shopify from './Shopify.vue';
 
 export default {
@@ -90,6 +91,15 @@ export default {
           },
           props: route => ({ code: route.query.code }),
         },
+        {
+          path: 'notion',
+          name: 'settings_integrations_notion',
+          component: Notion,
+          meta: {
+            permissions: ['administrator'],
+          },
+          props: route => ({ code: route.query.code }),
+        },
         {
           path: 'shopify',
           name: 'settings_integrations_shopify',