From 00f62bee82e88cd2305a5bcebea7e47d2db578a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?= Date: Wed, 14 May 2025 11:16:35 -0300 Subject: [PATCH] open modal --- superpage/src/CookieConsentConfig.ts | 2 +- .../src/components/{Course => }/Contact.jsx | 70 ++++++++++++++++--- .../src/components/Course/BuyDropdown.astro | 46 +++++++++--- .../src/components/Course/Solutions.astro | 18 ++--- superpage/src/components/Modal.astro | 9 +++ superpage/src/layouts/Layout.astro | 11 +++ .../src/pages/_components/BuyButton.astro | 17 ----- superpage/src/pages/index.astro | 27 ++++++- 8 files changed, 147 insertions(+), 53 deletions(-) rename superpage/src/components/{Course => }/Contact.jsx (66%) diff --git a/superpage/src/CookieConsentConfig.ts b/superpage/src/CookieConsentConfig.ts index f978c96..b15a160 100644 --- a/superpage/src/CookieConsentConfig.ts +++ b/superpage/src/CookieConsentConfig.ts @@ -39,7 +39,7 @@ export const config: CookieConsentConfig = { // function gtag(...args: any[]) { // window.dataLayer.push(args); // } - + // // gtag("consent", "update", { // ad_storage: "granted", // ad_user_data: "granted", diff --git a/superpage/src/components/Course/Contact.jsx b/superpage/src/components/Contact.jsx similarity index 66% rename from superpage/src/components/Course/Contact.jsx rename to superpage/src/components/Contact.jsx index bbf1ad7..ba4ec85 100644 --- a/superpage/src/components/Course/Contact.jsx +++ b/superpage/src/components/Contact.jsx @@ -1,6 +1,7 @@ -import { createElement, useEffect } from "react"; -import { Form, useForm } from "react-hook-form"; +import { createElement, useEffect, forwardRef } from "react"; +import { Form, useForm, Controller } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; +import { PatternFormat } from "react-number-format"; import clsx from "clsx"; import { z } from "zod"; @@ -20,6 +21,9 @@ const schema = z.object({ export default function Contact({ url }) { const { register, formState, control, reset, setValue } = useForm({ resolver: zodResolver(schema), + defaultValues: { + telephone: "", + }, }); useEffect(() => { @@ -70,10 +74,23 @@ export default function Contact({ url }) { - { + return ( + + ); + }} /> {formState.errors.telephone?.message} @@ -100,15 +117,22 @@ export default function Contact({ url }) { ); } -export function Input({ as = "input", className, children, ...props }) { +export const Input = forwardRef(function Input( + { as = "input", className, children, ...props }, + ref, +) { return createElement( as, { @@ -119,11 +143,12 @@ export function Input({ as = "input", className, children, ...props }) { "aria-invalid:border-red-600", className, ), + ref, ...props, }, children, ); -} +}); function Control({ children, className }) { return ; @@ -138,3 +163,28 @@ function Error({ children, className }) { return null; } + +function Spinner(props) { + return ( + + + + + ); +} diff --git a/superpage/src/components/Course/BuyDropdown.astro b/superpage/src/components/Course/BuyDropdown.astro index d541981..04ee247 100644 --- a/superpage/src/components/Course/BuyDropdown.astro +++ b/superpage/src/components/Course/BuyDropdown.astro @@ -9,15 +9,16 @@ const currency = new Intl.NumberFormat("pt-BR", {
Contratar agora

- Matrícula única {currency} + Matrícula única + + {currency} +

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() { diff --git a/superpage/src/components/Course/Solutions.astro b/superpage/src/components/Course/Solutions.astro index cfc52d7..fde0241 100644 --- a/superpage/src/components/Course/Solutions.astro +++ b/superpage/src/components/Course/Solutions.astro @@ -1,17 +1,7 @@ --- import Container from "~/components/Container.astro"; -import Contact from "./Contact.jsx"; -import Modal from "~/components/Modal.astro"; --- -{/* Modal */} - -

- Preencha os dados da sua empresa -

- - -

@@ -45,7 +35,7 @@ import Modal from "~/components/Modal.astro";

+ +