Ayobami
98 lines
3.6 KiB
Plaintext
98 lines
3.6 KiB
Plaintext
<%- include('partials/header') %>
|
|
<div class="calendar-container">
|
|
<div class="calendar-header">Calendar</div>
|
|
<div class="calendar-content">
|
|
<div class="calendar-labels">
|
|
<div class="calendar-label-main">Pick a date and time</div>
|
|
<div class="calendar-label-duration">Duration: <span>1 hour</span></div>
|
|
<div class="calendar-label-timezone">
|
|
Your timezone: <%= selectedTimezone %>
|
|
</div>
|
|
<% if (selectedDate && selectedTime) { %>
|
|
<div class="calendar-label-selected">
|
|
<strong>Selected:</strong> <%= selectedDate %> at <%= selectedTime %>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
<form class="booking-form" id="bookingForm">
|
|
<input type="hidden" name="date" value="<%= selectedDate %>" />
|
|
<input type="hidden" name="time" value="<%= selectedTime %>" />
|
|
<input type="hidden" name="tz" value="<%= selectedTimezone %>" />
|
|
<div class="form-group">
|
|
<label for="fullName">Full Name</label>
|
|
<input type="text" id="fullName" name="name" required />
|
|
<div class="form-error" id="error-name"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" required />
|
|
<div class="form-error" id="error-email"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="company">Company</label>
|
|
<input type="text" id="company" name="company" required />
|
|
<div class="form-error" id="error-company"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">Phone</label>
|
|
<input type="tel" id="phone" name="phone" required />
|
|
<div class="form-error" id="error-phone"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="notes">Your Notes</label>
|
|
<textarea id="notes" name="notes" required></textarea>
|
|
<div class="form-error" id="error-notes"></div>
|
|
</div>
|
|
<button type="submit" class="form-submit-btn">Done</button>
|
|
<div class="form-error" id="error-date"></div>
|
|
<div class="form-error" id="error-time"></div>
|
|
<div class="form-error" id="error-timezone"></div>
|
|
<div class="form-error" id="error-general"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<%- include('partials/footer') %>
|
|
<script>
|
|
document.getElementById("bookingForm").onsubmit = async function (e) {
|
|
e.preventDefault();
|
|
// Clear previous errors
|
|
document
|
|
.querySelectorAll(".form-error")
|
|
.forEach((el) => (el.textContent = ""));
|
|
const form = e.target;
|
|
const data = {
|
|
name: form.fullName.value,
|
|
email: form.email.value,
|
|
company: form.company.value,
|
|
phone: form.phone.value,
|
|
notes: form.notes.value,
|
|
date: form.date.value,
|
|
time: form.time.value,
|
|
timezone: form.tz.value,
|
|
};
|
|
try {
|
|
const res = await fetch("/api/bookings", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
});
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
window.location.href = "/success";
|
|
} else if (result.error) {
|
|
if (typeof result.error === "object") {
|
|
for (const key in result.error) {
|
|
const el = document.getElementById("error-" + key);
|
|
if (el) el.textContent = result.error[key];
|
|
}
|
|
} else {
|
|
document.getElementById("error-general").textContent = result.error;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
document.getElementById("error-general").textContent =
|
|
"An error occurred. Please try again.";
|
|
}
|
|
};
|
|
</script>
|