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 <[email protected]>


Merge-request: CLASSROOMIO-MR-78
Merged-by: Best Admin <[email protected]>

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>

static/telegram-svg.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="14" fill="url(#paint0_linear_87_7225)"/>
+<path d="M22.9866 10.2088C23.1112 9.40332 22.3454 8.76755 21.6292 9.082L7.36482 15.3448C6.85123 15.5703 6.8888 16.3483 7.42147 16.5179L10.3631 17.4547C10.9246 17.6335 11.5325 17.541 12.0228 17.2023L18.655 12.6203C18.855 12.4821 19.073 12.7665 18.9021 12.9426L14.1281 17.8646C13.665 18.3421 13.7569 19.1512 14.314 19.5005L19.659 22.8523C20.2585 23.2282 21.0297 22.8506 21.1418 22.1261L22.9866 10.2088Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_87_7225" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#37BBFE"/>
+<stop offset="1" stop-color="#007DBB"/>
+</linearGradient>
+</defs>
+</svg>