finish

superpage/src/components/Course/Contact.jsx

@@ -1,6 +1,6 @@
+import { createElement, useEffect } from "react";
 import { Form, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { createElement } from "react";
 import clsx from "clsx";
 import { z } from "zod";
 
@@ -18,16 +18,25 @@ const schema = z.object({
 });
 
 export default function Contact({ url }) {
-  const { register, formState, control, reset } = useForm({
+  const { register, formState, control, reset, setValue } = useForm({
     resolver: zodResolver(schema),
   });
 
+  useEffect(() => {
+    const handler = (e) => {
+      setValue("plan", e.detail);
+    };
+
+    window.addEventListener("planUpdate", handler);
+
+    return () => {
+      window.removeEventListener("planUpdate", handler);
+    };
+  }, [setValue]);
+
   return (
     <Form
       action={N8N_URL}
-      onSubmit={(data) => {
-        return { url, ...data };
-      }}
       onSuccess={() => reset()}
       control={control}
       className="flex flex-col gap-3"
@@ -38,6 +47,9 @@ export default function Contact({ url }) {
         </p>
       )}
 
+      <input type="hidden" {...register("plan")} />
+      <input type="hidden" defaultValue={url} {...register("url")} />
+
       <Control>
         <Input
           aria-invalid={!!formState.errors?.name}

superpage/src/components/Course/Plans.astro

@@ -5,9 +5,14 @@ import Contact from "./Contact.jsx";
 ---
 
 <div
-    x-data="{ open: false }"
+    x-data="{ open: false, plan: null }"
     x-on:keydown.esc.prevent.stop="open = false"
-    x-effect="document.body.classList.toggle('overflow-hidden', open)"
+    x-effect="document.body.classList.toggle('overflow-hidden', open);
+
+    if (plan) {
+      $refs.plan.dataset.plan = plan;
+      window.dispatchEvent(new CustomEvent('planUpdate', { detail: plan }));
+    }"
 >
     {/* Modal */}
     <div style="display: none;" x-show="open">
@@ -35,6 +40,7 @@ import Contact from "./Contact.jsx";
                     <h1 class="text-3xl lg:text-4xl font-medium">
                         Preencha os dados da sua empresa
                     </h1>
+                    <div x-ref="plan" id="plan-ref" data-plan=""></div>
                     <Contact url={Astro.request.url} client:load />
                 </div>
             </div>
@@ -69,7 +75,7 @@ import Contact from "./Contact.jsx";
                         de agilidade.
                     </p>
                     <button
-                        x-on:click="open = true"
+                        x-on:click="open = true; plan = 'flexivel'"
                         class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais
@@ -97,7 +103,7 @@ import Contact from "./Contact.jsx";
                         Solução sob medida, direto no seu ambiente de trabalho.
                     </p>
                     <button
-                        x-on:click="open = true"
+                        x-on:click="open = true; plan = 'incompany'"
                         class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais
@@ -123,7 +129,7 @@ import Contact from "./Contact.jsx";
                         Seu time com o nosso conteúdo, na sua plataforma.
                     </p>
                     <button
-                        x-on:click="open = true"
+                        x-on:click="open = true; plan = 'conteudo'"
                         class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais