var Widget = { setState: function(data) { var app = JSON.parse(window.localStorage.getItem('leadjetty_app') || '[]') var flow = null if (app.length > 0) { flow = app.find((f) => { return f.token == data.flow_token }) } if (flow) { flow.current_step_number = data.current_step_number } else { flow = {} flow.token = data.flow_token flow.variant_id = data.variant_id flow.submission_id = data.submission_id flow.current_step_number = data.current_step_number flow.open_state = data.open_on_start app.push(flow) } window.localStorage.setItem('leadjetty_app', JSON.stringify(app)) }, toggleOpenState: function(token) { var app = JSON.parse(window.localStorage.getItem('leadjetty_app') || '[]') var flow = app.find((f) => { return f.token == token }) if (flow.open_state == 0) { flow.open_state = 1 } else { flow.open_state = 0 } flow.view_state = 1 window.localStorage.setItem('leadjetty_app', JSON.stringify(app)) }, submitForm: function(form, ui, token) { var widgetObject = this var widget = document.querySelector('.lj-widget.flow-' + token) ui.displaySubmit(widget) ui.fadeOut(form, function() { ui.showLoader(token) fetch(form.action, { method: 'PATCH', body: new FormData(form) }).then((response) => { return response.json() }).then((data) => { if (data.redirect_url) { var app = JSON.parse(window.localStorage.getItem('leadjetty_app') || '[]') var flow = app.find((f) => { return f.token == token }) flow.current_step_number = data.current_step_number flow.open_state = 0 window.localStorage.setItem('leadjetty_app', JSON.stringify(app)) window.location = data.redirect_url } else if (data.errors) { ui.displayErrors(widget, data, token) ui.launch(widgetObject, token); } else { widgetObject.setState(data) ui.loadNextStep(widget, data) ui.launch(widgetObject, token); } }) }) } } var Embedded = { name: function() { return "Embedded" }, flow: function(token) { var app = JSON.parse(window.localStorage.getItem('leadjetty_app') || '[]') return app.find((f) => { return f.token == token }) }, launch: function(widgetObject, abstractUI, token) { var widget = document.querySelector('.lj-widget.flow-' + token) this.registerSubmit(widgetObject, abstractUI, token) this.registerButtons(widgetObject, abstractUI, token) this.registerLeadMagnetOptIns(widgetObject, abstractUI, token) widget.classList.add('v-c') document.querySelector('.lj-widget.flow-' + token).classList.remove('lj-d-none') }, displaySubmit(widget) { var height = widget.offsetHeight widget.style.height = height + "px" }, prepareNextStep: function(widget) { widget.style.height = "auto" }, registerSubmit: function(widgetObject, abstractUI, token) { var form = document.querySelector('.lj-remote-form.flow-' + token) form.addEventListener("submit", (e) => { e.preventDefault() widgetObject.submitForm(form, abstractUI, token) }) }, displayErrors: function(widget, data, token) { widget.innerHTML = data.html var p = document.createElement("p") p.textContent = data.errors p.setAttribute('class', 'errors') var form = document.querySelector('.lj-remote-form.flow-' + token) var height = widget.offsetHeight widget.style.height = (height + 52) + "px" form.prepend(p) }, registerButtons: function(widgetObject, abstractUI, token) { document.querySelectorAll('.option-btn').forEach(button => { button.addEventListener("click", (e) => { e.preventDefault(); var selected = document.querySelector('.option-btn.selected') if (selected !== null) { selected.classList.remove('selected'); } var clicked = e.currentTarget; var value = clicked.getAttribute('data-value'); var form_group = clicked.closest('.lj-form-group') var input = form_group.querySelector('input[type=hidden]'); var form = clicked.closest('form'); input.value = value; clicked.classList.add('selected'); var should_submit = clicked.getAttribute('data-should-submit'); if (should_submit != "false") { widgetObject.submitForm(form, abstractUI, token) } }) }) }, registerLeadMagnetOptIns: function(widgetObject, abstractUI, token) { document.querySelectorAll('.lm-btn').forEach(button => { button.addEventListener("click", (e) => { e.preventDefault(); button.disabled = true button.style.opacity = '0.6' button.innerHTML = "..." var url = 'https://ecp-flows.insiders.digital/remote-opt-in' fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ data: button.dataset }) }).then(() => { button.innerHTML = "✓ Got it!" button.style.opacity = '0.7' }) }) }) }, loadNextStep: function(widget, data) { this.prepareNextStep(widget) widget.innerHTML = data.html }, fadeOut: function(el, callback) { el.style.opacity = 1; (function fade() { if ((el.style.opacity -= .2) < 0) { el.style.display = "none" callback() } else { requestAnimationFrame(fade) } })() }, fadeIn: function(el, display) { el.style.opacity = 0; el.style.display = display || "block"; (function fade() { var val = parseFloat(el.style.opacity); var proceed = ((val += 0.2) > 1) ? false : true; if (proceed) { el.style.opacity = val; requestAnimationFrame(fade); } })(); }, showLoader: function(token) { document.querySelector('.flow-' + token + ' .sk-wave').classList.remove('lj-d-none') } } // Abstract UI class that works as a factory and a kind of superclass for different UI implementations var UI = { // Chooses a concrete UI implementation load: function(widget_type) { if (widget_type == 'fullscreen_overlay') { this.real_ui = Object.create(FullScreen) } else if (widget_type == 'embedded') { this.real_ui = Object.create(Embedded) } else if (widget_type == 'floating_box') { this.real_ui = Object.create(FloatingBox) } else if (widget_type == 'floating_bar') { this.real_ui = Object.create(FloatingBar) } else if (widget_type == 'popup') { this.real_ui = Object.create(Popup) } else { this.real_ui = Object.create(CalloutBox) } }, launch: function(widgetObject, token) { this.real_ui.launch(widgetObject, this, token) }, displaySubmit: function(widget) { this.real_ui.displaySubmit(widget) }, loadNextStep: function(widget, data) { this.real_ui.loadNextStep(widget, data) }, displayErrors: function(widget, data, token) { this.real_ui.displayErrors(widget, data, token) }, fadeOut: function(el, callback) { this.real_ui.fadeOut(el, callback) }, fadeIn: function(el, display) { this.real_ui.fadeIn(el, callback) }, showLoader: function(token) { this.real_ui.showLoader(token) } } // window.leadjetty_context = Object.create(LeadjettyContext) // leadjetty_context.add("5cbc5a") window.leadjetty_context = (window.leadjetty_context === undefined) ? {} : window.leadjetty_context leadjetty_context["5cbc5a"] = {} leadjetty_context["5cbc5a"].token = "5cbc5a" leadjetty_context["5cbc5a"].jetty = document.querySelector('.lj-5cbc5a') if (leadjetty_context["5cbc5a"].jetty.src.includes(leadjetty_context["5cbc5a"].token)) { leadjetty_context.app = JSON.parse(window.localStorage.getItem('leadjetty_app') || '[]') leadjetty_context["5cbc5a"].flow = null if (leadjetty_context.app.length > 0) { leadjetty_context["5cbc5a"].flow = leadjetty_context.app.find((f) => { return f.token == "5cbc5a" }) } leadjetty_context["5cbc5a"].tokenStart = leadjetty_context["5cbc5a"].jetty.src.indexOf('/w/') + 3; leadjetty_context["5cbc5a"].baseURL = leadjetty_context["5cbc5a"].jetty.src.slice('0', leadjetty_context["5cbc5a"].tokenStart); leadjetty_context["5cbc5a"].baseURL = leadjetty_context["5cbc5a"].baseURL.replace('/w/','/wc/') leadjetty_context["5cbc5a"].url = leadjetty_context["5cbc5a"].baseURL + "5cbc5a" + '.js' if (leadjetty_context["5cbc5a"].flow) { leadjetty_context["5cbc5a"].url = leadjetty_context["5cbc5a"].url + '?variant_id=' + leadjetty_context["5cbc5a"].flow.variant_id + '&submission_id=' + leadjetty_context["5cbc5a"].flow.submission_id + '¤t_step=' + leadjetty_context["5cbc5a"].flow.current_step_number } leadjetty_context["5cbc5a"].url = leadjetty_context["5cbc5a"].url.replace('.js', '') leadjetty_context["5cbc5a"].html = "