mod-build 4.0.0 → 4.0.1-beta.2

package/src/resources/templates/modals/contact-us/index.hbs

@@ -1,348 +0,0 @@
-<div class="contact-us">
-	<div class="contact-us__container">
-		<form class="contact-us__form">
-			<div class="step step--active" aria-hidden="false" tabindex="-1" aria-labelledby="contact-step-one-header">
-				<span id="contact-step-one-header" class="visually-hidden">Step 1: Select the radio button option that suits your inquiry.</span>
-				<div class="step__header">
-					<p class="step__header-number">
-						Step 1
-					</p>
-					<p class="step__header-text">
-						Select an option that suits your inquiry
-					</p>
-				</div>
-				<div class="step__content">
-					<div class="step__content-item">
-						<picture>
-							<source srcset="https://modernize.com/quote/resources/assets/images/illustrations/misc/handshake.webp" type="image/webp">
-							<img class="step__image" src="https://modernize.com/quote/resources/assets/images/illustrations/misc/handshake.jpg" alt="">
-						</picture>
-						<div class="step__fieldset">
-							<fieldset>
-								<legend>Partnerships</legend>
-								<div class="field">
-									<input type="radio" name="topic" value="SF_partnerships" id="SF_partnerships">
-									<label for="SF_partnerships">Publisher/Media Partnership</label>
-								</div>
-								<div class="field">
-									<input type="radio" name="topic" value="SF_advertisers" id="SF_advertisers">
-									<label for="SF_advertisers">Advertisers</label>
-								</div>
-							</fieldset>
-						</div>
-					</div>
-					<div class="step__content-item">
-						<picture>
-							<source srcset="https://modernize.com/quote/resources/assets/images/illustrations/misc/presentation.webp" type="image/webp">
-							<img class="step__image" src="https://modernize.com/quote/resources/assets/images/illustrations/misc/presentation.jpg" alt="">
-						</picture>
-						<div class="step__fieldset">
-							<fieldset>
-								<legend>Website Content, Data, Technical Issues</legend>
-								<div class="field">
-									<input type="radio" name="topic" value="reprint-permissions" id="reprint-permissions">
-									<label for="reprint-permissions">Reprint Permissions</label>
-								</div>
-								<div class="field">
-									<input type="radio" name="topic" value="technical-site-issue" id="technical-site-issue">
-									<label for="technical-site-issue">Technical Issues with Website</label>
-								</div>
-							</fieldset>
-						</div>
-					</div>
-					<div class="step__content-item">
-						<picture>
-							<source srcset="https://modernize.com/quote/resources/assets/images/illustrations/misc/man-on-couch.webp" type="image/webp">
-							<img class="step__image" src="https://modernize.com/quote/resources/assets/images/illustrations/misc/man-on-couch.jpg" alt="">
-						</picture>
-						<div class="step__fieldset">
-							<fieldset>
-								<legend>Unsubscribe Requests</legend>
-								<div class="field">
-									<input type="radio" name="topic" value="email-opt-out" id="email-opt-out">
-									<label for="email-opt-out">Consumer Email Unsubscribe</label>
-								</div>
-								<div class="field">
-									<input type="radio" name="topic" value="phone-opt-out" id="phone-opt-out">
-									<label for="phone-opt-out">Consumer Phone Calls/Text Message Unsubscribe</label>
-								</div>
-								<div class="field">
-									<input type="radio" name="topic" value="general-inquiry" id="general-inquiry">
-									<label for="general-inquiry">Other Consumer Issues</label>
-								</div>
-							</fieldset>
-						</div>
-						<ul class="step__list">
-							<li>
-								<a href="https://privacy-central.securiti.ai/#/dsr/edc7a01c-b34c-43d4-8da8-127895e8bd71" target="_parent">California - Request to Know</a>
-								<a href="tel:8448727854">(844) 872-7854</a>
-							</li>
-							<li>
-								<a href="https://privacy-central.securiti.ai/#/dsr/edc7a01c-b34c-43d4-8da8-127895e8bd71" target="_parent">California - Request to Delete</a>
-							</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-			<div class="step" aria-hidden="true" tabindex="-1" aria-labelledby="contact-step-two-header">
-				<span id="contact-step-two-header" class="visually-hidden">Step 2: Submit your contact info and we'll address your request ASAP. Press tab to begin entering your information.</span>
-				<div class="step__header">
-					<p class="step__header-number">
-						Step 2
-					</p>
-					<p class="step__header-text">
-						Submit your contact info and we'll address your request ASAP
-					</p>
-				</div>
-				<div class="step__content">
-					<div class="step__error"></div>
-					<div class="form-group parent-error">
-						<label for="contact-name">Name</label>
-						<input class="form-control" type="text" name="name" id="contact-name">
-						<span class="step__error-message" id="error-contact-name">Please enter your name.</span>
-					</div>
-					<div class="form-group parent-error">
-						<label for="contact-phone">Phone</label>
-						<input class="form-control" type="tel" name="phone" id="contact-phone">
-						<span class="step__error-message" id="error-contact-phone">Please enter a valid phone number.</span>
-					</div>
-					<div class="form-group parent-error">
-						<label for="contact-email">Email</label>
-						<input class="form-control" type="email" name="email" id="contact-email">
-						<span class="step__error-message" id="error-contact-email">Please enter a valid email address.</span>
-					</div>
-					<div class="form-group parent-error">
-						<label for="contact-message">Message</label>
-						<textarea class="form-control" name="message" id="contact-message"></textarea>
-						<span class="step__error-message" id="error-contact-message">Please enter your message.</span>
-					</div>
-					<div>
-						<input type="hidden" name="domain" value="{{domain}}">
-						<input type="hidden" name="date">
-						<input type="hidden" name="time">
-						<input type="hidden" name="vertical" value="HomeServices">
-						<input type="hidden" name="g-recaptcha-response" value="">
-					</div>
-				</div>
-				<div class="captcha-container captcha-body">
-					<div class="g-recaptcha" data-callback="captcha_submit" data-sitekey="6LcsGEkUAAAAAHekw-AS_6Vcu_WeYk7LiPJB1mrR"></div>
-				</div>
-				<div class="form-controls">
-					<button class="btn btn-secondary btn-back" type="button" aria-label="Back"></button>
-					<button class="btn btn-submit" type="submit">
-						<span class="btn__text">Submit</span>
-						<span class="btn__spinner"></span>
-					</button>
-				</div>
-			</div>
-		</form>
-		<div class="contact-us__thankyou" aria-hidden="true" tabindex="-1" aria-labelledby="contact-success-header">
-			<span id="contact-success-header" class="visually-hidden"> Thank you. We'll address your request as soon as possible.</span>
-			<picture>
-				<source srcset="https://modernize.com/quote/resources/assets/images/illustrations/misc/laptop.webp" type="image/webp">
-				<img class="contact-us__thankyou-img" src="https://modernize.com/quote/resources/assets/images/illustrations/misc/laptop.jpg" alt="">
-			</picture>
-			<p class="contact-us__thankyou-title">Thank You!</p>
-			<p class="contact-us__thankyou-subtitle">We'll address your request as soon as possible.</p>
-		</div>
-	</div>
-</div>
-<script src="https://www.google.com/recaptcha/api.js"></script>
-<script>
-	window.captcha_submit = function(response) {
-		document.querySelector('input[name="g-recaptcha-response"]').value = response;
-	}
-</script>
-
-<script>
-	var contactUs = {
-		$modal: document.getElementById('info-modal'),
-		$form: document.querySelector('.contact-us__form'),
-		$thankyou: document.querySelector('.contact-us__thankyou'),
-		url: 'https://contact.formfetch.com/v2_submit',
-		getFormData: function() {
-			const date = new Date();
-			const data = {};
-			const inputs = this.$form.elements;
-			if (inputs) {
-				for (let i = 0; i < inputs.length; i++) {
-					const input = inputs[i];
-					if (input.name) {
-						data[input.name] = input.value;
-					}
-				}
-			}
-
-			data.time = date.toLocaleTimeString();
-			data.date = date.toLocaleDateString();
-			return data;
-		},
-		validateData: function(data) {
-			const _this = this;
-			var isFormValid = true;
-			const emailPattern = /^([\w\+-]+(?:\.[\w\+-]+)*)(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)/i;
-
-			Object.keys(data).forEach(function(key) {
-				var isValid = true;
-				const value = data[key];
-				switch (key) {
-				case 'email':
-					isValid = emailPattern.test(value);
-					break;
-				default:
-					isValid = value !== '';
-					break;
-				}
-
-				if (!isValid) {
-					_this.markFieldAsInvalid(key);
-					_this.focusOnFirstError();
-					isFormValid = false;
-				}
-			});
-
-			return isFormValid;
-		},
-		focusOnFirstError: function() {
-			const $error = this.$form.querySelectorAll('.has-error');
-
-			if ($error.length > 0) {
-				const firstError = $error[0];
-				const $field = firstError.querySelector('input[type="text"], input[type="tel"], input[type="email"], textarea');
-				if ($field) {
-					$field.focus();
-				}
-			}
-		},
-		markFieldAsInvalid: function(fieldName) {
-			const $invalidField = this.$form.querySelector('#contact-' + fieldName);
-			if ($invalidField) {
-				$invalidField.parentElement.classList.add('has-error');
-			}
-
-			const $field = this.$form.querySelector('input[name="' + fieldName + '"]');
-			if ($field) {
-				$field.setAttribute('aria-invalid', 'true');
-				$field.setAttribute('aria-describedby', 'error-contact' + fieldName);
-			}
-		},
-		submit: function() {
-			this.$form.classList.add('form--loading');
-
-			const _this = this;
-			const data = this.getFormData();
-			const isFormValid = this.validateData(data);
-			const formData = Object.keys(data).map(function(key) {
-				return encodeURIComponent(key) + '=' + encodeURIComponent(data[key]).replace(/%20/g, '+');
-			}).join('&');
-
-			if (isFormValid) {
-				// Submit Form
-				var request = new XMLHttpRequest();
-				request.onreadystatechange = function() {
-					if (request.readyState === 4) {
-						if (request.status === 200) {
-							var response = JSON.parse(request.responseText);
-							if (response.success) {
-								_this.$form.style.display = 'none';
-								_this.$thankyou.style.display = 'block';
-							} else {
-								_this.$form.classList.remove('form--loading');
-								document.querySelector('.step__error').innerHTML = response.message;
-							}
-						} else {
-							console.error('Request failed with status:', request.status);
-						}
-					}
-				};
-
-				request.open('POST', _this.url, true);
-				request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
-				request.send(formData);
-			} else {
-				_this.$form.classList.remove('form--loading');
-			}
-		},
-		changeStep: function(direction) {
-			const $activeStep = this.$form.querySelector('.step--active');
-			const $nextStep = $activeStep.nextElementSibling;
-			const $prevStep = $activeStep.previousElementSibling;
-
-			$activeStep.classList.remove('step--active');
-			$activeStep.setAttribute('aria-hidden', 'true');
-			if (direction === 'next') {
-				$nextStep.classList.add('step--active');
-				$nextStep.setAttribute('aria-hidden', 'false');
-				$nextStep.focus();
-			} else {
-				$prevStep.classList.add('step--active');
-				$prevStep.setAttribute('aria-hidden', 'false');
-				$prevStep.focus();
-			}
-		},
-		watch: function() {
-			const _this = this;
-			var radioChangedWithMouse = false;
-
-			// Watch form submission
-			_this.$form.addEventListener('submit', function(e) {
-				e.preventDefault();
-				if (!_this.$form.classList.contains('form--loading')) {
-					_this.submit();
-				}
-			});
-
-			// Watch radio click with mouse only
-			const $radioLabelsAndInputs = _this.$form.querySelectorAll('fieldset label, input[type="radio"]');
-			$radioLabelsAndInputs.forEach(function(input) {
-				input.addEventListener('mouseup', function() {
-					radioChangedWithMouse = true;
-				});
-			})
-
-			const $radioInputs = _this.$form.querySelectorAll('input[type="radio"]');
-			$radioInputs.forEach(function(input) {
-				input.addEventListener('click', function(e) {
-					if (radioChangedWithMouse) {
-						_this.changeStep('next');
-						radioChangedWithMouse = false;
-					}
-				});
-				input.addEventListener('keypress', function(e) {
-					if(e.which == 13){
-						e.preventDefault();
-						_this.changeStep('next');
-
-						// Making sure radio button is actually selected on Enter
-						var focused = e.target;
-						if (!focused.checked) {
-							focused.checked = true;
-						}
-					}
-				})
-			});
-
-			// Watch back button
-			const $backBtn = _this.$form.querySelector('.btn-back');
-			if ($backBtn) {
-				$backBtn.addEventListener('click', function() {
-					_this.changeStep('prev');
-				});
-			}
-
-			// Remove error state when input/textarea changes
-			const $formInputs = _this.$form.querySelectorAll('input, textarea');
-			$formInputs.forEach(function(input) {
-				input.addEventListener('change', function() {
-					input.parentElement.classList.remove('has-error');
-					input.setAttribute('aria-invalid', 'false');
-					input.removeAttribute('aria-describedby');
-				});
-			});
-		},
-		init: function() {
-			this.watch();
-		}
-	};
-	contactUs.init();
-</script>