diff --git a/public/buyModal.js b/public/buyModal.js new file mode 100644 index 0000000..7b9cc07 --- /dev/null +++ b/public/buyModal.js @@ -0,0 +1,218 @@ +const WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"; + +function createModal() { + const modal = document.createElement("div"); + modal.id = "buyNowModal"; + modal.style.position = "fixed"; + modal.style.top = "0"; + modal.style.left = "0"; + modal.style.width = "100%"; + modal.style.height = "100%"; + modal.style.backgroundColor = "rgba(0,0,0,0.6)"; + modal.style.display = "none"; + modal.style.justifyContent = "center"; + modal.style.alignItems = "center"; + modal.style.zIndex = "1000"; + + modal.innerHTML = ` +
+ × + +

Order Details

+

+ +
+ + + + + + + + +
+ + +
+ + + + + + + +
+ +
+

Thank you for your purchase! 🎉

+ +
+
+ `; + + document.body.appendChild(modal); + + // Close modal + document.getElementById("closeModal").onclick = () => { document.getElementById("buyNowModal").style.display = "none"; }; + document.getElementById("closeConfirmation").onclick = () => { + document.getElementById("confirmation").style.display = "none"; + document.getElementById("buyNowModal").style.display = "none"; + }; + modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; }; + + return modal; +} + +function openModal(productHref) { + const modal = document.getElementById("buyNowModal"); + modal.style.display = "flex"; + + // Reset form display for repeated orders + const form = modal.querySelector("#buyForm"); + const confirmation = modal.querySelector("#confirmation"); + form.style.display = "flex"; + confirmation.style.display = "none"; + + // Parse productHref + let product = "Unknown"; + let price = "0"; + let id = ""; + + if (productHref.includes("/")) { + const parts = productHref.split("/").filter(Boolean); + id = parts[0] || ""; + price = parts[1] || "0"; + product = parts.slice(2).join("/"); // Join remaining parts for product name + product = decodeURIComponent(product); // Decode URL-encoded spaces etc. + } + + // Show/hide location select if ID starts with "_" + const locationSelect = document.getElementById("locationSelect"); + if (id.startsWith("_")) { + locationSelect.style.display = "block"; + locationSelect.setAttribute("required", "true"); + } else { + locationSelect.style.display = "none"; + locationSelect.removeAttribute("required"); + locationSelect.value = ""; // reset + } + + modal.querySelector('input[name="product"]').value = product; + modal.querySelector('input[name="price"]').value = price; + modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`; +} + +function handleFormSubmit() { + const form = document.getElementById("buyForm"); + const confirmation = document.getElementById("confirmation"); + + if (!form) { + console.error("Form not found!"); + return; + } + + form.addEventListener("submit", async (e) => { + console.log("handler"); + e.preventDefault(); + + const data = {}; + new FormData(form).forEach((value, key) => (data[key] = value)); + + try { + const res = await fetch(WEBHOOK_URL, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data) + }); + + if (res.ok) { + form.style.display = "none"; + confirmation.style.display = "block"; + form.reset(); + } else { + alert("Failed to submit form."); + } + } catch (err) { + console.error(err); + alert("Error submitting form."); + } + }); +} + +function attachButtons() { + const buttons = Array.from(document.querySelectorAll("button, a")); + buttons.forEach(btn => { + const text = btn.textContent.trim(); + if (text === "Buy Now" || text === "Book Now") { + btn.addEventListener("click", (e) => { + e.preventDefault(); + const href = btn.getAttribute("href") || btn.dataset.product || "Unknown/0"; + openModal(href); + }); + } + }); +} + +document.addEventListener("DOMContentLoaded", () => { + createModal(); + handleFormSubmit(); + attachButtons(); +}); + diff --git a/public/tryNow.js b/public/tryNow.js new file mode 100644 index 0000000..a53ddf0 --- /dev/null +++ b/public/tryNow.js @@ -0,0 +1,165 @@ +const TRYNOW_WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a"; + +function tryNow_createModal() { + const modal = document.createElement("div"); + modal.id = "trynowModal"; + modal.style.position = "fixed"; + modal.style.top = "0"; + modal.style.left = "0"; + modal.style.width = "100%"; + modal.style.height = "100%"; + modal.style.backgroundColor = "rgba(0,0,0,0.6)"; + modal.style.display = "none"; + modal.style.justifyContent = "center"; + modal.style.alignItems = "center"; + modal.style.zIndex = "1000"; + + modal.innerHTML = ` +
+ × + +

Order Details

+ +
+ + + + + + + +
+ +
+

Thank you for your submission! 🎉

+ +
+
+ `; + + document.body.appendChild(modal); + + // Close modal handlers + document.getElementById("trynowCloseModal").onclick = () => { modal.style.display = "none"; }; + document.getElementById("trynowCloseConfirmation").onclick = () => { + document.getElementById("trynowConfirmation").style.display = "none"; + modal.style.display = "none"; + }; + modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; }; + + return modal; +} + +function tryNow_handleFormSubmit() { + const form = document.getElementById("trynowForm"); + const confirmation = document.getElementById("trynowConfirmation"); + + form.addEventListener("submit", async (e) => { + e.preventDefault(); + const data = {}; + new FormData(form).forEach((value, key) => (data[key] = value)); + + try { + const res = await fetch(TRYNOW_WEBHOOK_URL, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data) + }); + + if (res.ok) { + form.style.display = "none"; + confirmation.style.display = "block"; + form.reset(); + } else { + alert("Failed to submit form."); + } + } catch (err) { + console.error(err); + alert("Error submitting form."); + } + }); +} + +function tryNow_attachButtons() { + const buttons = Array.from(document.querySelectorAll("a, button")); + buttons.forEach(btn => { + if (btn.textContent && btn.textContent.trim() === "Try Now") { + btn.addEventListener("click", (e) => { + e.preventDefault(); + const modal = document.getElementById("trynowModal"); + if (modal) { + modal.style.display = "flex"; + // Reset modal state + const form = document.getElementById("trynowForm"); + const confirmation = document.getElementById("trynowConfirmation"); + if (form && confirmation) { + form.style.display = "flex"; + confirmation.style.display = "none"; + } + } + }); + } + }); +} + + +document.addEventListener("DOMContentLoaded", () => { + tryNow_createModal(); + tryNow_handleFormSubmit(); + tryNow_attachButtons(); +}); + +