miralabs-website/src/components/CookiePopup.svelte

<script>
  import { onMount } from "svelte";
  import { ICONS } from "$constants/imageUrls";

  let showCookiePopup = false; // Changed initial value to false
  let analyticsEnabled = false;

  onMount(() => {
    const cookieConsent = getCookie("cookieConsent");
    if (cookieConsent) {
      showCookiePopup = false;
      analyticsEnabled = cookieConsent === "accepted";
      if (analyticsEnabled) {
        loadGTMScript();
      }
    } else {
      // Only show the popup if there's no existing cookie
      showCookiePopup = true;
    }
  });

  function acceptCookies() {
    setCookie("cookieConsent", "accepted", 365);
    showCookiePopup = false;
    analyticsEnabled = true;
    loadGTMScript();
  }

  function declineCookies() {
    setCookie("cookieConsent", "declined", 365);
    showCookiePopup = false;
    analyticsEnabled = false;
    removeGTMScript();
  }

  function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
  }

  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(";");
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) == " ") c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  function loadGTMScript() {
    if (!document.getElementById("gtm-script")) {
      const script = document.createElement("script");
      script.id = "gtm-script";
      script.src = "https://www.googletagmanager.com/gtag/js?id=GTM-WKDVZN2K";
      script.async = true;
      document.head.appendChild(script);
      script.onload = () => {
        window.dataLayer = window.dataLayer || [];
        function gtag() {
          dataLayer.push(arguments);
        }
        gtag("js", new Date());
        gtag("config", "GTM-WKDVZN2K");
        console.log("GTM script loaded and configured");
      };
    }
  }

  function removeGTMScript() {
    const existingScript = document.getElementById("gtm-script");
    if (existingScript) {
      existingScript.remove();
      console.log("Removed existing GTM script");
    }
    window.dataLayer = [];
    console.log("Cleared dataLayer");

    // Here we have manually remove Google Analytics cookies
    document.cookie = "_ga=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
    document.cookie = "_gid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
    document.cookie = "_gat=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
  }
</script>

{#if showCookiePopup}
  <div class="w-[100vw] flex items-center justify-center">
    <section
      class="cookie-popup flex gap-4 items-center px-5 py-4 font-medium bg-white rounded-md border border-solid shadow-xl border-neutral-200 w-[510px] h-[109px] m-3"
      role="dialog"
      aria-labelledby="cookieNoticeTitle"
    >
      <img
        loading="lazy"
        src={ICONS.COOKIE}
        class="shrink-0 self-stretch my-auto w-9 aspect-square fill-[linear-gradient(203deg,#AD50F6_15.37%,#1340FF_72.73%)]"
        alt=""
      />
      <div class="flex flex-col justify-center self-stretch">
        <h2 id="cookieNoticeTitle" class="sr-only">Cookie Notice</h2>
        <p class="text-sm text-zinc-800">
          We use cookies to improve your experience. By continuing to browse,
          you consent to our use of cookies.
        </p>
        <a href="/cookies" class="text-sm text-blue-600 underline mt-1.5">
          Learn more
        </a>
      </div>
      <div
        class="flex flex-col allow-cookies justify-center self-stretch py-1 my-auto text-xs"
      >
        <button
          on:click={acceptCookies}
          class="justify-center px-2.5 py-1.5 text-white rounded-md bg-[linear-gradient(89deg,#1340FF_0.88%,#AD50F6_99.37%)] w-[100px]"
        >
          Allow Cookies
        </button>
        <button
          on:click={declineCookies}
          class="justify-center px-2.5 py-1.5 text-black rounded-md w-[100px]"
        >
          Decline
        </button>
      </div>
    </section>
  </div>
{/if}

<style>
  .cookie-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 10px auto;
    z-index: 999999999999999;
  }

  @media screen and (max-width: 700px) {
    .cookie-popup {
      width: 357px;
      flex-direction: column;
      height: 200px;
      gap: 0px;
    }
    .cookie-popup > img {
      margin: auto;
    }
    .allow-cookies {
      align-items: end !important;
    }
  }
</style>