mod-build 4.0.78 → 4.0.79

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.0.79
+
+- Add `grab-b2b-data` task to serve process
+
 ## 4.0.78
 
 - Updating `mergeDefaultFormFieldConfig` to be recursive and merge to nested fields (so we can wrap multiple fields in a `fieldset`).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mod-build",
-	"version": "4.0.78",
+	"version": "4.0.79",
 	"description": "Share components for S3 sites.",
 	"type": "module",
 	"scripts": {

package/src/resources/data/tcpa.json

@@ -0,0 +1,4 @@
+{
+	"tcpaText": "We respect your privacy and want to make you aware of a few things. By submitting, you authorize QuinStreet and up to <a href=\"http://hsleadpost1.quinstage.com/clientList.jsp?c_level=default&aff=0\" target=\"_blank\" id=\"clientList\" style=\"color: inherit !important;\">four companies<\/a> to call you on the mobile or landline phone number provided. You understand that some may use automated dialing, prerecorded messages or SMS messages to contact you and that you are in no way required to purchase any products or services from them. It's entirely your choice."
+}
+

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

@@ -0,0 +1,9 @@
+<p>
+	{{company_name}} is a place to gather ideas and see how other homeowners have transformed their houses. It's for those who've just begun to think about what they want their new kitchen to look like, those who wonder what kind of siding and color will add the most value, those who want to know if running their home on solar energy is even a possibility.
+</p>
+<p>
+	{{company_name}} is where you come to get inspired, see what's possible, and connect with a professional who will make your dream home a reality.
+</p>
+<p>
+	We&rsquo;re based in Austin, Texas, right in the heart of downtown where we get to enjoy everything this wonderful city has to offer - SXSW, live music, fantastic restaurants, and best of all, friendly folks. We&rsquo;re constantly inspired by the many different types of design and architecture in this city, from the contemporary new homes peppered throughout Travis Heights, to historic mansions beautifully restored all over downtown and Old West Austin. We&rsquo;re proud to feature lots of Austin architects and contractors on {{company_name}} along with countless talented contractors from all over the country, so no matter where you live, you&rsquo;ll be able to connect with someone who can make your home design ideas a reality.
+</p>

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

@@ -0,0 +1,9 @@
+<p>
+	{{company_name}} is a place to gather ideas and see how other homeowners have transformed their houses. It's for those who've just begun to think about what they want their new kitchen to look like, those who wonder what kind of siding and color will add the most value, those who want to know if running their home on solar energy is even a possibility.
+</p>
+<p>
+	{{company_name}} is where you come to get inspired, see what's possible, and connect with a professional who will make your dream home a reality.
+</p>
+<p>
+	We&rsquo;re based in Austin, Texas, right in the heart of downtown where we get to enjoy everything this wonderful city has to offer - SXSW, live music, fantastic restaurants, and best of all, friendly folks. We&rsquo;re constantly inspired by the many different types of design and architecture in this city, from the contemporary new homes peppered throughout Travis Heights, to historic mansions beautifully restored all over downtown and Old West Austin. We&rsquo;re proud to feature lots of Austin architects and contractors on {{company_name}} along with countless talented contractors from all over the country, so no matter where you live, you&rsquo;ll be able to connect with someone who can make your home design ideas a reality.
+</p>

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

@@ -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>