classroomio/apps/dashboard/src/lib/features/onboarding/components/welcome-modal.svelte

<script>
  import * as Dialog from '@cio/ui/base/dialog';
  import { page } from '$app/state';
  import { goto } from '$app/navigation';
  import { currentOrgPath } from '$lib/utils/store/org';
  import { profile } from '$lib/utils/store/user';
  import { t } from '$lib/utils/functions/translations';
  import { classroomio } from '$lib/utils/services/api';

  let query = new URLSearchParams(page.url.search);
  let welcomePopup = query.get('welcomePopup');
  let open = $derived(welcomePopup === 'true' && !!$profile.isEmailVerified);

  let isLoading = $state(false);

  const closeModal = async () => {
    if (isLoading) return;

    try {
      isLoading = true;
      await classroomio.onboarding.complete.$post({});

      goto($currentOrgPath + '/courses?create=true');
    } catch (error) {
      console.error(error);
    }
  };
</script>

<Dialog.Root
  {open}
  onOpenChange={(isOpen) => {
    if (!isOpen && !isLoading) closeModal();
  }}
>
  <Dialog.Content class="w-9/12 w-[800px]">
    <Dialog.Header>
      <Dialog.Title>Welcome</Dialog.Title>
    </Dialog.Header>
    <p class="text-sm text-black md:text-base lg:text-lg dark:text-white">
      {$t('welcome_modal.we_at')}
      <a href="https://app.classroomio.com/" class="ui:text-primary no-underline hover:no-underline">ClassroomIO</a>
      {$t('welcome_modal.small_team')}
      <span class="ui:text-primary">{$t('welcome_modal.thank_you')};</span>
      {$t('welcome_modal.deeply_appreciate')}
    </p>
    <img src="/images/welcome-img.svg" alt="A welcome banner" class="my-6 w-full" />
  </Dialog.Content>
</Dialog.Root>