wiup

superpage/src/components/Course/Solutions.astro

@@ -1,5 +1,4 @@
 ---
-import { Icon } from "astro-icon/components";
 import Container from "~/components/Container.astro";
 import Contact from "./Contact.jsx";
 import Modal from "~/components/Modal.astro";
@@ -44,6 +43,7 @@ import Modal from "~/components/Modal.astro";
                 <button
                     data-toggle="modal"
                     data-target="#planform"
+                    data-label="EDUSEG® FLEXÍVEL"
                     class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                 >
                     Saiba mais
@@ -73,6 +73,7 @@ import Modal from "~/components/Modal.astro";
                 <button
                     data-toggle="modal"
                     data-target="#planform"
+                    data-label="EDUSEG® IN-COMPANY"
                     class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                 >
                     Saiba mais
@@ -102,6 +103,7 @@ import Modal from "~/components/Modal.astro";
                 <button
                     data-toggle="modal"
                     data-target="#planform"
+                    data-label="EDUSEG® CONTEÚDO"
                     class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                 >
                     Saiba mais
@@ -111,6 +113,21 @@ import Modal from "~/components/Modal.astro";
     </section>
 </Container>
 
-<script is:inline>
-    console.log(window.dataLayer);
+<script>
+    const buttons = document.querySelectorAll(
+        "[data-toggle=modal]",
+    ) as NodeListOf<HTMLButtonElement>;
+
+    buttons.forEach((e) => {
+        e.addEventListener("click", (e) => {
+            const button = e.target as HTMLButtonElement;
+            // Dispatch a custom event with the selected solution label,
+            // so a React component can listen to it using `window.addEventListener`.
+            window.dispatchEvent(
+                new CustomEvent("custom_event:solution", {
+                    detail: button.dataset.label,
+                }),
+            );
+        });
+    });
 </script>