app/views/components/widget/_fba.js.erb

// Form components are namespaced under 'fba' = 'Feedback Analytics'
// Updated: July 2024
'use strict';

function FBAform(d, N) {
	return {
		formComponent: function() {
			return d.querySelector("[data-touchpoints-form-id='" + this.options.formId + "']")
		},
		formElement: function() {
			return this.formComponent().querySelector("form");
		},
		formLocalStorageKey: function() {
			return `touchpoints:${this.options.formId}`
		},
		isFormSubmitted: false, // defaults to false
		// enable Javascript experience
		javascriptIsEnabled: function() {
			var javascriptDisabledMessage = d.getElementsByClassName("javascript-disabled-message")[0];
			var touchpointForm = d.getElementsByClassName("touchpoint-form")[0];
			if (javascriptDisabledMessage) {
				javascriptDisabledMessage.classList.add("hide");
			}
			if (touchpointForm) {
				touchpointForm.classList.remove("hide");
			}
		},
		init: function(options) {
			this.javascriptIsEnabled();
			this.formInitiatedAt = Date.now();
			this.options = options;
			if (this.options.loadCSS) {
				this._loadCss();
			}
			this._loadHtml();
			if (!this.options.suppressUI && (this.options.deliveryMethod && this.options.deliveryMethod === 'modal')) {
				this.loadButton();
			}
			this.enableLocalStorage();
			this._bindEventListeners();
			this.successState = false; // initially false
			this._pagination();
			if (this.options.formSpecificScript) {
				this.options.formSpecificScript();
			}
			<%- if form.enable_turnstile? %>
			this.loadTurnstile();
			<% end %>
			<%- if form.has_rich_text_questions? %>
			this.loadQuill();
			<% end %>
			d.dispatchEvent(new CustomEvent('onTouchpointsFormLoaded', {
				detail: {
					formComponent: this
				}
			}));
			return this;
		},
		_bindEventListeners: function() {
			var self = this;

			const textareas = this.formComponent().querySelectorAll(".usa-textarea, .ql-editor");
			textareas.forEach(function(textarea) {
				if (textarea.getAttribute("maxlength") != '0' && textarea.getAttribute("maxlength") != '10000')  {
					textarea.addEventListener("keyup", self.textCounter);
				}
			});

			<%# only text fields; not email or telephone %>
			const textFields = this.formComponent().querySelectorAll(".usa-input[type='text']");
			textFields.forEach(function(textField) {
				if (textField.getAttribute("maxlength") != '0' && textField.getAttribute("maxlength") != '10000')  {
					textField.addEventListener("keyup", self.textCounter);
				}
			});

		},
		_loadCss: function() {
			if (this.options.loadCSS) {
				var style = d.createElement('style');
				style.innerHTML = this.options.css;
				d.head.appendChild(style);
				<%- if form.has_rich_text_questions? %>
				var quillStyles = d.createElement('link');
				quillStyles.setAttribute("href", "<%= asset_path('quill-snow.css') %>")
				quillStyles.setAttribute("rel", "stylesheet")
				d.head.appendChild(quillStyles);
				<% end %>
			}
		},
		_loadHtml: function() {
		<%# inject the form interface for the `inline` delivery option, without a wrapper %>
		if ((this.options.deliveryMethod && this.options.deliveryMethod === 'inline') && this.options.suppressSubmitButton) {
			if (this.options.elementSelector) {
				if(d.getElementById(this.options.elementSelector) != null) {
					d.getElementById(this.options.elementSelector).innerHTML = this.options.htmlFormBodyNoModal();
				}
			}
		} else if (this.options.deliveryMethod && this.options.deliveryMethod === 'inline') { <%# inject the form interface for inline with the modal wrapper %>
			if (this.options.elementSelector) {
				if(d.getElementById(this.options.elementSelector) != null) {
					d.getElementById(this.options.elementSelector).classList.add('fba-inline-container');
					d.getElementById(this.options.elementSelector).innerHTML = this.options.htmlFormBody();
				}
			}
		}
		<%# inject the form interface for modal and custom-button-modal %>
		if (this.options.deliveryMethod && (this.options.deliveryMethod === 'modal' || this.options.deliveryMethod === 'custom-button-modal')) {
			this.dialogEl = d.createElement('div');
			this.dialogEl.setAttribute('class', "<%= form.prefix "usa-modal" %> fba-modal");
			this.dialogEl.setAttribute('id', this.modalId());
			this.dialogEl.setAttribute('aria-labelledby', `fba-form-title-${this.options.formId}`);
			this.dialogEl.setAttribute('aria-describedby', `fba-form-instructions-${this.options.formId}`);
			this.dialogEl.setAttribute('data-touchpoints-form-id', this.options.formId);

			this.dialogEl.innerHTML = this.options.htmlFormBody();
			d.body.appendChild(this.dialogEl);
		}
		var otherElements = this.formElement().querySelectorAll(".usa-input.other-option");
		for (var i = 0; i < otherElements.length; i++) {
		    otherElements[i].addEventListener('keyup', this.handleOtherOption.bind(this), false);
		}
		var phoneElements = this.formElement().querySelectorAll("input[type='tel']");
		for (var i = 0; i < phoneElements.length; i++) {
		    phoneElements[i].addEventListener('keyup', this.handlePhoneInput.bind(this), false);
		}
		<%# add button behaviors for custom-button-modal %>
		if (this.options.deliveryMethod && this.options.deliveryMethod === 'custom-button-modal') {
			if (this.options.elementSelector) {
				const customButtonEl = d.getElementById(this.options.elementSelector);
				if (customButtonEl != null) {
					customButtonEl.setAttribute('data-open-modal', '');
					customButtonEl.setAttribute('aria-controls', this.modalId());
					customButtonEl.addEventListener('click', () => d.dispatchEvent(new CustomEvent('onTouchpointsModalOpen', { detail: { form: this } }
					)));
				}
			}
		}

			var formElement = this.formElement();
			// returns 1 or more submit buttons within the Touchpoints form
			var submitButtons = formElement.querySelectorAll("[type='submit']");
			var that = this;

			var yesNoForm = formElement.querySelector('.touchpoints-yes-no-buttons');

			if (yesNoForm) { // only for yes/no questions
				Array.prototype.forEach.call(submitButtons, function(submitButton) {
					submitButton.addEventListener('click', that.handleYesNoSubmitClick.bind(that), false);
				})
			} else { // for all other types of forms/questions
				if (submitButtons) {
					Array.prototype.forEach.call(submitButtons, function(submitButton) {
						submitButton.addEventListener('click', that.handleSubmitClick.bind(that), false);
					})
				}
			}
		},
		resetErrors: function() {
			var formComponent = this.formComponent();
			var alertElement = formComponent.querySelector(".fba-alert");
			var alertElementHeading = formComponent.getElementsByClassName("usa-alert__heading")[0];
			var alertElementBody = formComponent.getElementsByClassName("usa-alert__text")[0];
			var alertErrorElement = formComponent.querySelector(".fba-alert-error");
			var alertErrorElementBody = alertErrorElement.getElementsByClassName("usa-alert__text")[0];
			alertElement.setAttribute("hidden", true);
			alertElementHeading.innerHTML = "";
			alertElementBody.innerHTML = "";
			alertErrorElement.setAttribute("hidden", true);
			alertErrorElementBody.innerHTML = "";
		},
		handleOtherOption: function(e) {
			var selectorId =  "#" + e.srcElement.getAttribute("data-option-id");
			var other_val = e.target.value.replace(/,/g, '');
			if (other_val == '') other_val = 'other';
			var option = this.formElement().querySelector(selectorId);
			option.value = other_val;
		},
		handlePhoneInput: function(e) {
			const input = e.target;
			let number = input.value.replace(/[^\d]/g, ''); <%# Remove non-digits %>
			input.dataset.rawValue = number; <%# Store raw digits %>

			if (number.length == 3) {
				input.value = number.replace(/(\d{3})/, "($1)");
			} else if (number.length == 7) {
				input.value = number.replace(/(\d{3})(\d{4})/, "$1-$2");
			} else if (number.length == 10) {
				input.value = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
			} else {
				input.value = number; // Keep unformatted if not 10 digits
			}
		},
		handleEmailInput: function(e) {
			var EmailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			var email = e.srcElement.value.trim();
			if (email.length == 0) {
				return;
			}
			result = EmailRegex.test(email);
			if (!result) {
				showWarning($(this),"Please enter a valid email address");
			} else {
				showValid($(this));
	    	}
		    e.srcElement.value = number;
		},
		handleSubmitClick: function(e) {
			e.preventDefault();
			this.resetErrors();
			var formElement = this.formElement();
			var self = this;
			if (self.validateForm(formElement)) {
				<%- if form.enable_turnstile? %>
				const elapsed = Date.now() - self.turnstileInitiatedAt;
				if (elapsed > 5 * 60 * 1000) {
					self.initTurnstile();
					self.turnstileInitiatedAt = Date.now();
					return false;
				}
				<% end %>

				// disable submit button
				var submitButton = formElement.querySelector("[type='submit']");
				submitButton.disabled = true;
				submitButton.classList.add("aria-disabled");
				self.sendFeedback();
			}
		},
		handleYesNoSubmitClick: function(e) {
			e.preventDefault();

			var input = this.formComponent().querySelector('.fba-touchpoints-page-form');
			input.value = e.target.value;
			this.resetErrors();
			var self = this;
			var formElement = this.formElement();
			if (self.validateForm(formElement)) {
				var submitButtons = formElement.querySelectorAll("[type='submit']");
				Array.prototype.forEach.call(submitButtons, function(submitButton) {
					submitButton.disabled = true;
				})
				self.sendFeedback();
			}
		},
		validateForm: function(form) {
			this.hideValidationError(form);
			var valid = this.checkRequired(form) && this.checkEmail(form) && this.checkPhone(form) && this.checkDate(form);
			return valid;
		},
		checkRequired: function(form) {
			var requiredItems = form.querySelectorAll('[required]');
			var questions = {};
			// Build a dictionary of questions which require an answer
			Array.prototype.forEach.call(requiredItems, function(item) { questions[item.name] = item });

			Array.prototype.forEach.call(requiredItems, function(item) {
				switch (item.type) {
				case 'radio':
					if (item.checked) delete(questions[item.name]);
					break;
				case 'checkbox':
				  if (item.checked) delete(questions[item.name]);
					break;
				case 'select-one':
					if (item.selectedIndex > 0) delete(questions[item.name]);
					break;
				default:
					const quillDefaultHTML = "<p><br></p>";
					if (item.value.length > 0 &&
						item.value != quillDefaultHTML) delete(questions[item.name]);
				}
			});
			for (var key in questions) {
				this.showValidationError(questions[key], '<%= I18n.t 'form.field_is_required' %>');
				return false;
			}
			return true;
		},
		checkDate: function(form) {
			var dateItems = form.querySelectorAll('.date-select');
			var questions = {};
			// Build a dictionary of questions which require an answer
			Array.prototype.forEach.call(dateItems, function(item) { questions[item.name] = item });
			Array.prototype.forEach.call(dateItems, function(item) {
			  if (item.value.length == 0) {
			  	delete(questions[item.name]);
			  } else {
				var isValidDate = Date.parse(item.value);
			    if (!isNaN(isValidDate)) delete(questions[item.name]);
			  }
			});
			for (var key in questions) {
				this.showValidationError(questions[key], '<%= I18n.t 'form.field_is_invalid' %>');
				return false;
			}
			return true;
		},
		checkEmail: function(form) {
			var emailItems = form.querySelectorAll('input[type="email"]');
			var questions = {};
			// Build a dictionary of questions which require an answer
			Array.prototype.forEach.call(emailItems, function(item) { questions[item.name] = item });
			Array.prototype.forEach.call(emailItems, function(item) {
			  if (item.value.length == 0) {
			  	delete(questions[item.name]);
			  } else {
			    var EmailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			    if (EmailRegex.test(item.value)) delete(questions[item.name]);
			  }
			});
			for (var key in questions) {
				this.showValidationError(questions[key], '<%= I18n.t 'form.field_is_invalid' %>');
				return false;
			}
			return true;
		},
		checkPhone: function(form) {
			var phoneItems = form.querySelectorAll('input[type="tel"]');
			var questions = {};
			// Build a dictionary of questions which require an answer
			Array.prototype.forEach.call(phoneItems, function(item) { questions[item.name] = item });
			Array.prototype.forEach.call(phoneItems, function(item) {
			  if (item.value.length == 0) {
			  	delete(questions[item.name]);
			  } else {
			    const PhoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;
			    if (PhoneRegex.test(item.value)) delete(questions[item.name]);
			  }
			});
			for (var key in questions) {
				this.showValidationError(questions[key], '<%= I18n.t 'form.field_is_invalid' %>');
				return false;
			}
			return true;
		},
		showValidationError: function(question, error) {
			var questionDiv = question.closest(".question");
			var label = questionDiv.querySelector(".usa-label") || questionDiv.querySelector(".usa-legend");
			var questionNum = label.innerText;

			// show page with validation error
			var errorPage = question.closest(".section");
			if (!errorPage.classList.contains("fba-visible")) {
				var visiblePage = this.formComponent().getElementsByClassName("section fba-visible")[0];
				visiblePage.classList.remove("fba-visible");
				errorPage.classList.add("fba-visible");
			}

			questionDiv.setAttribute('class', 'usa-form-group usa-form-group--error');
			var span = d.createElement('span');
			span.setAttribute('id', 'input-error-message');
			span.setAttribute('role','alert');
			span.setAttribute('class','usa-error-message');
			span.innerText = error + questionNum;
			label.parentNode.insertBefore(span, label.nextSibling);
			var input = d.createElement('input');
			input.setAttribute('hidden', 'true');
			input.setAttribute('id','input-error');
			input.setAttribute('type','text');
			input.setAttribute('name','input-error');
			input.setAttribute('aria-describedby','input-error-message');
			questionDiv.appendChild(input);
			questionDiv.scrollIntoView();
			questionDiv.focus();

			// enable submit button ( so user can fix error and resubmit )
			var submitButton = this.formComponent().querySelector("[type='submit']");
			submitButton.disabled = false;
			submitButton.classList.remove("aria-disabled");
		},
		hideValidationError: function(form) {
			var elem = form.querySelector('.usa-form-group--error');
			if (elem == null) return;
			elem.setAttribute('class','question');
			var elem = form.querySelector('#input-error-message');
			if (elem != null) elem.parentNode.removeChild(elem);
			elem = form.querySelector('#input-error');
			if (elem != null) elem.parentNode.removeChild(elem);
		},
		textCounter: function(event) {
			const field = event.target;
			const maxLimit = event.target.getAttribute("maxlength");

			var countfield = field.parentNode.querySelector(".counter-msg");
			if (field.value.length > maxLimit) {
				field.value = field.value.substring(0, maxLimit);
				countfield.innerText = '0 <%= t :characters_left %>';
				return false;
			} else {
				countfield.innerText = "" + (maxLimit - field.value.length) + " <%= t :characters_left %>";
			}
		},
		loadButton: function() {
			// Add a landmark for button
			this.landmarkElement = d.createElement('div');
			this.landmarkElement.setAttribute('aria-label', 'Feedback button');
			this.landmarkElement.setAttribute('role', 'complementary');

			// Add the fixed, floating tab button
			<%# FEATURE FLAG %>
			this.buttonEl = d.createElement('button');
			this.buttonEl.setAttribute('id', 'fba-button');
			this.buttonEl.setAttribute('data-id', this.options.formId);
			this.buttonEl.setAttribute('class', 'fba-button fixed-tab-button usa-button');
			this.buttonEl.setAttribute('name', 'fba-button');
			this.buttonEl.setAttribute('aria-label', this.options.modalButtonText);
			this.buttonEl.setAttribute('aria-haspopup', 'dialog');
			this.buttonEl.setAttribute('aria-controls', this.modalId());
			this.buttonEl.setAttribute('data-open-modal', '');
			this.buttonEl.innerHTML = this.options.modalButtonText;
			this.buttonEl.addEventListener('click', () => d.dispatchEvent(new CustomEvent('onTouchpointsModalOpen', { detail: { form: this } } )));
			this.landmarkElement.appendChild(this.buttonEl);
			d.body.appendChild(this.landmarkElement);

			this.loadFeebackSkipLink();
		},
		loadFeebackSkipLink: function() {
			this.skipLink = d.createElement('a');
			this.skipLink.setAttribute('class', 'usa-skipnav touchpoints-skipnav');
			this.skipLink.setAttribute('href', '#fba-button');
			this.skipLink.addEventListener('click', function() {
				d.querySelector("#fba-button").focus();
			});
			this.skipLink.innerHTML = 'Skip to feedback';

			var existingSkipLinks = d.querySelector('.usa-skipnav');
			if(existingSkipLinks) {
				existingSkipLinks.insertAdjacentElement('afterend', this.skipLink);
			} else {
				d.body.prepend(this.skipLink);
			}
		},
		sendFeedback: function() {
			d.dispatchEvent(new Event('onTouchpointsFormSubmission'));
			var form = this.formElement();
			this.ajaxPost(form, this.formSuccess);
		},
		successHeadingText: function() {
			return this.options.successTextHeading;
		},
		successText: function() {
			return this.options.successText;
		},
		showFormSuccess: function(headerText, bodyHTML) {
			var formComponent = this.formComponent();
			var formElement = this.formElement();
			var alertElement = formComponent.querySelector(".fba-alert");
			var alertElementHeading = formComponent.querySelector(".usa-alert__heading");
			var alertElementBody = formComponent.querySelector(".usa-alert__text");

			// Display success Message
			alertElementHeading.innerHTML = headerText;
			alertElementBody.innerHTML = bodyHTML
			alertElement.removeAttribute("hidden");
			this.formComponent().scrollIntoView();

			// Hide Form Elements
			if (formElement) {
				// And clear the Form's Fields
				formElement.reset();
				localStorage.removeItem(this.formLocalStorageKey());
				if (formElement.querySelector('.touchpoints-form-body')) {
					var formBody = formElement.querySelector('.touchpoints-form-body');
					if(formBody) {
						formBody.setAttribute("hidden", true);
					}
				}
				if (formComponent.querySelector('.touchpoints-form-disclaimer')) {
					var formDisclaimer = formComponent.querySelector('.touchpoints-form-disclaimer');
					if(formDisclaimer) {
						formDisclaimer.setAttribute("hidden", true);
					}
				}

			}
		},
		resetFormDisplay: function() {
			if (this.successState === false) {
				return false;
			}

			// Hide and Reset Flash Message
			this.resetErrors();

			// Re-enable Submit Button
			var formElement = this.formElement();
			var submitButton = formElement.querySelector("[type='submit']");
			submitButton.disabled = false;

			// Show Form Elements
			if (formElement) {
				if (formElement.querySelector('.touchpoints-form-body')) {
					var formBody = formElement.querySelector('.touchpoints-form-body')
					if(formBody) {
						formBody.removeAttribute("hidden");
					}
				}
			}
		},
		formSuccess: function(e) {
			// Clear the alert box
			var formComponent = this.formComponent();
			var alertElement = formComponent.querySelector(".fba-alert");
			var alertElementBody = formComponent.getElementsByClassName("usa-alert__text")[0];
			var alertErrorElement = formComponent.querySelector(".fba-alert-error");
			var alertErrorElementBody = alertErrorElement.getElementsByClassName("usa-alert__text")[0];
			alertElementBody.innerHTML = "";
			alertErrorElementBody.innerHTML = "";

			var formElement = this.formElement();
			var submitButton = formElement.querySelector("[type='submit']");

			if (e.target.readyState === 4) {
	      		if (e.target.status === 201) { // SUCCESS!
					this.successState = true;
					d.dispatchEvent(new Event('onTouchpointsFormSubmissionSuccess'));
					this.isFormSubmitted = true;
					if(submitButton) {
						submitButton.disabled = true;
					}

					const submission = JSON.parse(e.target.response).submission;
					const successHeaderText = submission.form.success_text_heading;
					const successBodyText = submission.form.success_text;
					this.showFormSuccess(successHeaderText, successBodyText);
				} else if (e.target.status === 422) { // FORM ERRORS
					this.successState = false;
					d.dispatchEvent(new Event('onTouchpointsFormSubmissionError'));
					if(submitButton) {
						submitButton.disabled = false;
					}

					var jsonResponse = JSON.parse(e.target.response);
					var errors = jsonResponse.messages;

					for (var err in errors) {
						if (errors.hasOwnProperty(err)) {
							alertErrorElementBody.innerHTML += err;
							alertErrorElementBody.innerHTML += " ";
							alertErrorElementBody.innerHTML += errors[err];
							alertErrorElementBody.innerHTML += "<br />";
						}
					}

					alertErrorElement.removeAttribute("hidden");

					const errorMessage = this.formComponent().querySelector('.usa-alert--error');
					if (errorMessage) {
						errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
					}
				} else { // OTHER SERVER ERROR
					this.successState = false;
					d.dispatchEvent(new Event('onTouchpointsFormSubmissionError'));
					alertErrorElement.removeAttribute("hidden");
					alertErrorElementBody.innerHTML += "Server error. We're sorry, but this submission was not successful. The Product Team has been notified.";

					const errorMessage = this.formComponent().querySelector('.usa-alert--error');
					if (errorMessage) {
						errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
					}
				}
			}
		},
		ajaxPost: function (form, callback) {
	    var url = form.action;
	    var xhr = new XMLHttpRequest();
			// for each form question
			var params = this.options.questionParams(form);

			// Combine Referrer and Pathname with Form-specific params
			params["referer"] = d.referrer;
			params["hostname"] = N.location.hostname;
			params["page"] = N.location.pathname;
			params["query_string"] = N.location.search;
			params["location_code"] = form.querySelector("#fba_location_code") ? form.querySelector("#fba_location_code").value : null;
			params["fba_directive"] = form.querySelector("#fba_directive") ? form.querySelector("#fba_directive").value : null;
			params["language"] = "en";

			// Submit Feedback with a POST
			xhr.open("POST", url);
			xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8;");
			xhr.onnload = callback.bind(this);
			xhr.send(JSON.stringify({
				<%- if form.enable_turnstile? %>
				"cf-turnstile-response" : form.querySelector("input[name='cf-turnstile-response']") ? form.querySelector("input[name='cf-turnstile-response']").value : null,
				<% end %>
				"submission": params,
				<%- if form.verify_csrf? %>
				"authenticity_token": form.querySelector("#authenticity_token") ?
				form.querySelector("#authenticity_token").value : null
				<% end %>
			}));
		},
		currentPageNumber: 1, // start at 1
		showInstructions: function() {
			const instructions = this.formComponent().getElementsByClassName("fba-instructions")[0];

			if(instructions) {
				if (this.currentPageNumber == 1) {
					instructions.removeAttribute("hidden");
				} else {
					instructions.setAttribute("hidden", true);
				}
			}

			const requiredQuestionsNotice = this.formComponent().getElementsByClassName("required-questions-notice")[0];
			if(requiredQuestionsNotice) {
				if (this.currentPageNumber == 1) {
					requiredQuestionsNotice.removeAttribute("hidden");
				} else {
					requiredQuestionsNotice.setAttribute("hidden", true);
				}
			}
		},
		_pagination: function() {
			var previousButtons = this.formComponent().getElementsByClassName("previous-section");
			var nextButtons =  this.formComponent().getElementsByClassName("next-section");

			var self = this;
			for (var i = 0; i < previousButtons.length; i++) {
				previousButtons[i].addEventListener('click', function(e) {
					e.preventDefault();
					var currentPage = e.target.closest(".section");
					if (!this.validateForm(currentPage)) return false;
					currentPage.classList.remove("fba-visible");
					this.currentPageNumber--;
					this.showInstructions();
					currentPage.previousElementSibling.classList.add("fba-visible");

					const previousPageEvent = new CustomEvent('onTouchpointsFormPreviousPage', {
						detail: {
							formComponent: this
						}
					});
					d.dispatchEvent(previousPageEvent);

					// if in a modal, scroll to the top of the modal on previous button click
					if(this.formComponent().getElementsByClassName("fba-modal")[0]) {
						this.formComponent().scrollTo(0,0);
					} else {
						N.scrollTo(0, 0);
					}
				}.bind(self));
			}
			for (var i = 0; i < nextButtons.length; i++) {
				nextButtons[i].addEventListener('click', function(e) {
					e.preventDefault();
					var currentPage = e.target.closest(".section");
					if (!this.validateForm(currentPage)) return false;
					currentPage.classList.remove("fba-visible");
					this.currentPageNumber++;
					this.showInstructions();
					currentPage.nextElementSibling.classList.add("fba-visible");

					const nextPageEvent = new CustomEvent('onTouchpointsFormNextPage', {
						detail: {
							formComponent: this
						}
					});
					d.dispatchEvent(nextPageEvent);

					// if in a modal, scroll to the top of the modal on next button click
					if(this.formComponent().getElementsByClassName("fba-modal")[0]) {
						this.formComponent().scrollTo(0,0);
					} else {
						N.scrollTo(0, 0);
					}
				}.bind(self))
			}
		},
		modalId: function() {
			return `fba-modal-${this.options.formId}`;
		},
		modalElement: function() {
			return document.getElementById(this.modalId());
		},
		<%- if form.has_rich_text_questions? %>
		loadQuill: function() {
			let script = document.createElement("script");
			script.src = "<%= asset_path('quill.js') %>";
			script.async = true;
			script.defer = true;
			document.head.appendChild(script);
			setTimeout(this.initQuill, 1000); // TODO: consider using something else besides setTimeout
		},
		initQuill: function() {
			// Loop all .quill form groups and initialize Quill
			document.querySelectorAll(".quill").forEach((wrapper) => {
				const editorContainer = wrapper.querySelector(".editor");
				const hiddenInput = wrapper.querySelector("input[type=hidden]");
				const countDisplay = wrapper.querySelector('.usa-character-count__message');
				const maxLimit = editorContainer.getAttribute("maxlength");

				if (editorContainer && hiddenInput) {
					const quill = new Quill(editorContainer, {
						theme: 'snow',
						placeholder: 'Write something...',
						modules: {
							toolbar: [
								['bold', 'italic', 'underline'],
								[{ 'list': 'ordered'}, { 'list': 'bullet' }]
							]
						}
					});

					quill.root.innerHTML = hiddenInput.value; // Restore values

					// Sync to hidden field on change
					quill.on('text-change', function () {
						updateCount();
						hiddenInput.value = quill.root.innerHTML;
					});

					const updateCount = () => {
						const html = quill.root.innerHTML;
						countDisplay.textContent = "" + (maxLimit - html.length) + " <%= t :characters_left %>";
					};
				}
			});
		},
		<% end %>
		<%- if form.enable_turnstile? %>
		loadTurnstile: function() {
			let script = document.createElement("script");
			script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
			script.async = true;
			script.defer = true;
			script.onnload = this.initTurnstile;
			this.turnstileInitiatedAt = Date.now();
			if (!window.turnstile) {
				document.head.appendChild(script);
			}
		},
		initTurnstile: function() {
			turnstile.remove("#turnstile-container");
			turnstile.render("#turnstile-container", {
				sitekey: "<%= ENV['TURNSTILE_SITE_KEY'] %>",
				callback: function (token) {
					document.querySelector("input[name='cf-turnstile-response']").value = token;
				}
			});
		},
		<% end %>
		enableLocalStorage: function() {
			const form = this.formElement();
			const savedData = localStorage.getItem(this.formLocalStorageKey());

			<%# Restore form data from localStorage %>
			if (savedData) {
				const formData = JSON.parse(savedData);
				for (const key in formData) {
					const input = form.querySelector(`[name="${key}"]`);
					if (input) {
						input.value = formData[key];
					}
				}
			}

			<%# Save data to localStorage as the user types %>
			form.addEventListener('input', (event) => {
				const inputData = {};

				<%- if form.has_rich_text_questions? %>
				document.querySelectorAll(".quill").forEach((wrapper) => {
					const editorContainer = wrapper.querySelector(".editor");
					const hiddenInput = wrapper.querySelector("input[type=hidden]");

					if (editorContainer && hiddenInput) {
						const quillInstance = Quill.find(editorContainer);
						if (quillInstance) {
							hiddenInput.value = quillInstance.root.innerHTML;
						}
					}
				});
				<% end %>

				const formData = new FormData(form);
				formData.forEach((value, key) => {
					inputData[key] = value;
				});

				localStorage.setItem(this.formLocalStorageKey(), JSON.stringify(inputData));
			});
		},
	};
};

