saladeaula.digital/superpage/src/components/Course/BuyDropdown.astro

---
const { course } = Astro.props;
const currency = new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
}).format(course.unit_price);
---

<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
                   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 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"
            >
                Selecione uma opção
            </h6>
            <ul class="p-3">
                <li>
                    <label
                        class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
                    >
                        <input
                            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="SINGLE"
                            checked
                        />
                        <div>
                            <p class="uppercase font-semibold">
                                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
                            </p>
                        </div>
                    </label>
                </li>
            </ul>
            <h6 class="px-5 font-semibold">Modelos de contratação</h6>
            <ul class="p-3 space-y-0.5">
                <li>
                    <label
                        class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
                    >
                        <input
                            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"
                            value="EDUSEG® FLEXÍVEL"
                            type="radio"
                        />
                        <div>
                            <p class="uppercase font-semibold">
                                EDUSEG&reg; Flexível
                            </p>
                            <p class="text-sm text-white/50">
                                Catálogo completo sempre à sua disposição
                            </p>
                        </div>
                    </label>
                </li>
                <li>
                    <label
                        class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
                    >
                        <input
                            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"
                            value="EDUSEG® IN-COMPANY"
                            type="radio"
                        />
                        <div>
                            <p class="uppercase font-semibold">
                                EDUSEG&reg; In-Company
                            </p>
                            <p class="text-sm text-white/50">
                                Treinamento presencial na sua empresa
                            </p>
                        </div>
                    </label>
                </li>
                <li>
                    <label
                        class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
                    >
                        <input
                            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"
                            value="EDUSEG® CONTEÚDO"
                            type="radio"
                        />
                        <div>
                            <p class="uppercase font-semibold">
                                EDUSEG&reg; Conteúdo
                            </p>
                            <p class="text-sm text-white/50">
                                Leve nosso conteúdo para sua plataforma
                            </p>
                        </div>
                    </label>
                </li>
            </ul>
            <div class="p-2.5 lg:px-5 border-t border-white/10">
                <button
                    type="submit"
                    class="p-3 bg-lime-400 rounded-lg w-full text-black font-semibold cursor-pointer hover:bg-white hover:text-black transition"
                >
                    Continuar
                </button>
            </div>
        </form>
    </details>
</buy-dropdown>

<script>
    class BuyDropdown extends HTMLElement {
        constructor() {
            super();
            this.handleClickOutside = this.handleClickOutside.bind(this);
        }

        connectedCallback() {
            document.addEventListener("click", this.handleClickOutside);
            const button = document.querySelector(
                "[data-toggle=buy]",
            ) as HTMLButtonElement;
            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") {
                    button?.click();
                    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() {
            document.removeEventListener("click", this.handleClickOutside);
        }

        private handleClickOutside(e: MouseEvent) {
            const menu = this.querySelector("details") as HTMLDetailsElement;
            const target = e.target as HTMLElement;

            if (!menu.contains(target)) {
                menu.open = false;
            }
        }
    }

    customElements.define("buy-dropdown", BuyDropdown);
</script>