mod-build 4.0.21 → 4.0.22-beta.2

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

@@ -0,0 +1,348 @@
+<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>

package/src/resources/templates/modals/faq/index.hbs

@@ -0,0 +1,9 @@
+<p>Below are answers to some of the more frequently asked questions we receive. If you do not see your question listed, please send us an email.</p>
+<h2>How does this service work?</h2>
+<p>We maintain a large network of home improvement professionals across the US. Once you have submitted your information to our system, we will instantly match you with local contractors in your area. Those contractors will provide free price quotes via the information you have provided. This process will save you time and money because you can compare rates from multiple companies without having to contact numerous contractors and provide your information several times.</p>
+<h2>Do you perform the contracting work?</h2>
+<p>No, we are not a general contractor. We are a free referral service for consumers needing home improvement services. We do not actually perform the work, but instead provide a free referral service.</p>
+<h2>I have already submitted my information, when will I get my quote?</h2>
+<p>The contractors who receive your request will usually begin building your quotes immediately and will often provide detailed pricing information within minutes. However, some quotes are more complicated and may require a little more time to process. Regardless, you should always receive your free quotes within 48 hours at the latest.</p>
+<h2>How do I get a quote?</h2>
+<p>To get a free, no-obligation quote, just go to our homepage, enter your zip code and submit the form.</p>

package/src/resources/templates/modals/faq/index.html

@@ -0,0 +1,9 @@
+<p>Below are answers to some of the more frequently asked questions we receive. If you do not see your question listed, please send us an email.</p>
+<h2>How does this service work?</h2>
+<p>We maintain a large network of home improvement professionals across the US. Once you have submitted your information to our system, we will instantly match you with local contractors in your area. Those contractors will provide free price quotes via the information you have provided. This process will save you time and money because you can compare rates from multiple companies without having to contact numerous contractors and provide your information several times.</p>
+<h2>Do you perform the contracting work?</h2>
+<p>No, we are not a general contractor. We are a free referral service for consumers needing home improvement services. We do not actually perform the work, but instead provide a free referral service.</p>
+<h2>I have already submitted my information, when will I get my quote?</h2>
+<p>The contractors who receive your request will usually begin building your quotes immediately and will often provide detailed pricing information within minutes. However, some quotes are more complicated and may require a little more time to process. Regardless, you should always receive your free quotes within 48 hours at the latest.</p>
+<h2>How do I get a quote?</h2>
+<p>To get a free, no-obligation quote, just go to our homepage, enter your zip code and submit the form.</p>