// Specify the options for your form
var touchpointFormOptions<%= form.short_uuid %> = {
	'formId': "<%= form.short_uuid %>",
	'modalButtonText': "<%= form.modal_button_text %>",
	'elementSelector': "<%= form.element_selector %>",
	'css' : "<%= escape_javascript(render partial: 'components/widget/widget', formats: :css, locals: { form: form }) %>",
	'loadCSS' : <%= form.load_css %>,
	'formSpecificScript' : function() {
		<%- if ["a11_v2", "a11_v2_radio", "a11_yes_no"].include?(form.kind) %>
		<%= render "components/form_#{form.kind}_script", form: form %>
		<% end %>
	},
	'deliveryMethod' : "<%= form.delivery_method %>",
	'successTextHeading' : "<%= escape_javascript(form.success_text_heading) %>",
	'successText' : "<%= escape_javascript(sanitize(form.success_text)) %>",
	<%# Dynamically write the Form parameters for Custom Forms %>
	'questionParams' : function(form) {
		return {
		<% form.questions.each do |question| %>
			<% next unless question_type_javascript_params(question).present? %>
			<%= question.answer_field %> : <%= raw question_type_javascript_params(question) %>,
		<% end %>
		}
	},
	'suppressUI' : <%= (local_assigns.has_key?(:suppress_ui) && suppress_ui) %>,
	'suppressSubmitButton' : <%= form.suppress_submit_button %>,
	'htmlFormBody' : function() {
		<%- if (form.delivery_method == "inline" && !form.suppress_submit_button && form.element_selector?) || form.delivery_method == "modal" || form.delivery_method == "custom-button-modal" %>
		return "<%= escape_javascript render(partial: 'components/widget/modal', locals: { form: form }) %>";
		<% else %>
		return null;
		<% end %>
	},
	'htmlFormBodyNoModal' : function() {
		<%- if form.delivery_method == "inline" && form.suppress_submit_button && form.element_selector? %>
		return "<%= escape_javascript render(partial: 'components/widget/no_modal', locals: { form: form }) %>";
		<% else %>
		return null;
		<% end %>
	}
}

