From 07b92fbe92d97166eb62cf51e9bc0cb520f72657 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Tue, 26 Sep 2023 11:57:31 +0100
Subject: [PATCH] CLASSROOMIO-T-182: Validation

---
 src/lib/components/Form/TextField.svelte      |  2 +-
 .../Org/Settings/Integrations.svelte          | 48 +++++++-------
 src/lib/components/Org/Settings/index.svelte  | 64 ++++++++++---------
 3 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/Form/TextField.svelte b/src/lib/components/Form/TextField.svelte
index 33f3145f..a433fcfd 100644
--- a/src/lib/components/Form/TextField.svelte
+++ b/src/lib/components/Form/TextField.svelte
@@ -5,7 +5,7 @@
 
   export let label = '';
   export let placeholder = '';
-  export let value: string | number;
+  export let value: string | number | null;
   export let name = '';
   export let onKeyDown = () => {};
   export let className = '';
diff --git a/src/lib/components/Org/Settings/Integrations.svelte b/src/lib/components/Org/Settings/Integrations.svelte
index 494f414a..bdd4d302 100644
--- a/src/lib/components/Org/Settings/Integrations.svelte
+++ b/src/lib/components/Org/Settings/Integrations.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
   import { Grid, Column, Row } from 'carbon-components-svelte';
-  import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
   import { supabase } from '$lib/utils/functions/supabase';
   import { profile } from '$lib/utils/store/user';
   import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
@@ -9,8 +9,9 @@
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import SectionTitle from '../SectionTitle.svelte';
+  import ArrowUpRightIcon from '$lib/components/Icons/ArrowTopRight.svelte';
 
-  let chatId;
+  let chatId: number | null;
 
   async function addChatId() {
     const updates = {
@@ -24,7 +25,7 @@
         ...updates
       }));
       // Clear the chatId variable after updating the store
-      chatId = '';
+      chatId = null;
 
       if (error) {
         $snackbarStore.open = true;
@@ -44,9 +45,7 @@
       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
+    if (typeof $profile.telegram_chat_id !== null) {
       profile.update((profileData) => ({
         ...profileData,
         telegram_chat_id: null
@@ -68,40 +67,43 @@
 </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" />
+  <Row class="flex lg:flex-row flex-col justify-center lg:justify-start py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4} class="flex items-center justify-center">
+      <img src="/telegram-svg.svg" alt="" class="w-10 mr-2" />
       <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>
+        <div class="flex flex-col items-center w-full">
+          <div class="flex items-center">
+            <CheckmarkFilled size={32} class="mr-2" style="fill: green;" />
+            <SectionTitle>Integration Successful</SectionTitle>
+          </div>
           <PrimaryButton className="mt-3" variant={VARIANTS.CONTAINED_DANGER} onClick={deleteChatId}
-            >Unlink Telegram</PrimaryButton
+            >Disconnect</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.
+            Connect your account to telegram to get notified of any change within the application.
           </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>
+          <h4 class="font-normal">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
+            ><span class="mr-2">Open Bot</span> <ArrowUpRightIcon /></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" />
+          <TextField
+            bind:value={chatId}
+            placeholder="360111"
+            className="w-full lg:w-60 mb-5"
+            type="number"
+            isRequired
+          />
           <PrimaryButton onClick={addChatId}>Connect</PrimaryButton>
         </div>
       {/if}
diff --git a/src/lib/components/Org/Settings/index.svelte b/src/lib/components/Org/Settings/index.svelte
index f468e4c7..d10620fd 100644
--- a/src/lib/components/Org/Settings/index.svelte
+++ b/src/lib/components/Org/Settings/index.svelte
@@ -15,36 +15,7 @@
   let query = new URLSearchParams($page.url.search);
   let tabKey = query.get('tab') || '';
 
-  const tabs = [
-    {
-      key: 0,
-      label: 'Profile',
-      tabKey: '',
-      href: $page.url.pathname,
-      disabled: false
-    },
-    {
-      key: 1,
-      label: 'Organization',
-      tabKey: 'org',
-      href: `${$page.url.pathname}?tab=org`,
-      disabled: !$isOrgAdmin
-    },
-    {
-      key: 2,
-      label: 'LandingPage',
-      tabKey: 'landingpage',
-      href: `${$page.url.pathname}?tab=landingpage`,
-      disabled: !$isOrgAdmin
-    },
-    {
-      key: 3,
-      label: 'Integrations',
-      tabKey: 'integrations',
-      href: `${$page.url.pathname}?tab=integrations`,
-      disabled: false
-    }
-  ];
+  let tabs = [];
 
   function getSelectedByTab(tabKey = '') {
     const tab = tabs.find((t) => t.tabKey === tabKey);
@@ -67,6 +38,39 @@
       changeRouteOnTabChange(selected);
     }
   }
+
+  $: {
+    tabs = [
+      {
+        key: 0,
+        label: 'Profile',
+        tabKey: '',
+        href: $page.url.pathname,
+        disabled: false
+      },
+      {
+        key: 1,
+        label: 'Organization',
+        tabKey: 'org',
+        href: `${$page.url.pathname}?tab=org`,
+        disabled: !$isOrgAdmin
+      },
+      {
+        key: 2,
+        label: 'LandingPage',
+        tabKey: 'landingpage',
+        href: `${$page.url.pathname}?tab=landingpage`,
+        disabled: !$isOrgAdmin
+      },
+      {
+        key: 3,
+        label: 'Integrations',
+        tabKey: 'integrations',
+        href: `${$page.url.pathname}?tab=integrations`,
+        disabled: false
+      }
+    ];
+  }
 </script>
 
 <Tabs autoWidth bind:selected>