CLASSROOMIO-T-182: Get Notified On Telegram

CLASSROOMIO-T-182: Resolved Feedback

CLASSROOMIO-T-182: Resolved Feedbacks

CLASSROOMIO-T-182: Deletion Functionality

CLASSROOMIO-T-182: Get Notified On Telegram


Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>


Merge-request: CLASSROOMIO-MR-78
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/Org/Settings/Integrations.svelte

@@ -0,0 +1,110 @@
+<script>
+  import { Grid, Column, Row } from 'carbon-components-svelte';
+  import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { profile } from '$lib/utils/store/user';
+  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
+  import { snackbarStore } from '$lib/components/Snackbar/store';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import SectionTitle from '../SectionTitle.svelte';
+
+  let chatId;
+
+  async function addChatId() {
+    const updates = {
+      telegram_chat_id: chatId
+    };
+    if ($profile.telegram_chat_id === null) {
+      let { error } = await supabase.from('profile').update(updates).match({ id: $profile.id });
+      // Update the telegram_chat_id in the profile store with the value from the TextField
+      profile.update((profileData) => ({
+        ...profileData,
+        ...updates
+      }));
+      // Clear the chatId variable after updating the store
+      chatId = '';
+
+      if (error) {
+        $snackbarStore.open = true;
+        $snackbarStore.message = 'Integration Failed, please try again later';
+        $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+        console.log(error);
+      } else {
+        $snackbarStore.open = true;
+        $snackbarStore.message = 'Integration successful';
+        $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+      }
+    }
+  }
+
+  async function deleteChatId() {
+    const updates = {
+      telegram_chat_id: null
+    };
+    let { error } = await supabase.from('profile').update(updates).match({ id: $profile.id });
+    // Check if telegram_chat_id is not null before attempting to delete
+    if ($profile.telegram_chat_id !== null) {
+      // Update the telegram_chat_id in the profile store to null
+      profile.update((profileData) => ({
+        ...profileData,
+        telegram_chat_id: null
+      }));
+
+      if (error) {
+        $snackbarStore.open = true;
+        $snackbarStore.message = 'Deletion Failed, please try again later';
+        $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+        console.log(error);
+      } else {
+        // Show a success message in the snackbar
+        $snackbarStore.open = true;
+        $snackbarStore.message = 'Integration deleted';
+        $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+      }
+    }
+  }
+</script>
+
+<Grid class="border-c rounded border-gray-200 w-full mt-5">
+  <Row class="flex lg:flex-row flex-col items-center py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4} class="flex flex-col items-center">
+      <img src="/telegram-svg.svg" alt="" class="w-10" />
+      <SectionTitle>Telegram</SectionTitle></Column
+    >
+
+    <Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0 flex flex-col items-center lg:items-start">
+      {#if $profile.telegram_chat_id !== null}
+        <div class="flex flex-col items-center">
+          <Checkmark size={32} />
+          <SectionTitle>Telegram Integration Successful</SectionTitle>
+          <PrimaryButton className="mt-3" variant={VARIANTS.CONTAINED_DANGER} onClick={deleteChatId}
+            >Unlink Telegram</PrimaryButton
+          >
+        </div>
+      {:else}
+        <div>
+          <h3 class="font-normal text-lg">
+            You can connect your account to telegram to get notified of any change to your account.
+          </h3>
+          <h4 class="font-normal">
+            <b>Follow the below steps:</b>
+          </h4>
+          <h4 class="font-normal mt-[-1px]">
+            Step 1: Authenticate your account via the ClassroomIO bot.
+          </h4>
+          <PrimaryButton
+            className="mb-5"
+            variant={VARIANTS.OUTLINED}
+            onClick={() => window.open('https://t.me/classroomio_bot', '_blank')}
+            >Open Bot</PrimaryButton
+          >
+          <h4 class="font-normal">Step 2: Enter the Chat ID given to you by the bot.</h4>
+          <TextField bind:value={chatId} placeholder="360111" className="w-full lg:w-60 mb-5" />
+          <PrimaryButton onClick={addChatId}>Connect</PrimaryButton>
+        </div>
+      {/if}
+    </Column>
+  </Row>
+</Grid>

src/lib/components/Org/Settings/index.svelte

@@ -9,6 +9,7 @@
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { isOrgAdmin } from '$lib/utils/store/org';
+  import Integrations from './Integrations.svelte';
 
   let selected = 0;
   let query = new URLSearchParams($page.url.search);
@@ -35,6 +36,13 @@
       tabKey: 'landingpage',
       href: `${$page.url.pathname}?tab=landingpage`,
       disabled: !$isOrgAdmin
+    },
+    {
+      key: 3,
+      label: 'Integrations',
+      tabKey: 'integrations',
+      href: `${$page.url.pathname}?tab=integrations`,
+      disabled: false
     }
   ];
 
@@ -79,5 +87,8 @@
     <TabContent class="w-full p-0">
       <LandingpageSettings />
     </TabContent>
+    <TabContent class="w-full p-0">
+      <Integrations />
+    </TabContent>
   </svelte:fragment>
 </Tabs>

src/routes/lms/settings/+page.svelte

@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
   import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
   import Profile from '$lib/components/LMS/components/Profile.svelte';
+  import Integrations from '$lib/components/Org/Settings/Integrations.svelte';
 
   let selected = 0;
   const tabs = [
@@ -10,6 +11,13 @@
       label: 'Profile',
       tabKey: '',
       href: $page.url.pathname
+    },
+    {
+      key: 1,
+      label: 'Integrations',
+      tabKey: 'integrations',
+      href: `${$page.url.pathname}?tab=integrations`,
+      disabled: false
     }
   ];
 </script>
@@ -24,6 +32,9 @@
         <TabContent>
           <Profile />
         </TabContent>
+        <TabContent>
+          <Integrations />
+        </TabContent>
       </svelte:fragment>
     </Tabs>
   </div>