// Create an instance of a Touchpoints form object
window.touchpointForm<%= form.short_uuid %> = new FBAform(document, window);
window.touchpointForm<%= form.short_uuid %>.init(touchpointFormOptions<%= form.short_uuid %>);

<%- if form.load_css && form.delivery_method != "touchpoints-hosted-only" %>
// Load the USWDS JS, loads as module 'fbaUswds' in global scope
<%= render partial: 'components/widget/widget-uswds', formats: :js %>

// Initialize any USWDS components used in this form
(function () {
	try {
		if (typeof fbaUswds === 'undefined') {
			console.error("Touchpoints Error: fbaUswds is not defined");
			return;
		}

		const formId = "touchpoints-form-<%= form.short_uuid %>";
		const fbaFormElement = document.querySelector(`#${formId}`);
		if (fbaFormElement) {
			if (fbaUswds.ComboBox) fbaUswds.ComboBox.on(fbaFormElement);
			if (fbaUswds.DatePicker) fbaUswds.DatePicker.on(fbaFormElement);
		}
		const modalId = "fba-modal-<%= form.short_uuid %>";
		const fbaModalElement = document.querySelector(`#${modalId}`);
		if (fbaModalElement) {
			if (fbaUswds.Modal) fbaUswds.Modal.on(fbaModalElement);
		}
		// Ensure the button is also initialized if it exists
		const fbaButton = document.querySelector('#fba-button');
		if (fbaButton) {
			if (fbaUswds.Modal) {
				fbaUswds.Modal.on(fbaButton);
				fbaButton.classList.add('fba-initialized');
				// Debug logging
				fbaButton.addEventListener('click', function() {
					console.log("Touchpoints: Button clicked");
					if (fbaModalElement) {
						console.log("Touchpoints: Modal classes:", fbaModalElement.className);
						console.log("Touchpoints: Modal hidden:", fbaModalElement.hidden);
					}
				});
			} else {
				console.error("Touchpoints Error: fbaUswds.Modal is not defined");
			}
		}
	} catch (e) {
		console.error("Touchpoints Error: USWDS initialization failed", e);
	}
})();
<% end %>