classroomio/apps/dashboard/src/lib/components/WelcomeModal/WelcomeModal.svelte

<script>
  import Modal from '../Modal/index.svelte';
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';
  import { currentOrgPath } from '$lib/utils/store/org';
  import {
    triggerSendEmail,
    NOTIFICATION_NAME
  } from '$lib/utils/services/notification/notification';
  import { profile } from '$lib/utils/store/user';

  let query = new URLSearchParams($page.url.search);
  let welcomePopup = query.get('welcomePopup');
  import { t } from '$lib/utils/functions/translations';

  const closeModal = () => {
    triggerSendEmail(NOTIFICATION_NAME.WELCOME_TO_APP, {
      to: $profile.email,
      name: $profile.fullname
    });

    goto($currentOrgPath + '/courses?create=true');
  };
</script>

<Modal
  onClose={closeModal}
  open={welcomePopup === 'true'}
  width="w-9/12"
  maxWidth="w-[800px]"
  modalHeading="Welcome"
>
  <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="text-primary-700 no-underline hover:no-underline"
      >ClassroomIO</a
    >
    {$t('welcome_modal.small_team')}
    <span class="text-primary-700">{$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" />
</Modal>