open modal

superpage/src/components/Course/BuyDropdown.astro

@@ -9,15 +9,16 @@ const currency = new Intl.NumberFormat("pt-BR", {
 <buy-dropdown class:list={[Astro.props.class]}>
     <details class="group/dropdown">
         <summary
-            class="flex bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer transition
+            class="flex bg-black hover:bg-white hover:text-black font-semibold
+                   py-2.5 px-3 rounded-md cursor-pointer transition
                    group-open/dropdown:text-black group-open/dropdown:bg-white"
         >
             Contratar agora
         </summary>
         <form
             class="absolute inset-x-2.5 translate-y-1.5
-                   md:inset-auto md:right-2.5 2xl:right-0
-                   md:min-w-96 bg-stone-900 border border-white/15 rounded-xl shadow-lg"
+                   md:inset-auto md:right-2.5 md:min-w-96 2xl:right-0
+                   bg-stone-900 border border-white/15 rounded-xl shadow-lg"
         >
             <h6
                 class="p-2.5 lg:px-5 lg:py-3.5 font-semibold border-b border-white/10 bg-white/5"
@@ -33,15 +34,15 @@ const currency = new Intl.NumberFormat("pt-BR", {
                             class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
                             name="selected"
                             type="radio"
-                            value={}
+                            value="SINGLE"
                             checked
                         />
                         <div>
                             <p class="uppercase font-semibold">
-                                Matrícula única <span
-                                    class="px-0.5 text-black bg-lime-400"
-                                    >{currency}</span
-                                >
+                                Matrícula única
+                                <span class="px-0.5 text-black bg-lime-400">
+                                    {currency}
+                                </span>
                             </p>
                             <p class="text-sm text-white/50">
                                 Contratação rápida e sem burocracia
@@ -134,6 +135,35 @@ const currency = new Intl.NumberFormat("pt-BR", {
 
         connectedCallback() {
             document.addEventListener("click", this.handleClickOutside);
+
+            const form = this.querySelector("form") as HTMLFormElement;
+            form.addEventListener("submit", (e) => {
+                e.preventDefault();
+
+                const radio = form.querySelector(
+                    "input[type=radio]:checked",
+                ) as HTMLInputElement;
+
+                if (radio.value === "SINGLE") {
+                    return;
+                }
+
+                // Dispatch a custom event with the selected solution,
+                // so a React component can listen to it using `window.addEventListener`.
+                window.dispatchEvent(
+                    new CustomEvent("custom_event:react_form", {
+                        detail: radio.value,
+                    }),
+                );
+
+                window.dispatchEvent(
+                    new CustomEvent("modal:open", {
+                        detail: document.querySelector(
+                            "#solutionmodal",
+                        ) as HTMLDialogElement,
+                    }),
+                );
+            });
         }
 
         disconnectedCallback() {