Untitled
unknown
plain_text
2 years ago
36 kB
7
Indexable
(function(){
var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode('@import url(\'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600&display=swap\');html body .ry-1-0-form-grid { box-sizing: border-box; display: flex; flex-flow: column; width: 100%;}html body .ry-1-0-form-grid-main { margin-top: 32px; margin-bottom: 32px; max-width: 350px; width: 100%; margin-left: auto; margin-right: auto;}/* hiding original form */html body .ry-1-0-parent>.MuiBox-root+div>form,html body .ry-1-0-parent>.MuiBox-root+div>div:first-child+.ry-1-0-form-grid-main~.MuiBox-root { display: none !important;}/* hiding original form */html body .ry-1-0-form-grid[data-step-1] { margin-top: -32px;}html body .ry-1-0-form-grid-item { box-sizing: border-box; margin: 0px; padding-top: 32px; max-width: inherit; --errclr: #B30309;}html body .ry-1-0-form-grid-item_wpr { border: 0; margin: 0; display: inline-flex; padding: 0; position: relative; min-width: 0; flex-direction: column; vertical-align: top; width: 100%;}html body .ry-1-0-form-grid-item[data-group-box] .ry-1-0-form-grid-item_wpr { flex-direction: row; grid-gap: 15px;}html body .ry-1-0-form-grid-item-label { font-family: Averta, Helvetica Neue, Arial, sans-serif; line-height: 1; padding: 0; color: #5E5A66; display: block; font-size: 12px; font-weight: 800; padding-bottom: 0.25rem; transform: translateX(0) translateY(-2px); transform-origin: top left; top: 0; left: 0; position: absolute;}html body .ry-1-0-form-grid-item_inputbase { color: #171619; cursor: text; display: inline-flex; font-size: 14px; box-sizing: border-box; align-items: center; font-family: Averta, Helvetica Neue, Arial, sans-serif; font-weight: 400; line-height: 1.1876em; padding: 0.25rem 0.75rem 0.15rem; overflow: hidden; position: relative; box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.04); caret-color: #4500A5; border-color: #CCC9D1; border-style: solid; border-width: 1px; border-radius: 4px; background-color: #FFF; margin-top: 16px; width: 100%;}html body .ry-1-0-form-grid-item_inputbase>input { font: inherit; color: currentColor; width: 100%; border: 0; height: 1.1876em; margin: 0; display: block; min-width: 0; background: none; box-sizing: content-box; animation-name: mui-auto-fill-cancel; letter-spacing: inherit; animation-duration: 10ms; -webkit-tap-highlight-color: transparent; padding: 0 12px 12px 0; font-size: 16px; margin-top: 8px; border: none; outline: none;}html body .ry-1-0-form-grid-item-errbox { left: 0px; bottom: -20px; position: absolute; font-weight: 400; color: var(--errclr); font-size: 11px; font-family: Averta, Helvetica Neue, Arial, sans-serif; line-height: 1.66; display: none;}/* on err */html body .ry-1-0-form-grid-item.ry-1-0-err .ry-1-0-form-grid-item-errbox { display: block !important;}html body .ry-1-0-form-grid-item.ry-1-0-err .ry-1-0-form-grid-item-label { color: var(--errclr) !important;}html body .ry-1-0-form-grid-item.ry-1-0-err .ry-1-0-form-grid-item_inputbase { border-color: var(--errclr) !important;}/* on err end */html body .ry-1-0-form-seperator { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 39px;}html body .ry-1-0-form-seperator>.ry-1-0-line { width: 188px; height: 2px; background: #E9E9E9; margin-bottom: 24px;}html body .ry-1-0-form-seperator>.ry-1-0-heading { color: #171619; text-align: center; font-size: 16px; font-style: normal; font-weight: 600; line-height: 120%; /* 19.2px */ font-family: \'Plus Jakarta Sans\', sans-serif;}html body .ry-1-0-form-seperator:not(.ry-1-0-active)>.ry-1-0-heading { color: #BAB8B8;}html body .ry-1-0-form-grid-item[data-group-box] .ry-1-0-form-grid-item_wpr>.ry-1-0-box-1 { flex-basis: 70%;}html body .ry-1-0-form-grid-item[data-group-box] .ry-1-0-form-grid-item_wpr>.ry-1-0-box-2 { flex: 1 1 0%; position: relative;}html body .ry-1-0-form-grid-item-checklabel { display: inline-flex; -webkit-box-align: center; align-items: center; cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent;}html body .ry-1-0-form-grid-item-typeography { line-height: 1.5; letter-spacing: 0.00938em; margin: 0px; font-family: Averta, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 400;}html body .ry-1-0-form-grid-item-checkbox { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: transparent; outline: 0px; border: 0px; margin: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; padding: 9px; border-radius: 50%; color: rgba(0, 0, 0, 0.6); font-family: Averta, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 400; isolation: isolate; margin-left: -9px;}html body .ry-1-0-form-grid-item-checkbox input { cursor: inherit; position: absolute; opacity: 0; width: 100%; height: 100%; top: 0px; left: 0px; margin: 0px; padding: 0px; z-index: 1; border: none; outline: none;}html body .ry-1-0-form-grid-item-checkbox:hover { background-color: rgba(69, 0, 165, 0.04); box-shadow: none;}html body .ry-1-0-form-grid-item-checkbox input~svg { user-select: none; width: 1em; height: 1em; display: inline-block; fill: currentcolor; flex-shrink: 0; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-size: 1.5rem;}html body .ry-1-0-form-grid-item-checkbox input:checked+svg { color: rgb(69, 0, 165);}html body .ry-1-0-form-grid-item-checkbox input:checked { display: none !important;}html body .ry-1-0-form-grid-item-checkbox input:not(:checked)~.ry-1-0-checked-svg,html body .ry-1-0-form-grid-item-checkbox input:checked~.ry-1-0-not-checked-svg { display: none !important;}html body .ry-1-0-submit-cta { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: 0px; margin: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; min-width: 64px; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; width: 100%; box-shadow: none; border-color: rgb(69, 0, 165); background-color: rgb(69, 0, 165); color: rgb(255, 255, 255); padding: 16px 24px; border-radius: 1000px; font-family: Averta, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 14px; text-transform: none; white-space: nowrap; border: 1px solid transparent;}html body .ry-1-0-submit-cta:hover { border-color: rgb(143, 115, 227); background-color: rgb(143, 115, 227); box-shadow: none; text-decoration: none;}html body .ry-1-0-submit-cta:disabled { background-color: rgb(245, 245, 247); color: rgb(119, 115, 128); cursor: not-allowed; border: none;}html body .ry-1-0-form-grid-item.ry-1-0-notice p { color: #5E5A66; font-size: 12px; font-family: Averta, Helvetica Neue, Arial, sans-serif; font-weight: 400; line-height: 1.3; margin: 0;}html body .ry-1-0-form-grid-item.ry-1-0-notice { padding-top: 16px !important;}html body .city-list { max-height: 200px; opacity: 1; transform: none; min-width: 222px; transition: opacity 281ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 187ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transform-origin: 0px 0px; min-height: 16px; overflow-x: hidden; overflow-y: auto; outline: 0; position: absolute; max-width: calc(100% - 32px); box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); color: #171619; background-color: white; z-index: 9999999; top: 26px; left: 50%; transform: translateX(-50%);}html body .city-list>ul { padding-right: 15px; width: calc(100% + 15px); outline: 0; padding-top: 0; padding-bottom: 0; margin: 0; padding: 0; position: relative; list-style: none;}html body .city-list>ul>li { padding-left: 16px; min-height: auto; width: auto; overflow: hidden; font-size: 14px; box-sizing: border-box; min-height: 48px; font-family: Averta, Helvetica Neue, Arial, sans-serif; font-weight: 400; line-height: 1.5; padding-top: 6px; white-space: nowrap; padding-bottom: 6px; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; padding-right: 16px; display: flex; position: relative; text-align: left; align-items: center; justify-content: flex-start; text-decoration: none; color: inherit; border: 0; cursor: pointer; margin: 0; user-select: none; border-radius: 0; vertical-align: middle; background-color: transparent; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}[data-zip-code-state] .ry-1-0-box-1 { position: relative;}[data-zip-code-state] .ry-1-0-box-1:not(.show-list) .city-list { display: none !important;}[data-zip-code-state] input#stt { pointer-events: none !important;}[data-zip-code-state] .ry-1-0-box-1 svg { width: 2rem;}input#stt::placeholder { color: #000 !important;}'));document.head.appendChild(style);
(function (w) {
"use strict";
var tag = "ry-1-0",
debug = document.cookie.indexOf("cfQA") > -1,
window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w;
var nativeFieldsSelectors = {
"firstNme": "#firstName",
"lastNme": "#lastName",
"dob": "#dateOfBirth",
"eml": "#email",
"ceml": "#confirmEmail",
"phne": "#phone",
"saddress": '[id^="serviceAddress.addressLine1"]',
"adduni": '[id^="serviceAddress.unitNumber"]',
"cty": '[id^="serviceAddress.city"]',
"stt": '[id^="serviceAddress.state"]',
"zp": '[id^="serviceAddress.zipCode"]'
}
const fieldsValues = {
"fnm": "",
"lnm": "",
"dob": "",
"email": "",
"cemail": "",
"phone": "",
"streetAddress": "",
"unit": "",
"city": "",
"state": "",
"zip": "",
"checkBox": ""
}
window[tag] = {
log: function (msg) {
if (debug) console.log("[EXPO]", tag, "-->", msg);
},
waitForElement: function (cssSelector, callback) {
var stop,
elementCached,
timeout,
check = function () {
try {
elementCached = document.querySelector(cssSelector);
if (stop) return;
if (elementCached) {
callback(elementCached);
clearTimeout(timeout);
window[tag].log(cssSelector + " found");
} else {
window.requestAnimationFrame(check);
}
} catch (err) {
window[tag].log(err.message);
}
};
window.requestAnimationFrame(check);
timeout = setTimeout(function () {
stop = true;
window[tag].log(cssSelector + " not found");
}, 10000);
},
testStart: function () {
try {
this.waitForElement("body", function (docBody) {
docBody.classList.add(tag);
});
// INITIALIZE THE TEST
initVariation();
window[tag].log("test running");
} catch (err) {
window[tag].log(err.message);
}
},
};
// INITIALIZE VARIATION
window[tag].testStart();
const statesHTML = `
<div class="city-list"><ul role="listbox"><li data-value="AL">Alabama</li><li tabindex="-1" role="option" aria-disabled="false" data-value="AK">Alaska</li><li tabindex="-1" role="option" aria-disabled="false" data-value="AZ">Arizona</li><li tabindex="-1" role="option" aria-disabled="false" data-value="AR">Arkansas</li><li tabindex="-1" role="option" aria-disabled="false" data-value="CA">California</li><li tabindex="-1" role="option" aria-disabled="false" data-value="CO">Colorado</li><li tabindex="-1" role="option" aria-disabled="false" data-value="CT">Connecticut</li><li tabindex="-1" role="option" aria-disabled="false" data-value="DE">Delaware</li><li tabindex="-1" role="option" aria-disabled="false" data-value="DC">District Of Columbia</li><li tabindex="-1" role="option" aria-disabled="false" data-value="FL">Florida</li><li tabindex="-1" role="option" aria-disabled="false" data-value="GA">Georgia</li><li tabindex="-1" role="option" aria-disabled="false" data-value="HI">Hawaii</li><li tabindex="-1" role="option" aria-disabled="false" data-value="ID">Idaho</li><li tabindex="-1" role="option" aria-disabled="false" data-value="IL">Illinois</li><li tabindex="-1" role="option" aria-disabled="false" data-value="IN">Indiana</li><li tabindex="-1" role="option" aria-disabled="false" data-value="IA">Iowa</li><li tabindex="-1" role="option" aria-disabled="false" data-value="KS">Kansas</li><li tabindex="-1" role="option" aria-disabled="false" data-value="KY">Kentucky</li><li tabindex="-1" role="option" aria-disabled="false" data-value="LA">Louisiana</li><li tabindex="-1" role="option" aria-disabled="false" data-value="ME">Maine</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MD">Maryland</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MA">Massachusetts</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MI">Michigan</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MN">Minnesota</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MS">Mississippi</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MO">Missouri</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MT">Montana</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NE">Nebraska</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NV">Nevada</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NH">New Hampshire</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NJ">New Jersey</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NM">New Mexico</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NY">New York</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NC">North Carolina</li><li tabindex="-1" role="option" aria-disabled="false" data-value="ND">North Dakota</li><li tabindex="-1" role="option" aria-disabled="false" data-value="OH">Ohio</li><li tabindex="-1" role="option" aria-disabled="false" data-value="OK">Oklahoma</li><li tabindex="-1" role="option" aria-disabled="false" data-value="OR">Oregon</li><li tabindex="-1" role="option" aria-disabled="false" data-value="PA">Pennsylvania</li><li tabindex="-1" role="option" aria-disabled="false" data-value="RI">Rhode Island</li><li tabindex="-1" role="option" aria-disabled="false" data-value="SP">South Carolina</li><li tabindex="-1" role="option" aria-disabled="false" data-value="SD">South Dakota</li><li tabindex="-1" role="option" aria-disabled="false" data-value="TN">Tennessee</li><li tabindex="0" role="option" aria-disabled="false" aria-selected="true" data-value="TX">Texas</li><li tabindex="-1" role="option" aria-disabled="false" data-value="UT">Utah</li><li tabindex="-1" role="option" aria-disabled="false" data-value="VT">Vermont</li><li tabindex="-1" role="option" aria-disabled="false" data-value="VI">Virgin Islands</li><li tabindex="-1" role="option" aria-disabled="false" data-value="VA">Virginia</li><li tabindex="-1" role="option" aria-disabled="false" data-value="WA">Washington</li><li tabindex="-1" role="option" aria-disabled="false" data-value="WV">West Virginia</li><li tabindex="-1" role="option" aria-disabled="false" data-value="WI">Wisconsin</li><li tabindex="-1" role="option" aria-disabled="false" data-value="WY">Wyoming</li></ul></div>
`;
const newFormHTML = `
<div class="${tag}-form-grid-main">
<div class="${tag}-form-grid" data-step-1="">
<div class="${tag}-form-grid-item" data-first-name="">
<div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="firstNme">First Name</label>
<div class="${tag}-form-grid-item_inputbase"><input id="firstNme" name="firstNme" placeholder="" required=""
type="text" inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
<div class="${tag}-form-grid-item" data-last-name="">
<div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="lastNme">Last Name</label>
<div class="${tag}-form-grid-item_inputbase"><input id="lastNme" name="lastNme" placeholder="" required=""
type="text" inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
<div class="${tag}-form-grid-item" data-dob="">
<div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="dob">Birthday</label>
<div class="${tag}-form-grid-item_inputbase"><input id="dob" name="dob" placeholder="MM/DD/YYYY" required=""
type="text" inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
</div>
<div class="${tag}-form-seperator" data-separator-1="">
<span class="${tag}-line"></span>
<span class="${tag}-heading">What is your email and phone number?</span>
</div>
<div class="${tag}-form-grid" data-step-2="">
<div class="${tag}-form-grid-item" data-email="">
<div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="eml">Email</label>
<div class="${tag}-form-grid-item_inputbase"><input id="eml" name="eml" placeholder="" required="" type="text"
inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
<div class="${tag}-form-grid-item" data-confirm-email="">
<div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="ceml">Confirm Email</label>
<div class="${tag}-form-grid-item_inputbase"><input id="ceml" name="ceml" placeholder="" required="" type="text"
inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
<div class="${tag}-form-grid-item" data-phone="">
<div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="phne">Phone</label>
<div class="${tag}-form-grid-item_inputbase"><input id="phne" name="phne" placeholder="555-555-5555" required=""
type="text" inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
</div>
<div class="${tag}-form-seperator" data-separator-2="">
<span class="${tag}-line"></span>
<span class="${tag}-heading">What is your address?</span>
</div>
<div class="${tag}-form-grid" data-step-3="">
<div class="${tag}-form-grid-item" data-address="" data-group-box="">
<div class="${tag}-form-grid-item_wpr">
<div class="${tag}-box-1">
<label class="${tag}-form-grid-item-label" for="saddress">Street address
</label>
<div class="${tag}-form-grid-item_inputbase"><input id="saddress" name="saddress" placeholder="" required=""
type="text" inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
<div class="${tag}-box-2">
<label class="${tag}-form-grid-item-label" for="adduni">Unit #
</label>
<div class="${tag}-form-grid-item_inputbase"><input id="adduni" name="adduni" placeholder="" required=""
type="text" inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
</div>
<div class="${tag}-form-grid-item" data-city="">
<div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="cty">City</label>
<div class="${tag}-form-grid-item_inputbase"><input id="cty" name="cty" placeholder="" required="" type="text"
inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
<div class="${tag}-form-grid-item" data-zip-code-state="" data-group-box="">
<div class="${tag}-form-grid-item_wpr">
<div class="${tag}-box-1">
<label class="${tag}-form-grid-item-label" for="stt">State
</label>
<div class="${tag}-form-grid-item_inputbase"><input id="stt" name="stt" placeholder="Texas" required=""
type="text" inputmode="text" value="Texas"><svg class="MuiSvgIcon-root MuiSelect-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"></path></svg></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
${statesHTML}
</div>
<div class="${tag}-box-2">
<label class="${tag}-form-grid-item-label" for="zp">Zip Code
</label>
<div class="${tag}-form-grid-item_inputbase"><input id="zp" name="zp" placeholder="" required="" type="text"
inputmode="text"></div>
<div class="${tag}-form-grid-item-errbox">Some required information is missing.</div>
</div>
</div>
</div>
<div class="${tag}-form-grid-item "><label class="${tag}-form-grid-item-checklabel"><span
class="${tag}-form-grid-item-checkbox"><input id="sndMarketingPromos" name="sndMarketingPromos"
type="checkbox" checked><svg class="${tag}-checked-svg" focusable="false" aria-hidden="true"
viewBox="0 0 24 24" data-testid="CheckBoxIcon">
<path
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
</path>
</svg>
<svg class="${tag}-not-checked-svg" focusable="false" aria-hidden="true" viewBox="0 0 24 24"
data-testid="CheckBoxOutlineBlankIcon">
<path
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z">
</path>
</svg></span><span class="${tag}-form-grid-item-typeography">Please sign me up for notifications, updates
and offers from Rhythm</span></label></div>
<div class="${tag}-form-grid-item" data-submit-cta=""><button class="${tag}-submit-cta" tabindex="0" type="button">Next</button></div>
<div class="${tag}-form-grid-item ${tag}-notice">
<p>By providing your contact information, you acknowledge that Rhythm will seek to verify your identity and
credit worthiness, including by running a soft credit check that does not impact your credit rating.</p>
</div>
</div>
</div>
`;
function listener() {
/* These are the modifications: */
window.addEventListener("locationchange", function () {
initVariation();
});
history.pushState = ((f) =>
function pushState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("pushstate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.pushState);
history.replaceState = ((f) =>
function replaceState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("replacestate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.replaceState);
window.addEventListener("popstate", () => {
window.dispatchEvent(new Event("locationchange"));
});
}
const targetedPaths = ['/sign-up/name', '/sign-up/contact', '/sign-up/address'];
function initVariation() {
// expample to use of waitforelement
window[tag].waitForElement("html body .MuiStepper-root", () => {
document.querySelector('html body .MuiStepper-root').closest('.MuiBox-root').parentElement.classList.add(`${tag}-parent`);
window[tag].waitForElement(`html body .${tag}-parent form`, function () {
const pathnm = window.location.pathname;
if (!document.querySelector(`.${tag}-form-grid-main`) && targetedPaths.includes(pathnm)) {
console.log("hi")
document.querySelector(`html body .${tag}-parent>.MuiBox-root+div>div:first-child`).insertAdjacentHTML('afterend', newFormHTML);
loadPrevForm();
// Events
triggerEvents();
} else if (!targetedPaths.includes(pathnm)) {
document.querySelector(`.${tag}-form-grid-main`) && document.querySelector(`.${tag}-form-grid-main`).remove();
document.querySelector(`.${tag}-parent`) && document.querySelector(`.${tag}-parent`).classList.remove(`${tag}-parent`);
}
})
});
}
listener();
// events
function triggerEvents() {
// date
document.querySelector("#dob").addEventListener('input', function () {
autoFormatDate(this);
});
//
document.querySelectorAll('[data-first-name] input,[data-last-name] input,[data-dob] input,[data-email] input,[data-confirm-email] input,[data-phone] input,#saddress,#adduni,#cty,#stt,#zp').forEach(fieldFirstStep => {
fieldFirstStep.addEventListener('change', function () {
validateFieldStep(this);
});
fieldFirstStep.addEventListener('input', function () {
validateFieldStep(this);
});
fieldFirstStep.addEventListener('blur', function () {
validateFieldStep(this);
})
});
// format date
document.querySelector('[data-dob] input').addEventListener('input', function () {
autoFormatDate(this);
});
// show list
document.querySelector(`[data-zip-code-state] .${tag}-box-1`).addEventListener('click', function () {
this.classList.add('show-list');
});
// outside click
document.body.addEventListener('click', function (event) {
// Check if the event target is the element or one of its children
if (event.target !== document.querySelector(`[data-zip-code-state] .${tag}-box-1`) && !document.querySelector(`[data-zip-code-state] .${tag}-box-1`).contains(event.target)) {
document.querySelector(`[data-zip-code-state] .${tag}-box-1`) && document.querySelector(`[data-zip-code-state] .${tag}-box-1`).classList.remove('show-list');
}
});
//
document.querySelectorAll('html body .city-list>ul>li').forEach(cityL => {
if (cityL) {
cityL.addEventListener('click', function () {
this.closest('.city-list').parentElement.querySelector('input').value = this.innerText;
this.closest('.city-list').parentElement.querySelector('input').setAttribute("data-value", this.getAttribute('data-value'));
this.closest('.city-list').parentElement.querySelector('input').dispatchEvent(new Event('input'));
this.closest('.city-list').parentElement.querySelector('input').dispatchEvent(new Event('change'));
document.querySelector(`[data-zip-code-state] .${tag}-box-1`).classList.remove('show-list');
});
}
});
document.querySelector(`.${tag}-submit-cta`).addEventListener('click', function () {
document.querySelector(`html body .ry-1-0-parent button[type="submit"]`) && document.querySelector(`html body .ry-1-0-parent button[type="submit"]`).click();
})
}
// update value
// save form
function saveForm() {
// first name
const firstNm = document.querySelector('[data-first-name] input');
// last name
const lastNm = document.querySelector('[data-last-name] input');
// dob
const dob = document.querySelector('[data-dob] input');
// email
const email = document.querySelector('[data-email] input');
// confirm email
const cemail = document.querySelector('[data-confirm-email] input');
// phone
const phone = document.querySelector('[data-phone] input');
// street address
const streeAddress = document.querySelector('[data-address] #saddress');
// unit
const unit = document.querySelector('[data-address] #adduni');
// city
const city = document.querySelector('[data-city] input');
// state
const state = document.querySelector('[data-zip-code-state] #stt');
// zip code
const zip = document.querySelector('[data-zip-code-state] #zp');
// push notification checked or not
const checkBox = document.querySelector('#sndMarketingPromos');
if (firstNm && firstNm.value !== "") {
fieldsValues.fnm = firstNm.value;
}
if (lastNm && lastNm.value !== "") {
fieldsValues.lnm = lastNm.value;
}
if (dob && dob.value !== "") {
fieldsValues.dob = dob.value;
}
if (email && email.value !== "") {
fieldsValues.email = email.value;
}
if (cemail && cemail.value !== "") {
fieldsValues.cemail = cemail.value;
}
if (phone && phone.value !== "") {
fieldsValues.phone = phone.value;
}
if (streeAddress && streeAddress.value !== "") {
fieldsValues.streetAddress = streeAddress.value;
}
if (unit && unit.value !== "") {
fieldsValues.unit = unit.value;
}
if (city && city.value !== "") {
fieldsValues.city = city.value;
}
if (state && state.value !== "") {
fieldsValues.state = state.value;
}
if (zip && zip.value !== "") {
fieldsValues.zip = zip.value;
}
if (checkBox) {
fieldsValues.checkBox = checkBox.checked;
}
}
function loadPrevForm() {
const form = fieldsValues;
// first name
const firstNm = document.querySelector('[data-first-name] input');
// last name
const lastNm = document.querySelector('[data-last-name] input');
// dob
const dob = document.querySelector('[data-dob] input');
// email
const email = document.querySelector('[data-email] input');
// confirm email
const cemail = document.querySelector('[data-confirm-email] input');
// phone
const phone = document.querySelector('[data-phone] input');
// street address
const streeAddress = document.querySelector('[data-address] #saddress');
// unit
const unit = document.querySelector('[data-address] #adduni');
// city
const city = document.querySelector('[data-city] input');
// state
const state = document.querySelector('[data-zip-code-state] #stt');
// zip code
const zip = document.querySelector('[data-zip-code-state] #zp');
// push notification checked or not
const checkBox = document.querySelector('#sndMarketingPromos');
firstNm.value = form.fnm || "";
lastNm.value = form.lnm || "";
dob.value = form.dob || "";
email.value = form.email || "";
cemail.value = form.cemail || "";
phone.value = form.phone || "";
streeAddress.value = form.streetAddress || "";
unit.value = form.unit || "";
city.value = form.city || "";
state.value = form.state || "";
zip.value = form.zip || "";
checkBox.checked = form.checkBox || false;
}
// date Formatter
function autoFormatDate(input) {
var inputValue = input.value.replace(/\D/g, ''); // Remove non-numeric characters
if (inputValue.length > 2) {
inputValue = inputValue.substring(0, 2) + '/' + inputValue.substring(2);
}
if (inputValue.length > 5) {
inputValue = inputValue.substring(0, 5) + '/' + inputValue.substring(5, 9);
}
// Handle backspace to ensure correct formatting
if (inputValue.length > 2 && inputValue.charAt(2) !== '/') {
inputValue = inputValue.substring(0, 2) + '/' + inputValue.substring(2);
}
input.value = inputValue;
// Validate the formatted date
var dateRegex = /^(0[1-9]|1[0-2])\/(0[1-9]|[1-2][0-9]|3[0-1])\/\d{4}$/;
if (dateRegex.test(inputValue)) {
input.closest('[data-dob]').classList.remove(`${tag}-err`);
// You can do further processing with the valid date here
} else {
input.closest('[data-dob]').classList.add(`${tag}-err`);
input.closest('[data-dob]').querySelector(`.${tag}-form-grid-item-errbox`).innerText = 'Please enter a valid date (MM/DD/YYYY).'
}
}
// validate fields step
function validateFieldStep(input) {
var value = input.value;
var key = input.getAttribute("name");
var nativeSelector = nativeFieldsSelectors[key];
if (key === "dob") {
const prnt = input.closest('[data-dob]');
if (!prnt.classList.contains(`${tag}-err`)) {
if (nativeSelector && document.querySelector(nativeSelector)) {
setNativeValue(document.querySelector(nativeSelector), value);
scrollToStep(2);
}
}
} else if (key == "phne") {
const prnt = input.closest('[data-phone]');
if (!prnt.classList.contains(`${tag}-err`)) {
if (nativeSelector && document.querySelector(nativeSelector)) {
setNativeValue(document.querySelector(nativeSelector), value);
scrollToStep(3);
}
}
} if (key == "stt") {
setNativeValue(document.querySelector(nativeSelector), input.getAttribute('data-value'));
} else {
if (nativeSelector && document.querySelector(nativeSelector)) {
setNativeValue(document.querySelector(nativeSelector), value);
}
}
saveForm();
}
// Simulate react value change
function setNativeValue(element, value) {
let lastValue = element.value;
element.value = value;
let event = new Event("input", { target: element, bubbles: true });
// React 15
event.simulated = true;
// React 16
let tracker = element._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
element.dispatchEvent(event);
element.dispatchEvent(new Event('change', { target: element, bubbles: true }));
element.dispatchEvent(new Event('focus', { target: element, bubbles: true }));
}
// scroll to steps
function scrollToStep(num) {
const sel = `[data-separator-${num}]`;
// if step one
if (num == 2 && !document.querySelector(`[data-step-1] .${tag}-err`)) {
jumptoSection(sel);
saveForm();
// click to second form
document.querySelector(`html body .ry-1-0-parent button[type="submit"]`) && document.querySelector(`html body .ry-1-0-parent button[type="submit"]`).click();
}
// if step two
if (num == 3 && !document.querySelector(`[data-step-2] .${tag}-err`)) {
jumptoSection(sel);
// click to second form
document.querySelector(`html body .ry-1-0-parent button[type="submit"]`) && document.querySelector(`html body .ry-1-0-parent button[type="submit"]`).click();
}
}
function jumptoSection(targetSel) {
const el = document.querySelector(targetSel);
if (el) {
let extrapart = -30;
const elTop = el.offsetTop + extrapart;
window.scrollTo({
top: elTop,
left: 0,
behavior: "smooth",
});
}
}
})(window);
})();Editor is loading...
Leave a Comment