Spaces:

Sumup
/

scheduler

Sleeping

App Files Files Community

Sahanabg commited on Dec 10, 2025

Commit

fd40a84

verified ·

1 Parent(s): de9919b

Update index.html

Browse files

Files changed (1) hide show

index.html +123 -45

index.html CHANGED Viewed

@@ -10,7 +10,6 @@
 <body>
   <div class="container">
     <h2>Book a meeting with SumUp</h2>
-    <!-- SumUp Logo -->
     <form id="booking-form" aria-labelledby="form-heading">
       <input type="text" id="name" placeholder="Your First Name" required />
       <input type="email" id="email" placeholder="Your Email" required />
@@ -30,60 +29,139 @@
       <p><strong>Time:</strong> <span id="conf-slot"></span></p>
     </div>
   </div>
-  <!-- Embed the SVG directly in the HTML -->
-  <!-- svg class="logo" xmlns="http://www.w3.org/2000/svg" width="80" height="auto" viewBox="0 0 100 100"-->
-    <!-- Paste the entire SVG content here -->
-    <!-- Example of a simple SVG (replace with your actual SVG code) -->
-    <!-- path d="M58.2.5H5.1C2.7.5.7 2.5.7 4.9v52.8c0 2.4 2 4.4 4.4 4.4h53.1c2.4 0 4.4-2 4.4-4.4V4.9c0-2.5-2-4.4-4.4-4.4zM39.5 46.8c-5.4 5.4-14 5.6-19.7.7l-.1-.1c-.3-.3-.4-.9 0-1.3L38.9 27c.4-.3.9-.3 1.3 0 5 5.8 4.8 14.4-.7 19.8zm4-30.5L24.3 35.4c-.4.3-.9.3-1.3 0-5-5.7-4.8-14.3.6-19.7 5.4-5.4 14-5.6 19.7-.7 0 0 .1 0 .1.1.5.3.5.9.1 1.2z" stroke="black" fill="transparent"/-->
-  <!-- /svg-->
-  <img src="SumUp logo.png" alt="SumUp logo" class="logo" />
   <script>
-    // 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") || "";
-    // 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("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");
         });
     }
   </script>
 </body>
-</html>

 <body>
   <div class="container">
     <h2>Book a meeting with SumUp</h2>
     <form id="booking-form" aria-labelledby="form-heading">
       <input type="text" id="name" placeholder="Your First Name" required />
       <input type="email" id="email" placeholder="Your Email" required />
       <p><strong>Time:</strong> <span id="conf-slot"></span></p>
     </div>
   </div>
+  <img src="sumup-logo.png" alt="SumUp logo" class="logo" />
   <script>
+    let repEmail = "";
+    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";
+    }
+    // -------------------------------
+    // Auto-fill form from query params
+    // -------------------------------
     const urlParams = new URLSearchParams(window.location.search);
     const leadName = urlParams.get("ln") || "";
     const leadEmail = urlParams.get("le") || "";
     const salesRepEmailParam = urlParams.get("oe") || "";
     document.getElementById("name").value = leadName;
     document.getElementById("email").value = leadEmail;
+    async function fetchSlots(name, email, repEmailParam) {
       showSpinner();
       setStatus("Loading available slots...", "info");
+      try {
+        const res = await fetch(`/available?name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}&salesRepEmail=${encodeURIComponent(repEmailParam)}`);
+        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 || 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 fetch available slots.", "error");
+      }
+    }
+    // Auto-fetch slots if all query params are present
+    if (leadName && leadEmail && salesRepEmailParam) {
+      fetchSlots(leadName, leadEmail, salesRepEmailParam);
     }
+    // -------------------------------
+    // Form submit manually (optional)
+    // -------------------------------
+    const form = document.getElementById("booking-form");
+    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;
+      }
+      fetchSlots(name, email, salesRepEmailParam || repEmail);
+    });
+    // -------------------------------
+    // Booking
+    // -------------------------------
+    bookBtn.addEventListener("click", async () => {
+      const name = document.getElementById("name").value;
+      const email = document.getElementById("email").value;
+      const selectedSlot = slotsDropdown.value;
+      if (!selectedSlot || !repEmail) {
+        setStatus("Please select a time slot first.", "error");
+        return;
+      }
+      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
+          })
+        });
+        const result = await res.json();
+        hideSpinner();
+        if (result.message) setStatus(result.message, "success");
+        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();
+        setTimeout(() => { statusEl.style.display = "none"; }, 3000);
+      } catch (error) {
+        hideSpinner();
+        setStatus("Booking failed. Please try again.", "error");
+      }
+    });
   </script>
 </body>
+</html>