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

<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>