Update index.html

index.html

@@ -39,131 +39,50 @@
   <img src="SumUp logo.png" alt="SumUp logo" class="logo" />
   
   <script>
-    let repEmail = ""; // Stored internally
-    let selectedSlotInfo = null;
-
-    const form = document.getElementById("booking-form");
-    const slotsDropdown = document.getElementById("slots");
-    const bookBtn = document.getElementById("bookBtn");
-    const statusEl = document.getElementById("status");
-    const spinner = document.getElementById("spinner");
-
-    function showSpinner() {
-      spinner.style.display = "block";
-    }
-
-    function hideSpinner() {
-      spinner.style.display = "none";
-    }
-
-    function setStatus(message, type = "info") {
-      statusEl.className = "";
-      statusEl.classList.add(`status-${type}`);
-      statusEl.innerText = message;
-      statusEl.style.display = "block";
-    }
-
-    form.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const name = document.getElementById("name").value;
-      const email = document.getElementById("email").value;
-
-      if (!name || !email) {
-        setStatus("Please enter your name and email.", "error");
-        return;
-      }
-
-      showSpinner();
-      setStatus("Checking availability...", "info");
-
-      try {
-        const res = await fetch(`/available?name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`);
-        const data = await res.json();
-        hideSpinner();
-
-        if (data.error) {
-          setStatus(data.error, "error");
-          return;
-        }
-
-        repEmail = data.repEmail;
-        const slots = data.slots;
-        slotsDropdown.innerHTML = "";
-
-        if (slots.length === 0) {
-          setStatus("No available time slots found.", "error");
-          return;
-        }
-
-        slots.forEach(slot => {
-          const option = document.createElement("option");
-          option.value = slot.start;
-          option.text = new Date(slot.start).toLocaleString();
-          slotsDropdown.appendChild(option);
-        });
-
-        slotsDropdown.style.display = "block";
-        bookBtn.style.display = "inline-block";
-        setStatus("Select a time slot to book.", "success");
-
-      } catch (error) {
-        hideSpinner();
-        setStatus("Failed to retrieve availability.", "error");
-      }
-    });
-
-    bookBtn.addEventListener("click", async () => {
-      const name = document.getElementById("name").value;
-      const email = document.getElementById("email").value;
-      const selectedSlot = slotsDropdown.value;
+    // Read query parameters from URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const leadName = urlParams.get("ln") || "";
+    const leadEmail = urlParams.get("le") || "";
+    const salesRepEmailParam = urlParams.get("oe") || "";
     
-      if (!selectedSlot || !repEmail) {
-        setStatus("Please select a time slot first.", "error");
-        return;
-      }
+    // Pre-fill the form
+    document.getElementById("name").value = leadName;
+    document.getElementById("email").value = leadEmail;
     
+    // If all parameters exist, auto-fetch available slots
+    if (leadName && leadEmail && salesRepEmailParam) {
       showSpinner();
-      setStatus("Booking your meeting...", "info");
-    
-      try {
-        const res = await fetch("/book", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            name,
-            email,
-            salesRepEmail: repEmail,
-            selectedSlot
-          })
+      setStatus("Loading available slots...", "info");
+      fetch(`/available?name=${encodeURIComponent(leadName)}&email=${encodeURIComponent(leadEmail)}&salesRepEmail=${encodeURIComponent(salesRepEmailParam)}`)
+        .then(res => res.json())
+        .then(data => {
+          hideSpinner();
+          if (data.error) {
+            setStatus(data.error, "error");
+            return;
+          }
+          repEmail = data.repEmail;
+          const slots = data.slots;
+          slotsDropdown.innerHTML = "";
+          if (slots.length === 0) {
+            setStatus("No available time slots found.", "error");
+            return;
+          }
+          slots.forEach(slot => {
+            const option = document.createElement("option");
+            option.value = slot.start;
+            option.text = new Date(slot.start).toLocaleString();
+            slotsDropdown.appendChild(option);
+          });
+          slotsDropdown.style.display = "block";
+          bookBtn.style.display = "inline-block";
+          setStatus("Select a time slot to book.", "success");
+        })
+        .catch(err => {
+          hideSpinner();
+          setStatus("Failed to fetch available slots.", "error");
         });
-    
-        const resultText = await res.text();
-        hideSpinner();
-    
-        setStatus("", "success");
-    
-        // 🔥 Apply fade-in effect
-        const confirmationPanel = document.getElementById("confirmation");
-        confirmationPanel.classList.add("visible");
-    
-        document.getElementById("conf-name").innerText = name;
-        document.getElementById("conf-email").innerText = email;
-        document.getElementById("conf-slot").innerText = new Date(selectedSlot).toLocaleString();
-    
-        slotsDropdown.style.display = "none";
-        bookBtn.style.display = "none";
-        form.reset();
-    
-        // Optional: hide status after a few seconds
-        setTimeout(() => {
-          statusEl.style.display = "none";
-        }, 3000);
-    
-      } catch (error) {
-        hideSpinner();
-        setStatus("Booking failed. Please try again.", "error");
-      }
-    });
+    }
     
   </script>
 </body>