astro.config.mjs

@@ -6,6 +6,8 @@ import markdoc from "@astrojs/markdoc";
 import icon from "astro-icon";
 import node from "@astrojs/node";
 
+import vue from "@astrojs/vue";
+
 // https://astro.build/config
 export default defineConfig({
   vite: {
@@ -14,7 +16,7 @@ export default defineConfig({
 
   //base: '/mockup/',
 
-  integrations: [markdoc(), icon()],
+  integrations: [markdoc(), icon(), vue()],
 
   i18n: {
     locales: ["es", "en", "fr", "he", "uk", "pt-br"],

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@astrojs/markdoc": "^0.15.10",
     "@astrojs/node": "^9.5.3",
+    "@astrojs/vue": "^5.1.4",
     "@dotenvx/dotenvx": "^1.52.0",
     "@iconify-json/ph": "^1.2.2",
     "@tailwindcss/vite": "^4.1.18",
@@ -22,7 +23,8 @@
     "dayjs": "^1.11.19",
     "googleapis": "^171.4.0",
     "swiper": "^12.1.0",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "vue": "^3.5.28"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",

src/components/BoxContainer.astro

@@ -2,7 +2,8 @@
 const { props } = Astro.props;
 import { Icon } from "astro-icon/components";
 import Button from "./ui/Button.astro";
-import Modal from "./Modal.astro";
+import RegisterModal from "../components/RegisterModal.vue";
+
 const background = props.bgImage || props.bgColor;
 
 ---
@@ -27,7 +28,7 @@ const background = props.bgImage || props.bgColor;
 
     {props.hasInput && (
         <div class="flex gap-2 w-full mt-5">
-           <Modal />
+            <RegisterModal client:load />
         </div>
     )}
     </div>

src/components/Modal.astro

@@ -1,85 +0,0 @@
----
-import Button from "./ui/Button.astro";
-import { Icon } from "astro-icon/components";
-const { id, title } = Astro.props;
----
-
-<!-- Open the modal using ID.showModal() method -->
-<button class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg" onclick="my_modal_5.showModal()">Registrate</button>
-<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
-  <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
-    <form method="dialog">
-            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"><Icon name="ph:x" class="text-2xl" /></button>
-    </form>
-    <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">Formulario de Registro</h3>
-    <div class="form py-4 mt-6 ">
-
-        <form id="voluteenFrom"
-            action="/api/emailPostulacion/send"
-            method="post"
-            class="flex flex-col gap-2 place-items-center">
-
-            <label class="input rounded-none bg-white">
-                <span>Nombres <span class="text-error">*</span></span>
-                <input name="nombres" type="text" placeholder="Nombres"
-                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-                    required />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>Apellidos <span class="text-error">*</span></span>
-                <input name="apellidos" type="text" placeholder="Apellidos"
-                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-                    required />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>País</span>
-                <input name="pais" type="text" placeholder="Pais"
-                    class="w-full max-w-xs rounded-none" />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>Lugar</span>
-                <input name="lugar" type="text" placeholder="Lugar"
-                    class="w-full max-w-xs rounded-none" />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>Dirección</span>
-                <input name="direccion" type="text" placeholder="Dirección"
-                    class="w-full max-w-xs rounded-none" />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>Teléfono <span class="text-error">*</span></span>
-                <input name="telefono" type="text" placeholder="Teléfono"
-                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-                    required />
-            </label>
-
-            <label class="input validator rounded-none bg-white">
-                <span>Email <span class="text-error">*</span></span>
-                <input name="email" type="email"
-                    placeholder="Ingresa Correo Electrónico"
-                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-                    required />
-            </label>
-
-            <button type="submit"
-                class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
-                Enviar
-            </button>
-
-        </form>
-
-
-    </div>
-  </div>
-</dialog>
-
-<script>
-    
-
-
-</script>

src/components/RegisterModal.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from "vue";
+
+const loading = ref(false);
+const modalRef = ref(null);
+
+const openModal = () => {
+    modalRef.value?.showModal();
+};
+
+const closeModal = () => {
+    modalRef.value?.close();
+};
+
+const handleSubmit = async (e) => {
+  e.preventDefault();
+
+  loading.value = true;
+  
+  const formData = new FormData(e.target);
+
+  try {
+    const response = await fetch("/api/emailPostulacion/send", {
+      method: "POST",
+      body: formData,
+    });
+
+    if (!response.ok) throw new Error();
+
+  } catch (error) {
+    console.error(error);
+  } finally {
+    e.target.reset();
+    loading.value = false;
+    closeModal();
+  }
+};
+</script>
+
+<template>
+  <!-- BOTÓN ORIGINAL (MISMAS CLASES) -->
+<button
+  @click="openModal"
+  class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
+>
+  Registrate
+</button>
+
+  <dialog ref="modalRef" id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
+    <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
+
+      <form method="dialog">
+        <button
+        v-on:click="closeModal"
+        type="button"
+        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+        >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-6 h-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+        >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M6 18L18 6M6 6l12 12" />
+        </svg>
+        </button>
+      </form>
+
+      <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">
+        Formulario de Registro
+      </h3>
+
+      <div class="form py-4 mt-6 ">
+
+        <form
+          id="voluteenFrom"
+          action="/api/emailPostulacion/send"
+          method="post"
+          @submit="handleSubmit"
+          class="flex flex-col gap-2 place-items-center">
+
+          <label class="input rounded-none bg-white">
+            <span>Nombres <span class="text-error">*</span></span>
+            <input name="nombres" type="text" placeholder="Nombres"
+              class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+              required />
+          </label>
+
+          <label class="input rounded-none bg-white">
+            <span>Apellidos <span class="text-error">*</span></span>
+            <input name="apellidos" type="text" placeholder="Apellidos"
+              class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+              required />
+          </label>
+
+          <label class="input rounded-none bg-white">
+            <span>País</span>
+            <input name="pais" type="text" placeholder="Pais"
+              class="w-full max-w-xs rounded-none" />
+          </label>
+
+          <label class="input rounded-none bg-white">
+            <span>Lugar</span>
+            <input name="lugar" type="text" placeholder="Lugar"
+              class="w-full max-w-xs rounded-none" />
+          </label>
+
+          <label class="input rounded-none bg-white">
+            <span>Dirección</span>
+            <input name="direccion" type="text" placeholder="Dirección"
+              class="w-full max-w-xs rounded-none" />
+          </label>
+
+          <label class="input rounded-none bg-white">
+            <span>Teléfono <span class="text-error">*</span></span>
+            <input name="telefono" type="text" placeholder="Teléfono"
+              class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+              required />
+          </label>
+
+          <label class="input validator rounded-none bg-white">
+            <span>Email <span class="text-error">*</span></span>
+            <input name="email" type="email"
+              placeholder="Ingresa Correo Electrónico"
+              class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+              required />
+          </label>
+
+          <!-- MISMO BOTÓN, SOLO AGREGAMOS :disabled -->
+          <button
+            type="submit"
+            :disabled="loading"
+            class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
+
+            {{ loading ? "Enviando..." : "Enviar" }}
+
+          </button>
+        </form>
+
+      </div>
+    </div>
+  </dialog>
+</template>

tsconfig.json

@@ -1,5 +1,13 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
+  "include": [
-  "exclude": ["dist"]
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
 }