feat: split components into mybizapp.js + trial_modal.html, add show_calendar()
This commit is contained in:
oliver
@@ -0,0 +1,629 @@
|
||||
/**
|
||||
* mybizapp.js — my-biz.app UI Components
|
||||
* ========================================
|
||||
* Provides two global modal functions:
|
||||
*
|
||||
* show_trial(plan?) — free-trial sign-up modal
|
||||
* HTML lives in components/trial_modal.html (lazy-fetched)
|
||||
*
|
||||
* show_calendar() — book-a-meeting modal (Google Calendar iframe)
|
||||
*
|
||||
* CONFIGURATION (set before this script loads)
|
||||
* ----------------------------------------------
|
||||
* window.TrialModalConfig = {
|
||||
* webhook : string — POST endpoint (multipart/form-data)
|
||||
* product : string — hidden field value (default: "odoo_19")
|
||||
* title : string — modal heading
|
||||
* subtitle : string — modal sub-heading
|
||||
* submitLabel : string — submit button label
|
||||
* confirmTitle : string — success heading
|
||||
* confirmSub : string — success body text
|
||||
* calendarUrl : string — Google Calendar embed URL
|
||||
* triggerSelector : string — CSS selectors for trial triggers
|
||||
* (default: "#open-modal, .open-modal")
|
||||
* calendarSelector : string — CSS selectors for calendar triggers
|
||||
* (default: ".open-calendar")
|
||||
* locations : Array<{ value: string, label: string }>
|
||||
* utm_source / utm_medium / utm_campaign / utm_term / utm_content
|
||||
* }
|
||||
*
|
||||
* AUTO-WIRING (on DOMContentLoaded)
|
||||
* ------------------------------------
|
||||
* #open-modal, .open-modal → show_trial(data-plan?)
|
||||
* .open-calendar → show_calendar()
|
||||
*
|
||||
* DESIGN TOKENS (CSS custom properties, fallback to my-biz.app theme)
|
||||
* --------------------------------------------------------------------
|
||||
* --tm-bg, --tm-card, --tm-white, --tm-silver, --tm-grey
|
||||
* --tm-gold, --tm-gold-hi, --tm-gold-lo, --tm-gold-glow, --tm-border, --tm-radius
|
||||
*/
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 1. BASE PATH (resolved from this script's src) */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
var _scriptBase = (function () {
|
||||
var s = document.currentScript;
|
||||
if (s && s.src) return s.src.replace(/\/[^/]+$/, "/") + "/";
|
||||
return "components/";
|
||||
})();
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 2. CONFIG */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
var DEFAULTS = {
|
||||
webhook: "",
|
||||
product: "odoo_19",
|
||||
title: "Start Your 4 Weeks Free Trial",
|
||||
subtitle: "Test drive your back-office in a 4-week free trial.",
|
||||
submitLabel: "Start Free Trial",
|
||||
confirmTitle: "Thank you! \uD83C\uDF89",
|
||||
confirmSub: "We\u2019ve received your request and a specialist will be in touch within one business day.",
|
||||
calendarUrl: "https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3DDbaiHFlhNhWySszAQoPXE_H73QLqYT3w7H9IYWC76RA_TgNIhLESjb4N7ep_D2D_OyW9q4-c",
|
||||
triggerSelector: "#open-modal, .open-modal",
|
||||
calendarSelector: ".open-calendar",
|
||||
locations: [
|
||||
{ value: "boston", label: "\uD83C\uDDFA\uD83C\uDDF8 Boston" },
|
||||
{ value: "manchester", label: "\uD83C\uDDEC\uD83C\uDDE7 Manchester" },
|
||||
{ value: "mumbai", label: "\uD83C\uDDEE\uD83C\uDDF3 Mumbai" },
|
||||
{ value: "saopaulo", label: "\uD83C\uDDE7\uD83C\uDDF7 S\u00e3o Paulo" },
|
||||
{ value: "meppel", label: "\uD83C\uDDF3\uD83C\uDDF1 Meppel" },
|
||||
{ value: "sydney", label: "\uD83C\uDDE6\uD83C\uDDFA Sydney" },
|
||||
],
|
||||
utm_source: "homepage",
|
||||
utm_medium: "direct",
|
||||
utm_campaign: "none",
|
||||
utm_term: "",
|
||||
utm_content: "",
|
||||
};
|
||||
|
||||
var cfg = {};
|
||||
for (var k in DEFAULTS) {
|
||||
if (Object.prototype.hasOwnProperty.call(DEFAULTS, k)) cfg[k] = DEFAULTS[k];
|
||||
}
|
||||
var userCfg = window.TrialModalConfig || {};
|
||||
for (var k in userCfg) {
|
||||
if (Object.prototype.hasOwnProperty.call(userCfg, k)) cfg[k] = userCfg[k];
|
||||
}
|
||||
|
||||
/* URL query string overrides UTM config */
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"].forEach(function (p) {
|
||||
var v = urlParams.get(p);
|
||||
if (v) cfg[p] = v;
|
||||
});
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 3. INJECT SHARED CSS */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
var CSS = [
|
||||
/* Token fallbacks — scoped so host-page :root overrides still win */
|
||||
"#tm-overlay, #cal-overlay {",
|
||||
" --tm-bg: rgba(62,39,35,0.84);",
|
||||
" --tm-card: #fff3e0;",
|
||||
" --tm-white: #3e2723;",
|
||||
" --tm-silver: #6d4c41;",
|
||||
" --tm-grey: #a1887f;",
|
||||
" --tm-gold: #e65100;",
|
||||
" --tm-gold-hi: #fb8c00;",
|
||||
" --tm-gold-lo: #bf360c;",
|
||||
" --tm-gold-glow: rgba(230,81,0,0.18);",
|
||||
" --tm-border: rgba(230,81,0,0.18);",
|
||||
" --tm-radius: 28px;",
|
||||
"}",
|
||||
|
||||
/* ---- Shared overlay ---- */
|
||||
"#tm-overlay, #cal-overlay {",
|
||||
" position: fixed; inset: 0; z-index: 9900;",
|
||||
" display: none; align-items: center; justify-content: center;",
|
||||
" padding: 20px;",
|
||||
" background: var(--tm-bg);",
|
||||
" backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);",
|
||||
" box-sizing: border-box;",
|
||||
"}",
|
||||
|
||||
/* ================================================================ */
|
||||
/* TRIAL MODAL */
|
||||
/* ================================================================ */
|
||||
|
||||
"#tm-box {",
|
||||
" position: relative; width: 100%; max-width: 640px;",
|
||||
" padding: 44px; background: var(--tm-card);",
|
||||
" border-radius: var(--tm-radius);",
|
||||
" border: 1px solid rgba(230,81,0,0.24);",
|
||||
" box-shadow: 0 30px 90px rgba(0,0,0,0.3);",
|
||||
" box-sizing: border-box;",
|
||||
"}",
|
||||
|
||||
"#tm-close {",
|
||||
" position: absolute; top: 18px; right: 18px;",
|
||||
" width: 40px; height: 40px; border-radius: 50%;",
|
||||
" color: var(--tm-grey); background: rgba(93,64,55,0.05);",
|
||||
" font-size: 1.2rem; border: none; cursor: pointer; line-height: 1;",
|
||||
"}",
|
||||
"#tm-close:hover { color: var(--tm-gold); }",
|
||||
|
||||
"#tm-box .tm-title {",
|
||||
" font-family: Georgia, 'Times New Roman', serif;",
|
||||
" font-size: 2.2rem; font-weight: 700; line-height: 1.05; margin: 0 0 10px;",
|
||||
" background: linear-gradient(135deg, var(--tm-gold-lo) 0%, var(--tm-gold) 38%, var(--tm-gold-hi) 55%, var(--tm-gold) 75%, var(--tm-gold-lo) 100%);",
|
||||
" -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;",
|
||||
"}",
|
||||
|
||||
"#tm-box .tm-subtitle {",
|
||||
" font-size: 0.9rem; color: var(--tm-silver); margin: 0 0 26px;",
|
||||
"}",
|
||||
|
||||
".tm-grid {",
|
||||
" display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px;",
|
||||
"}",
|
||||
".tm-field-group { margin-bottom: 18px; }",
|
||||
".tm-grid .tm-field-group.full { grid-column: 1 / -1; }",
|
||||
|
||||
".tm-label {",
|
||||
" display: block; margin-bottom: 8px;",
|
||||
" font-size: 0.62rem; font-family: system-ui, -apple-system, sans-serif;",
|
||||
" text-transform: uppercase; letter-spacing: 0.08em; color: var(--tm-gold);",
|
||||
"}",
|
||||
|
||||
".tm-field {",
|
||||
" width: 100%; padding: 14px 16px; border-radius: 16px;",
|
||||
" background: rgba(93,64,55,0.05); border: 1px solid var(--tm-border);",
|
||||
" color: var(--tm-white); box-sizing: border-box; font: inherit; outline: none;",
|
||||
"}",
|
||||
".tm-field:focus { border-color: var(--tm-gold); box-shadow: 0 0 0 3px var(--tm-gold-glow); }",
|
||||
".tm-field::placeholder { color: var(--tm-grey); }",
|
||||
|
||||
".tm-select { position: relative; }",
|
||||
".tm-select-btn { position: relative; text-align: left; cursor: pointer; padding-right: 42px; background: none; border: none; }",
|
||||
".tm-select-btn::after {",
|
||||
" content: ''; position: absolute; right: 16px; top: 50%;",
|
||||
" width: 14px; height: 8px; transform: translateY(-50%);",
|
||||
" background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E65100' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");",
|
||||
" background-repeat: no-repeat; background-position: center; pointer-events: none;",
|
||||
"}",
|
||||
".tm-select-btn.is-placeholder { color: var(--tm-grey); }",
|
||||
|
||||
".tm-select-menu {",
|
||||
" position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 3;",
|
||||
" max-height: 220px; padding: 8px; background: var(--tm-card);",
|
||||
" border: 1px solid var(--tm-border); border-radius: 16px;",
|
||||
" box-shadow: 0 18px 40px rgba(62,39,35,0.16); overflow-y: auto; display: none;",
|
||||
"}",
|
||||
".tm-select.open .tm-select-menu { display: block; }",
|
||||
|
||||
".tm-select-option {",
|
||||
" width: 100%; padding: 10px 12px; border: none; border-radius: 12px;",
|
||||
" background: transparent; color: var(--tm-white);",
|
||||
" text-align: left; font: inherit; cursor: pointer;",
|
||||
" transition: background 0.2s, color 0.2s;",
|
||||
"}",
|
||||
".tm-select-option:hover, .tm-select-option:focus-visible, .tm-select-option.is-selected {",
|
||||
" outline: none; background: rgba(230,81,0,0.1); color: var(--tm-gold);",
|
||||
"}",
|
||||
|
||||
".tm-submit {",
|
||||
" width: 100%; margin-top: 8px; padding: 15px 20px; border-radius: 50px; border: none;",
|
||||
" cursor: pointer; font-family: system-ui, -apple-system, sans-serif;",
|
||||
" font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;",
|
||||
" color: var(--tm-card);",
|
||||
" background: linear-gradient(135deg, var(--tm-gold-lo) 0%, var(--tm-gold) 38%, var(--tm-gold-hi) 55%, var(--tm-gold) 75%, var(--tm-gold-lo) 100%);",
|
||||
" transition: opacity 0.2s;",
|
||||
"}",
|
||||
".tm-submit:hover { opacity: 0.88; }",
|
||||
".tm-submit:disabled { opacity: 0.56; cursor: not-allowed; }",
|
||||
|
||||
"#tm-confirm { display: none; text-align: center; padding-top: 8px; }",
|
||||
"#tm-confirm .tm-confirm-title {",
|
||||
" font-family: Georgia, 'Times New Roman', serif;",
|
||||
" font-size: 1.6rem; color: var(--tm-gold-hi); margin: 0 0 12px;",
|
||||
"}",
|
||||
"#tm-confirm .tm-confirm-sub { color: var(--tm-silver); font-size: 0.9rem; margin: 0 0 24px; }",
|
||||
|
||||
/* ================================================================ */
|
||||
/* CALENDAR MODAL */
|
||||
/* ================================================================ */
|
||||
|
||||
"#cal-box {",
|
||||
" position: relative; width: 100%; max-width: 780px;",
|
||||
" background: var(--tm-card);",
|
||||
" border-radius: var(--tm-radius);",
|
||||
" border: 1px solid rgba(230,81,0,0.24);",
|
||||
" box-shadow: 0 30px 90px rgba(0,0,0,0.3);",
|
||||
" box-sizing: border-box; overflow: hidden;",
|
||||
"}",
|
||||
|
||||
"#cal-header {",
|
||||
" display: flex; align-items: center; justify-content: space-between;",
|
||||
" padding: 22px 32px;",
|
||||
" border-bottom: 1px solid var(--tm-border);",
|
||||
"}",
|
||||
|
||||
"#cal-header .cal-title {",
|
||||
" font-family: Georgia, 'Times New Roman', serif;",
|
||||
" font-size: 1.5rem; font-weight: 700; margin: 0;",
|
||||
" background: linear-gradient(135deg, var(--tm-gold-lo) 0%, var(--tm-gold) 38%, var(--tm-gold-hi) 55%, var(--tm-gold) 75%, var(--tm-gold-lo) 100%);",
|
||||
" -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;",
|
||||
"}",
|
||||
|
||||
"#cal-close {",
|
||||
" width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;",
|
||||
" color: var(--tm-grey); background: rgba(93,64,55,0.05);",
|
||||
" font-size: 1.2rem; border: none; cursor: pointer; line-height: 1;",
|
||||
"}",
|
||||
"#cal-close:hover { color: var(--tm-gold); }",
|
||||
|
||||
"#cal-frame {",
|
||||
" width: 100%; height: 620px; border: none; display: block;",
|
||||
"}",
|
||||
|
||||
/* ================================================================ */
|
||||
/* RESPONSIVE */
|
||||
/* ================================================================ */
|
||||
|
||||
"@media (max-width: 860px) {",
|
||||
" #tm-box { padding: 34px 22px; }",
|
||||
" .tm-grid { grid-template-columns: 1fr; }",
|
||||
" #cal-header { padding: 18px 20px; }",
|
||||
" #cal-frame { height: 540px; }",
|
||||
"}",
|
||||
"@media (max-width: 480px) {",
|
||||
" #tm-box .tm-title { font-size: 1.8rem; }",
|
||||
" #cal-header .cal-title { font-size: 1.2rem; }",
|
||||
" #cal-frame { height: 480px; }",
|
||||
"}",
|
||||
].join("\n");
|
||||
|
||||
var _styleEl = document.createElement("style");
|
||||
_styleEl.id = "mba-styles";
|
||||
_styleEl.textContent = CSS;
|
||||
document.head.appendChild(_styleEl);
|
||||
|
||||
/* ================================================================== */
|
||||
/* TRIAL MODAL */
|
||||
/* ================================================================== */
|
||||
|
||||
var _trialLoading = false;
|
||||
var _trialLoaded = false;
|
||||
var _trialQueue = []; /* pending plan args while HTML is fetching */
|
||||
|
||||
/* --- show_trial(plan?) -------------------------------------------- */
|
||||
function show_trial(plan) {
|
||||
if (_trialLoaded) {
|
||||
_openTrial(plan);
|
||||
return;
|
||||
}
|
||||
_trialQueue.push(plan !== undefined ? plan : null);
|
||||
if (!_trialLoading) {
|
||||
_trialLoading = true;
|
||||
_loadTrialModal();
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Fetch + inject trial_modal.html ------------------------------ */
|
||||
function _loadTrialModal() {
|
||||
var url = _scriptBase + "trial_modal.html";
|
||||
fetch(url)
|
||||
.then(function (r) {
|
||||
if (!r.ok) throw new Error("[mybizapp] trial_modal.html fetch failed: " + r.status);
|
||||
return r.text();
|
||||
})
|
||||
.then(function (html) {
|
||||
var tmp = document.createElement("div");
|
||||
tmp.innerHTML = html;
|
||||
var node = tmp.firstElementChild;
|
||||
document.body.appendChild(node);
|
||||
|
||||
_applyTrialConfig();
|
||||
_wireTrialEvents();
|
||||
|
||||
_trialLoaded = true;
|
||||
_trialLoading = false;
|
||||
|
||||
if (_trialQueue.length) {
|
||||
var plan = _trialQueue[_trialQueue.length - 1];
|
||||
_trialQueue = [];
|
||||
_openTrial(plan);
|
||||
}
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error(err);
|
||||
_trialLoading = false;
|
||||
_trialQueue = [];
|
||||
});
|
||||
}
|
||||
|
||||
/* --- Apply TrialModalConfig overrides after HTML is in the DOM ---- */
|
||||
function _applyTrialConfig() {
|
||||
/* Text content */
|
||||
var titleEl = document.getElementById("tm-title");
|
||||
if (titleEl) titleEl.textContent = cfg.title;
|
||||
|
||||
var subEl = document.querySelector("#tm-box .tm-subtitle");
|
||||
if (subEl) subEl.textContent = cfg.subtitle;
|
||||
|
||||
var submitEl = document.querySelector("#tm-form .tm-submit");
|
||||
if (submitEl) submitEl.textContent = cfg.submitLabel;
|
||||
|
||||
var confirmTitleEl = document.querySelector("#tm-confirm .tm-confirm-title");
|
||||
if (confirmTitleEl) confirmTitleEl.textContent = cfg.confirmTitle;
|
||||
|
||||
var confirmSubEl = document.querySelector("#tm-confirm .tm-confirm-sub");
|
||||
if (confirmSubEl) confirmSubEl.textContent = cfg.confirmSub;
|
||||
|
||||
/* Locations — rebuild menu only if config provides a custom list */
|
||||
if (userCfg.locations) {
|
||||
var menu = document.getElementById("tm-location-menu");
|
||||
if (menu) {
|
||||
menu.innerHTML = cfg.locations.map(function (loc) {
|
||||
return '<button type="button" class="tm-select-option" data-value="'
|
||||
+ _esc(loc.value) + '">' + _esc(loc.label) + "</button>";
|
||||
}).join("\n");
|
||||
}
|
||||
}
|
||||
|
||||
/* UTM hidden fields */
|
||||
var form = document.getElementById("tm-form");
|
||||
if (form) {
|
||||
var utmMap = {
|
||||
utm_source: cfg.utm_source,
|
||||
utm_medium: cfg.utm_medium,
|
||||
utm_campaign: cfg.utm_campaign,
|
||||
utm_term: cfg.utm_term,
|
||||
utm_content: cfg.utm_content,
|
||||
};
|
||||
Object.keys(utmMap).forEach(function (name) {
|
||||
var el = form.querySelector('[name="' + name + '"]');
|
||||
if (el) el.value = utmMap[name];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Wire all trial modal events ---------------------------------- */
|
||||
function _wireTrialEvents() {
|
||||
var overlay = document.getElementById("tm-overlay");
|
||||
var box = document.getElementById("tm-box");
|
||||
var closeBtn = document.getElementById("tm-close");
|
||||
var form = document.getElementById("tm-form");
|
||||
var confirmDiv = document.getElementById("tm-confirm");
|
||||
var confirmClose = document.getElementById("tm-confirm-close");
|
||||
var planField = document.getElementById("tm-plan");
|
||||
var productField = document.getElementById("tm-product");
|
||||
var locationField = document.getElementById("tm-location");
|
||||
var locationSelect = document.getElementById("tm-location-select");
|
||||
var locationBtn = document.getElementById("tm-location-btn");
|
||||
var locationMenu = document.getElementById("tm-location-menu");
|
||||
var defaultProduct = productField.value;
|
||||
|
||||
/* Location picker */
|
||||
function _syncLabel() {
|
||||
var val = locationField.value || "";
|
||||
var selected = null;
|
||||
locationMenu.querySelectorAll(".tm-select-option").forEach(function (opt) {
|
||||
var isSel = opt.getAttribute("data-value") === val;
|
||||
if (isSel) selected = opt;
|
||||
opt.classList.toggle("is-selected", isSel);
|
||||
opt.setAttribute("aria-selected", isSel ? "true" : "false");
|
||||
});
|
||||
locationBtn.textContent = selected ? selected.textContent.trim() : "Select your server location";
|
||||
locationBtn.classList.toggle("is-placeholder", !selected);
|
||||
locationBtn.setAttribute("aria-expanded", locationSelect.classList.contains("open") ? "true" : "false");
|
||||
}
|
||||
|
||||
function _openLoc() { locationSelect.classList.add("open"); _syncLabel(); }
|
||||
function _closeLoc() { locationSelect.classList.remove("open"); _syncLabel(); }
|
||||
|
||||
locationBtn.addEventListener("click", function () {
|
||||
locationSelect.classList.contains("open") ? _closeLoc() : _openLoc();
|
||||
});
|
||||
locationMenu.querySelectorAll(".tm-select-option").forEach(function (opt) {
|
||||
opt.addEventListener("click", function () {
|
||||
locationField.value = opt.getAttribute("data-value") || "";
|
||||
_closeLoc();
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", function (e) {
|
||||
if (!locationSelect.contains(e.target)) _closeLoc();
|
||||
});
|
||||
|
||||
/* Store open/close functions so show_trial() can call them */
|
||||
overlay._openTrial = function (plan) {
|
||||
planField.value = plan || "General Free Trial";
|
||||
productField.value = defaultProduct; /* always pinned */
|
||||
if (window._mbsTracking) window._mbsTracking.applyToFields(form);
|
||||
_closeLoc();
|
||||
overlay.style.display = "flex";
|
||||
document.body.style.overflow = "hidden";
|
||||
};
|
||||
|
||||
overlay._closeTrial = function () {
|
||||
overlay.style.display = "none";
|
||||
document.body.style.overflow = "";
|
||||
setTimeout(function () {
|
||||
form.style.display = "";
|
||||
confirmDiv.style.display = "none";
|
||||
form.reset();
|
||||
planField.value = "General Free Trial";
|
||||
productField.value = defaultProduct;
|
||||
locationField.value = "";
|
||||
if (window._mbsTracking) window._mbsTracking.applyToFields(form);
|
||||
_closeLoc();
|
||||
var btn = form.querySelector(".tm-submit");
|
||||
btn.textContent = cfg.submitLabel;
|
||||
btn.disabled = false;
|
||||
}, 200);
|
||||
};
|
||||
|
||||
/* Close triggers */
|
||||
closeBtn.addEventListener("click", function () { overlay._closeTrial(); });
|
||||
confirmClose.addEventListener("click", function () { overlay._closeTrial(); });
|
||||
overlay.addEventListener("click", function (e) {
|
||||
if (e.target === overlay || !box.contains(e.target)) overlay._closeTrial();
|
||||
});
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
if (locationSelect.classList.contains("open")) { _closeLoc(); return; }
|
||||
if (overlay.style.display === "flex") overlay._closeTrial();
|
||||
}
|
||||
});
|
||||
|
||||
/* Form submit */
|
||||
form.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
if (!cfg.webhook) {
|
||||
console.warn("[mybizapp] No webhook URL set. Add window.TrialModalConfig.webhook.");
|
||||
return;
|
||||
}
|
||||
var btn = form.querySelector(".tm-submit");
|
||||
var formData = new FormData(form);
|
||||
if (window._mbsTracking) {
|
||||
formData = window._mbsTracking.appendToFormData(formData);
|
||||
window._mbsTracking.trackEvent("Trial", { source: planField.value || "General Free Trial" });
|
||||
}
|
||||
btn.textContent = "Sending\u2026";
|
||||
btn.disabled = true;
|
||||
/* Show confirmation regardless — webhook may not return CORS headers */
|
||||
fetch(cfg.webhook, { method: "POST", body: formData })
|
||||
.then(function () { form.style.display = "none"; confirmDiv.style.display = "block"; })
|
||||
.catch(function () { form.style.display = "none"; confirmDiv.style.display = "block"; });
|
||||
});
|
||||
}
|
||||
|
||||
/* --- Internal open helper (called after HTML is confirmed ready) -- */
|
||||
function _openTrial(plan) {
|
||||
var overlay = document.getElementById("tm-overlay");
|
||||
if (overlay && overlay._openTrial) overlay._openTrial(plan);
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* CALENDAR MODAL */
|
||||
/* ================================================================== */
|
||||
|
||||
var _calInjected = false;
|
||||
|
||||
/* --- show_calendar() ---------------------------------------------- */
|
||||
function show_calendar() {
|
||||
if (!_calInjected) _buildCalendarModal();
|
||||
var overlay = document.getElementById("cal-overlay");
|
||||
if (overlay) {
|
||||
overlay.style.display = "flex";
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Build and inject the calendar modal HTML --------------------- */
|
||||
function _buildCalendarModal() {
|
||||
var html = [
|
||||
'<div id="cal-overlay" role="dialog" aria-modal="true" aria-labelledby="cal-title">',
|
||||
' <div id="cal-box">',
|
||||
' <div id="cal-header">',
|
||||
' <h2 class="cal-title" id="cal-title">Book a Meeting</h2>',
|
||||
' <button id="cal-close" aria-label="Close">×</button>',
|
||||
' </div>',
|
||||
' <iframe',
|
||||
' id="cal-frame"',
|
||||
' src="' + _esc(cfg.calendarUrl) + '"',
|
||||
' title="Book a Meeting"',
|
||||
' loading="lazy"',
|
||||
' ></iframe>',
|
||||
' </div>',
|
||||
'</div>',
|
||||
].join("\n");
|
||||
|
||||
var tmp = document.createElement("div");
|
||||
tmp.innerHTML = html;
|
||||
document.body.appendChild(tmp.firstElementChild);
|
||||
_calInjected = true;
|
||||
|
||||
_wireCalendarEvents();
|
||||
}
|
||||
|
||||
/* --- Wire calendar modal events ----------------------------------- */
|
||||
function _wireCalendarEvents() {
|
||||
var overlay = document.getElementById("cal-overlay");
|
||||
var box = document.getElementById("cal-box");
|
||||
var closeBtn = document.getElementById("cal-close");
|
||||
|
||||
function _closeCalendar() {
|
||||
overlay.style.display = "none";
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
closeBtn.addEventListener("click", _closeCalendar);
|
||||
overlay.addEventListener("click", function (e) {
|
||||
if (e.target === overlay || !box.contains(e.target)) _closeCalendar();
|
||||
});
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape" && overlay.style.display === "flex") _closeCalendar();
|
||||
});
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* DOM AUTO-WIRING */
|
||||
/* ================================================================== */
|
||||
|
||||
function _wireAll() {
|
||||
/* Trial triggers */
|
||||
var primary = document.getElementById("open-modal");
|
||||
if (primary) {
|
||||
primary.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
show_trial();
|
||||
});
|
||||
}
|
||||
try {
|
||||
document.querySelectorAll(cfg.triggerSelector).forEach(function (el) {
|
||||
if (el.id === "open-modal") return; /* already handled above */
|
||||
el.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
show_trial(el.getAttribute("data-plan") || undefined);
|
||||
});
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn("[mybizapp] invalid triggerSelector:", cfg.triggerSelector, err);
|
||||
}
|
||||
|
||||
/* Calendar triggers */
|
||||
try {
|
||||
document.querySelectorAll(cfg.calendarSelector).forEach(function (el) {
|
||||
el.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
show_calendar();
|
||||
});
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn("[mybizapp] invalid calendarSelector:", cfg.calendarSelector, err);
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", _wireAll);
|
||||
} else {
|
||||
_wireAll();
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* UTILITIES */
|
||||
/* ================================================================== */
|
||||
|
||||
function _esc(str) {
|
||||
return String(str)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* PUBLIC API */
|
||||
/* ================================================================== */
|
||||
|
||||
window.show_trial = show_trial;
|
||||
window.show_calendar = show_calendar;
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user