wiup

2025-05-05 15:50:04 -03:00
parent 8b047e56fd
commit 1257e4ad81
9 changed files with 386 additions and 86 deletions
--- a/superpage/src/components/Course/BuyDropdown.astro
+++ b/superpage/src/components/Course/BuyDropdown.astro
@@ -1,12 +1,52 @@
+---
+const { course } = Astro.props;
+const currency = new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+}).format(course.unit_price);
+---
+
 <details class:list={["group relative group", Astro.props.class]}>
    <summary
        class="flex bg-black hover:bg-white hover:text-black group-open:text-black group-open:bg-white font-semibold py-2.5 px-3 rounded-md cursor-pointer transition"
    >
-        <slot name="label" />
+        Contratar agora
    </summary>
    <div
-        class="absolute right-0 top-full translate-y-1 bg-stone-900 border border-white/15 min-w-74 rounded-lg shadow drop-shadow"
+        class="absolute right-0 top-full translate-y-1 bg-stone-900 border border-white/15 min-w-78 rounded-lg shadow drop-shadow p-2.5"
    >
-        <slot />
+        <strong>Selecione a opção:</strong>
+        <ul>
+            <li
+                class="p-2.5 hover:bg-white/10 rounded-lg flex gap-2.5 items-center"
+            >
+                <input
+                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
+                />
+                <span class="uppercase">EDUSEG&reg; Flexível</span>
+            </li>
+            <li class="p-2.5 hover:bg-white/10 rounded-lg">
+                <input
+                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
+                />
+                <span class="uppercase">EDUSEG&reg; In-Company</span>
+            </li>
+            <li class="p-2.5 hover:bg-white/10 rounded-lg">
+                <input
+                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
+                />
+                <span class="uppercase">EDUSEG&reg; Conteúdo</span>
+            </li>
+            <li class="p-2.5 hover:bg-white/10 rounded-lg">
+                <input
+                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
+                />
+                <span>Contratar {currency} p/ matrícula</span>
+            </li>
+        </ul>
+        <button
+            class="p-2.5 bg-lime-400 rounded-lg w-full text-black text-semibold"
+            >Continuar</button
+        >
    </div>
 </details>
--- a/superpage/src/components/Course/Contact.jsx
+++ b/superpage/src/components/Course/Contact.jsx
@@ -4,7 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import clsx from "clsx";
 import { z } from "zod";

