Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-168

src/lib/components/Course/components/Ceritficate/Design.svelte

@@ -44,7 +44,7 @@
   />
 </svelte:head>
 
-<main class="md:-ml-4 md:-mr-4 px-2">
+<main class="md:-ml-3 md:-mr-3 px-2">
   <div class="flex-1 flex flex-col lg:flex-row justify-between gap-3 w-full mb-3 h-4/5">
     <section class="w-full lg:w-2/5 h-full">
       <strong class="my-2 text-base font-semibold text-black dark:text-gray-100"
@@ -55,7 +55,7 @@
         {#each themes as theme}
           <div class="flex mr-3">
             <RadioButton value={theme} />
-            <img src={`/${theme}.svg`} alt="themes" />
+            <img src={`/${theme}.png`} alt="themes" class="w-[110px] h-[82px]" />
           </div>
         {/each}
       </RadioButtonGroup>

src/lib/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte

@@ -4,7 +4,7 @@
 
 <Box>
   <div class="flex flex-col items-center justify-center w-max h-full gap-2">
-    <img src="/professional.svg" alt="Certificate" />
+    <img src="/professional.png" alt="Certificate" />
     <p class="text-xl font-normal text-center">Certificates not available</p>
     <p class="text-sm font-normal text-center">
       Your instructor needs to unlock your certificate. <br /> If you need your certificate, please contact

src/lib/components/Course/components/Ceritficate/StudentCertificate/UnlockedCertificate.svelte

@@ -42,7 +42,7 @@
 
 <Box>
   <div class="flex flex-col items-center justify-center w-max h-full gap-5">
-    <img src="/professional.svg" alt="Certificate" />
+    <img src="/professional.png" alt="Certificate" />
     <p class="text-xl font-normal text-center">Certificate is now available</p>
     <PrimaryButton
       label="DownLoad Certificate"

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>