static/public/buyModal.min.js

const CATEGORY_CONFIG={3:{showLocation:!1,webhook:"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"},4:{showLocation:!0,webhook:"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"},5:{showLocation:!1,webhook:"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"},7:{showLocation:!1,webhook:"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"}};function getUrlParams(){return Object.fromEntries(new URLSearchParams(window.location.search).entries())}function addUtmFields(e){const t=getUrlParams(),o={utm_source:"homepage",utm_medium:"direct",utm_campaign:"none"};["utm_source","utm_medium","utm_campaign","utm_term","utm_content"].forEach(n=>{let d=e.querySelector(`input[name="${n}"]`);d||(d=document.createElement("input"),d.type="hidden",d.name=n,e.appendChild(d)),d.value=t[n]||o[n]||""})}function createModal(){const e=document.createElement("div");return e.id="buyNowModal",Object.assign(e.style,{position:"fixed",top:"0",left:"0",width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.6)",display:"none",justifyContent:"center",alignItems:"center",zIndex:"1000"}),e.innerHTML='\n    <div style="background: #fff; padding: 40px 30px; border-radius: 16px; max-width: 500px; width: 90%; position: relative; font-family: \'Arial\', sans-serif; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">\n      <span id="closeModal" style="position: absolute; top: 15px; right: 20px; cursor: pointer; font-weight: bold; font-size: 24px; color: #555;">&times;</span>\n      <h2 style="margin-bottom: 15px; font-size: 24px; color: #333;">Order Details</h2>\n      <p id="productText" style="margin-bottom: 25px; font-weight: 500; color: #555;"></p>\n\n      <form id="buyForm" style="display: flex; flex-direction: column; gap: 15px;">\n        <select name="location" id="locationSelect" required style="display: none; padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">\n          <option value="">Select Location</option>\n          <option value="Boston">Boston</option>\n          <option value="Manchester">Manchester</option>\n        </select>\n\n        <input type="text" name="name" placeholder="Name" required style="padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px;">\n        <input type="text" name="company" placeholder="Company" required style="padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px;">\n        <input type="text" name="country" placeholder="Country" required style="padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px;">\n        <input type="text" name="street" placeholder="Street" required style="padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px;">\n        <div style="display: flex; gap: 10px;">\n          <input type="text" name="zip" placeholder="ZIP" required style="max-width: 100px; flex: 1 1 0; padding: 12px 10px; border: 1px solid #ccc; border-radius: 8px;">\n          <input type="text" name="town" placeholder="Town" required style="flex: 2 1 0; padding: 12px 10px; border: 1px solid #ccc; border-radius: 8px;">\n        </div>\n        <input type="email" name="email" placeholder="Email" required style="padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px;">\n        <input type="hidden" name="product">\n        <input type="hidden" name="price">\n        <input type="hidden" name="id">\n        <input type="hidden" name="category">\n\n        <button id="submitBuy" type="submit" style="padding: 14px; background: #007BFF; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight: bold;">Send Order</button>\n      </form>\n\n      <div id="confirmation" style="display: none; margin-top: 20px; padding: 20px; background-color: #e6ffed; color: #056608; border-radius: 12px; text-align: center; font-weight: 500;">\n        <p>Thank you for your purchase! 🎉</p>\n        <button id="closeConfirmation" style="margin-top: 10px; padding: 10px 20px; background: #007BFF; color: #fff; border: none; border-radius: 8px; cursor: pointer;">Close</button>\n      </div>\n    </div>\n  ',document.body.appendChild(e),document.getElementById("closeModal").onclick=()=>e.style.display="none",document.getElementById("closeConfirmation").onclick=()=>{document.getElementById("confirmation").style.display="none",e.style.display="none"},e.onclick=t=>{t.target===e&&(e.style.display="none")},e}function openModal(e){const t=document.getElementById("buyNowModal"),o=t.querySelector("#buyForm"),n=t.querySelector("#confirmation");t.style.display="flex",o.style.display="flex",n.style.display="none";const d=e.split("/").filter(Boolean),[r,i,a,...c]=d,p=decodeURIComponent(c.join("/")),l=parseInt(a,10),s=CATEGORY_CONFIG[l]||{showLocation:!1,webhook:""},u=document.getElementById("locationSelect");s.showLocation?(u.style.display="block",u.setAttribute("required","true")):(u.style.display="none",u.removeAttribute("required"),u.value=""),o.querySelector('input[name="id"]').value=r||"",o.querySelector('input[name="price"]').value=i||"0",o.querySelector('input[name="category"]').value=a||"",o.querySelector('input[name="product"]').value=p||"Unknown",o.dataset.webhook=s.webhook||"",t.querySelector("#productText").textContent=`You will buy ${p} for $${i}.`,addUtmFields(o)}function handleFormSubmit(){const e=document.getElementById("buyForm"),t=document.getElementById("confirmation");e.addEventListener("submit",async o=>{o.preventDefault(),addUtmFields(e);const n=Object.fromEntries(new FormData(e).entries()),d=e.dataset.webhook;if(d)try{(await fetch(d,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)})).ok?(e.style.display="none",t.style.display="block",e.reset()):alert("Failed to submit form.")}catch(e){console.error(e),alert("Error submitting form.")}else alert("No webhook configured for this category.")})}function attachButtons(){Array.from(document.querySelectorAll("button, a")).forEach(e=>{const t=e.textContent.trim();"Buy Now"!==t&&"Book Now"!==t||e.addEventListener("click",t=>{t.preventDefault();openModal(e.getAttribute("href")||e.dataset.product||"Unknown/0/0")})})}document.addEventListener("DOMContentLoaded",()=>{createModal(),handleFormSubmit(),attachButtons()});