-const N8N_URL = "https://n8n.eduseg.com.br/webhook/eduseg";
+// const N8N_URL = "https://n8n.eduseg.com.br/webhook/eduseg";
+const N8N_URL = "https://n8n.eduseg.com.br/webhook-test/eduseg";

 const schema = z.object({
  name: z.string().nonempty({ message: "Deve preencher o nome" }),
@@ -17,6 +18,12 @@ const schema = z.object({
  message: z.string().nonempty({ message: "Deve preencher a mensagem" }),
 });

+const solutions = [
+  "EDUSEG® FLEXÍVEL",
+  "EDUSEG® IN-COMPANY",
+  "EDUSEG® CONTEÚDO",
+];
+
 export default function Contact({ url }) {
  const { register, formState, control, reset, setValue } = useForm({
    resolver: zodResolver(schema),
@@ -24,13 +31,13 @@ export default function Contact({ url }) {

  useEffect(() => {
    const handler = (e) => {
-      setValue("plan", e.detail);
+      setValue("solution", e.detail);
    };

-    window.addEventListener("planUpdate", handler);
+    window.addEventListener("custom_event:solution", handler);

    return () => {
-      window.removeEventListener("planUpdate", handler);
+      window.removeEventListener("custom_event:solution", handler);
    };
  }, [setValue]);

@@ -47,13 +54,24 @@ export default function Contact({ url }) {
        </p>
      )}

-      <input type="hidden" {...register("plan")} />
+      <input type="hidden" {...register("solution")} />
      <input type="hidden" defaultValue={url} {...register("url")} />

+      <Control>
+        <Input as="select" disabled {...register("solution")}>
+          {solutions.map((text, idx) => (
+            <option value={text} key={idx}>
+              {text}
+            </option>
+          ))}
+        </Input>
+      </Control>
+
      <Control>
        <Input
          aria-invalid={!!formState.errors?.name}
          placeholder="Digite seu nome"
+          autoFocus={true}
          {...register("name")}
        />
        <Error>{formState.errors.name?.message}</Error>
@@ -107,16 +125,21 @@ export default function Contact({ url }) {
  );
 }

-export function Input({ as = "input", className, ...props }) {
-  return createElement(as, {
-    className: clsx(
-      "bg-white/5 focus:bg-white/15 rounded-lg p-3 w-full border border-white/10 focus:border-lime-400 focus:outline-0 transition",
-      "placeholder-white/70",
-      "aria-invalid:border-red-600",
-      className,
-    ),
-    ...props,
-  });
+export function Input({ as = "input", className, children, ...props }) {
+  return createElement(
+    as,
+    {
+      className: clsx(
+        "bg-white/10 focus:bg-white/15 rounded-lg p-3 w-full border border-white/10 focus:border-lime-400 focus:outline-0 transition appearance-none ",
+        "placeholder-white/70",
+        "disabled:bg-white/5 disabled:text-white/30",
+        "aria-invalid:border-red-600",
+        className,
+      ),
+      ...props,
+    },
+    children,
+  );
 }

 function Control({ children, className }) {
--- a/superpage/src/components/Course/HeaderNav.astro
+++ b/superpage/src/components/Course/HeaderNav.astro
@@ -9,7 +9,7 @@ const courses = await getCollection(
    ({ data }) => data.draft != true,
 );

-const { title, course } = Astro.props;
+const { title } = Astro.props;
 ---

 <nav class="sticky top-0 z-10 bg-lime-400 py-3 drop-shadow shadow-sm">
@@ -25,22 +25,7 @@ const { title, course } = Astro.props;
            <Icon name="chevron-down" aria-hidden="true" class="size-4 mt-1" />
        </button>

-        <BuyDropdown class="ml-auto">
-            <Fragment slot="label">Contratar agora</Fragment>
-            <ul class="divide-y divide-white/10">
-                <li class="uppercase py-2.5 px-5">EDUSEG&reg; Flexível</li>
-                <li class="uppercase py-2.5 px-5">EDUSEG&reg; In-Company</li>
-                <li class="uppercase py-2.5 px-5">EDUSEG&reg; Conteúdo</li>
-                <li class="py-2.5 px-5">
-                    Contratar {
-                        new Intl.NumberFormat("pt-BR", {
-                            style: "currency",
-                            currency: "BRL",
-                        }).format(course.unit_price)
-                    } p/ matrícula
-                </li>
-            </ul>
-        </BuyDropdown>
+        <BuyDropdown class="ml-auto" {...Astro.props} />
    </Container>

    <dialog
--- a/superpage/src/components/Course/Solutions.astro
+++ b/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>
--- a/superpage/src/pages/_components/Search.astro
+++ b/superpage/src/pages/_components/Search.astro
@@ -15,6 +15,8 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 </div>

 <script>
+    window.dataLayer = window.dataLayer || [];
+
    import { PagefindUI } from "@pagefind/default-ui";

    const element = "#pagefind-ui";
@@ -25,7 +27,7 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
            const bundlePath = selector.getAttribute("data-bundle-path");
            // Pagefind UI configuration options
            // https://pagefind.app/docs/ui/
-            new PagefindUI({
+            const search = new PagefindUI({
                element,
                bundlePath,
                autofocus: true,
@@ -33,9 +35,9 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
                pageSize: 5,
            });

-            const a =
-                selector.querySelector<HTMLInputElement>(`input[type="text"]`);
-            console.log(a);
+            console.log(search._pfs);
+            // search._pfs.$$set({ trigger_search_term: "aa" })
+            // console.log();
        }
    }

--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -22,7 +22,7 @@ const trends = await getEntries([
 ]);
 ---

-<Layout>
+<Layout title="Educação que garante sua segurança">
    <div class="space-y-6 lg:space-y-24">
        <Container>
            <nav