Untitled

mail@pastecode.io avatar
unknown
plain_text
a month ago
36 kB
8
Indexable
Never
(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)) {
          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);
})();
Leave a Comment