Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
24 kB
1
Indexable
Never
(function() {
  try {
      /* main variables */
      var debug = 0;
      var variation_name = "";
      var $;
      /* all Pure helper functions */

      function waitForElement(selector, trigger, delayInterval, delayTimeout) {
          var interval = setInterval(function() {
              if (
                  document &&
                  document.querySelector(selector) &&
                  document.querySelectorAll(selector).length > 0
              ) {
                  clearInterval(interval);
                  trigger();
              }
          }, delayInterval);
          setTimeout(function() {
              clearInterval(interval);
          }, delayTimeout);
      }

      const egStickyHtml = `
              <div class="eg-sticky-wrapper">
                  <!-- charter name and price -->
                  <div class="eg-info"></div>

                  <!-- cta -->
                  <div class="eg-cta-container">
                      
                  </div>
              </div>
          `;

      /* Variation Init */
      function initStickyMob() {
          /* start your code here */
          if (window.innerWidth < 768) {
              const egBody = document.querySelector("html body");

              egBody.insertAdjacentHTML("beforeend", egStickyHtml);

              // clearfix 
              const egClearFix = document.querySelector(".booking-flow .sidebar .totalPrice .clearfix");

              let egContinueCta = `<button class="btn btn-primary">Continue</button>`;

              const egSaveQuoteCta = document.querySelector(".booking-flow .sidebar .share-quote");

              // insertng these elements inside our sticky wrapper

              document.querySelector(".eg-sticky-wrapper .eg-info").insertAdjacentElement("afterbegin", egClearFix);
              
              // inserting continue button html
              document.querySelector(".eg-sticky-wrapper .eg-cta-container").insertAdjacentHTML("afterbegin", egContinueCta);
              
              
              // inserting save quote cta
              document.querySelector(".eg-sticky-wrapper .eg-cta-container").insertAdjacentElement("afterbegin", egSaveQuoteCta);


              // continue btn click detect and submit form
              document.querySelector(".eg-cta-container>.btn").addEventListener("click", () => {
                  // if extras form
                  if (document.querySelector(".extras form")) {
                      document.querySelector(".extras form > button[type=submit]").click();
                  } // if passenger details form 
                  else if (document.querySelector("#tm-booking .passenger> form")) {
                      document.querySelector("#tm-booking .passenger> form > .clearfix button[type=submit]").click();
                  } // if paynow form
                  else if (document.querySelector("#tm-booking #checkoutForm")) {
                      document.querySelector("#tm-booking #checkoutForm input[type=submit]").click();
                  }
              });
              // changing text
              document.querySelector(".eg-info label").textContent = `Total Charter Price`; 
          }
      }
      listener()

    function listener() {
    
      /* These are the modifications: */
      window.addEventListener("locationchange", function() {
        
          waitForElement('#booking-flow  nav > .step:nth-child(2)', init, 50, 15000);
          waitForElement('#booking-flow nav > .step > span', progress, 50, 15000);
       
      });
      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"));
      });
  }

  function progress(){
    document.querySelector("#booking-flow  nav > .step:nth-child(2)").childNodes[2].textContent = "Contact Details";
    setTimeout(()=>{
      if (window.location.href.indexOf("https://www.moorings.com/booking/passengers") != -1){
        document.querySelector("#booking-flow nav > .step:nth-child(1) > span").classList.add("eg-active");
       
        } 
        else if(window.location.href.indexOf("https://www.moorings.com/booking/payment") != -1){
          document.querySelector("#booking-flow nav > .step:nth-child(1) > span").classList.add("eg-active");
           document.querySelector("#booking-flow nav > .step:nth-child(2) > span").classList.add("eg-active");
         
          }
          else{
            console.log("there is some error")
          }
    }, 500)
  }

  // Extras page 
  var eg_images = {
    insurance: `
      <div class="egImg">
      <img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src="https://editor-assets.abtasty.com/46121/637c78a6e843c1669101734.png" width="768" height="384" alt="">
      </div>
    `,
    wifi: `
      <div class="egImg">
      <img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src='https://editor-assets.abtasty.com/46121/637c78ecd9bc91669101804.png' width="768" height="384" alt="">
      </div>
    `,
    crew: {
        cook: `
      <div class="egImg">
      <img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src='https://editor-assets.abtasty.com/46121/637c785999bca1669101657.png' width="768" height="384" alt="">
      </div>
    `,
        skipper: `
      <div class="egImg">
      <img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src='https://editor-assets.abtasty.com/46121/637c78c60d1091669101766.png' width="768" height="384" alt="">
      </div>
    `
    }
}

function initExtras() {
    document.body.classList.add('egExtras');
    let container = document.querySelectorAll("#tm-booking .main .extra-inner .extra-line-item");
    let nonCollapsible = document.querySelectorAll("#tm-booking .main .nonCollapsible .extra-inner .extra-line-item");

    if (nonCollapsible.length > 0) {
        // non collapsible 
        for (var i = 0; i < nonCollapsible.length; i++) {

            let egLabelCheck = nonCollapsible[i].parentElement.parentElement.previousElementSibling.textContent;

            let egHtml = addingImage(egLabelCheck, nonCollapsible[i]);

            nonCollapsible[i].insertAdjacentHTML("afterbegin", egHtml);

        }
    } else if (container.length > 0) {

        for (var i = 0; i < container.length; i++) {

            let egLabelCheck = container[i].parentElement.parentElement.parentElement.parentElement.previousElementSibling.textContent;

            let egHtml = addingImage(egLabelCheck, container[i]);

            container[i].insertAdjacentHTML("afterbegin", egHtml);

        }

    }

    movingElements(document.querySelectorAll("#tm-booking .main .extra-inner"));
    // mutation observer
    let observer = new MutationObserver(mutations => {
        // console.log(mutations); // console.log(the changes)
        for (let mutation of mutations) {
            for (let node of mutation.addedNodes) {
                // we track only elements, skip other nodes (e.g. text nodes)
                if ((node instanceof HTMLElement)) {
                    movingElements([node]);
                }
                // console.log('hello',node);
            }
        }
    });

    const ele = document.querySelectorAll("#tm-booking .main .extras form");

    ele.forEach(ele => {
        // observe everything except attributes
        observer.observe(ele, {
            subtree: true, // observe desendents children
            childList: true
        });
    });
}

function addingImage(egLabelCheck, container) {
    let egHtml = '';
    if (egLabelCheck == 'Insurance') {
        egHtml = eg_images.insurance;
    } else if (egLabelCheck == "Wi-Fi Service") {
        egHtml = eg_images.wifi;
    } else if (egLabelCheck == "Crew") {
        if (container.children[0].textContent == 'Hire a Skipper') {
            egHtml = eg_images.crew.skipper;
        } else if (container.children[0].textContent == 'Hire a Cook') {
            egHtml = eg_images.crew.cook;
        }
    }

    return egHtml;

}


// moving crew message and text note
function movingElements(elements) {
    elements.forEach(ele => {
        qualifier = ele.querySelector("span.qualifier");
        priceQuantity = ele.querySelector(".price-quantity");
        notes = ele.querySelector(".extra-description > .notes");
        text = ele.querySelector(".extra-description > .text");

        if (qualifier) {
            priceQuantity.insertAdjacentElement("beforeend", qualifier);
        }

        if (notes) {
            text.insertAdjacentElement("afterend", notes);
            // notes.querySelector(".crew-message").textContent = notes.querySelector(".crew-message").textContent.replace("*","Note")
        }
    })
}

/* Initialize variation */
if(window.location.pathname == '/booking/extras' ){
waitForElement("#tm-booking .main .extra-inner", initExtras, 50, 15000);
}
      /* Initialize variation */
      if(window.screen.width < 768){
      waitForElement('.booking-flow .sidebar .totalPrice .clearfix', initStickyMob, 50, 15000);
      }
      waitForElement('#booking-flow  nav > .step', progress, 50, 15000);
  } catch (e) {
      if (debug) console.log(e, "error in Test" + variation_name);
  }
})();



@media(max-width: 767px) {

    /*hiding default ctas*/
    .extras form>button[type=submit],
    #tm-booking .passenger>form>.clearfix button[type=submit],
    #tm-booking #checkoutForm input[type=submit] {
        display: none;
    }

    /*hiding defalt ctas*/


    body {
        padding-bottom: 180px;
    }

    .eg-body {
        position: relative;
    }

    .eg-sticky-wrapper {
        position: fixed;
        bottom: 0;
        z-index: 999;
        left: 0;
        right: 0;
        background: white;
        padding: 18px;
        box-shadow: 0 0 8px rgb(0 0 0 / 25%);
    }

    .eg-cta-container>.btn {
        font-size: 16px;
        color: #fff;
        background-color: #b92d32;
        border: none;
        border-radius: 3px;
    }

    .eg-info {
        font-size: 19px;
        line-height: normal;
        margin-bottom: 16px;
        font-weight: 600;
    }

    .eg-info label {
        font-weight: 600;
        padding: 0;
        margin: 0;
        padding-right: 10px;
        font-size: 16px;
        color: black;
    }

    .eg-info .price {
        margin: 0;
        padding: 0;
        text-align: right;
        color: #b92d32;
        font-size: 16px;
    }

    .eg-info .clearfix {
        display: flex;
        justify-content: space-between;
        padding-top: 9px;
        padding-bottom:9px;
        background-color: #F5F4F2;
    }

    .eg-info .clearfix>* {
        width: 100%;
    }

    .eg-cta-container {
        display: flex;
        gap: 36px;
        justify-content: space-between;
    }

    .eg-cta-container>* {
        flex: 1;
    }

    .eg-cta-container .share-quote {
        margin-top: 0;
    }

    .eg-cta-container .share-quote a.btn {
        width: 100%;
        background: white;
        white-space: unset !important;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .eg-cta-container .share-quote a.btn:hover {
        color: black;
        border-color: black;
    }

    /*inquiry msg*/
    .eg-inquiry-msg {
        background: #f5f4f2;
        margin-top: 16px;
        font-size: 16.8px;
        padding: 10px;
        text-align: center;
        color: #000 !important;
        border-radius: 6px;
        display: block !important;
        text-decoration: none !important;
    }
}
/* Checkout progress bar */

@media (min-width: 768px) and (max-width: 1199px) {
    html body #header-info {
        top: 9px !important;
    }
}

@media(min-width:1200px){
    html body #header-info {
        top: 40px !important;
    }
}

@media (min-width: 768px) {

    html body .navbar-header>.inner {
        height: auto;
    }

    #header {
        margin-top: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    div#header-info {
        display: none;
    }

    /* #booking-flow nav {
        width: 90% !important;
    } */

    .steps nav::before {
        top: 22px;
    }
    .row .steps {
        padding-inline: 0;
        padding-block: 5px !important;
    }
    
}


.booking-flow .step {
    flex: 1;
}

html body .booking-flow .steps .number {
    margin-right: 0;
}


.navbar-header {
    border-bottom: 0;
}

.navbar-brand {
    top: 0rem !important;
    padding-top: 1.6rem !important;
}

.navbar {
    box-shadow: none;
    height: auto;
    min-height: auto;
}

nav .step {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    background: none !important;
}

.booking-flow .step {
    padding-left: 0 !important;
}

#booking-flow nav {
    display: flex;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    justify-content: space-between;
    width: 100%;
    margin-inline: auto;
    max-width: 1040px;
}

.steps nav::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 77%;
    background-color: rgb(0 0 0 /15%);
    left: 50%;
    transform: translateX(-50%);
    top: 27%;
}

.steps nav::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 26%;
    background: #122447;
    left: 14%;
    top: 27%;
}



html body .steps > nav:has(.step:nth-child(1).active)::after {
    width: 0 !important;
}

html body .steps > nav:has(.step:nth-child(2).active)::after {
    width: 23% !important;
}

html body .steps > nav:has(.step:nth-child(3).active)::after {
    width: 48% !important;
}

html body .steps > nav:has(.step:nth-child(4).active)::after {
    width: 73% !important;
}

.site-header {
    margin-bottom: 0 !important;
}

.step.active span.number {
    background: #122447;
    color: #fff !important;
    height: 25px;
}

.booking-flow .step:not(.active) .number {
    background: #fff;
}

.step.active,
.step:not(:first-child) {
    color: #122447 !important;
}

#booking-flow nav>.step:not(.number) {
    font-size: 12px;
    color: #122447;
}

#booking-flow nav>.step {
    padding: 0 !important;
    height: auto !important;
    min-width: unset !important;
}

.booking-flow .steps .number {
    height: 30px !important;
    width: 30px;
    text-align: center;
    line-height: 2.5;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #122447;
    margin-bottom: 8px;
    border: 3px solid #122447;
}

.row .steps {
    padding-inline: 0;
    padding-block: 40px;
}

.eg-active {
    background-color: #122447 !important;
    color: #fff !important;
}


.booking-flow .step {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

/*Extras CSS*/
html body.egExtras  .calendar-calendar,
html body.egExtras .view .row>.list-group {
    width: 85%;
}

html body.egExtras .booking-flow .main .extra .notes {
    margin-top: 0;
}

html body.egExtras .booking-flow .main .extra .price-quantity {
    align-items: flex-start;
}

/*chevrons*/
html body.egExtras .booking-flow .Collapsible__trigger:after {
    content: '' !important;
    background: url('https://editor-assets.abtasty.com/46121/6389f9042cf5f1669986564.svg');
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
}

html body.egExtras .booking-flow .Collapsible__trigger.is-closed:after {
    transform: rotate(180deg);
}


/*css for error message*/
html body.egExtras .booking-flow .main .extra.capacity-error {
    background: transparent !important;
}

html body.egExtras .booking-flow .main .extra.capacity-error .extra-inner {
    background: rgba(215, 36, 65, .24);
}

html body.egExtras .extra-inner-capacity-message {
    padding: 16px;
}

/*css for error message*/

html body.egExtras span.qualifier {
    color: #bdbdbd;
    font-size: 16px;
    margin-top: 3px;
    font-family: "Trade Gothic W01 Roman", Arial, Helvetica, sans-serif;
}

html body.egExtras .booking-flow .main .extra.child .extra-inner {
    padding-top: 16px;
    border-top: none;
}

html body.egExtras .booking-flow .main .extra:not(.child) {
    margin-bottom: 0;
}

html body.egExtras .booking-flow .main .extra label {
    gap: 10px;
}

html body.egExtras .booking-flow .main .extra .extra-description .text {
    padding-inline: 15px;
}

html body.egExtras .booking-flow .main .extra .extra-description {
    width: 100%;
    margin-inline: 0 !important;
}

html body.egExtras .booking-flow .main .extra .extra-description .text {
    width: 100%;
}

html body.egExtras .booking-flow .main .extra.child {
    background-color: white;
    padding-top: 0;
}

html body.egExtras .booking-flow .Collapsible__trigger:after {
    float: right;
    font-size: 18px;
}

html body.egExtras .booking-flow .Collapsible {
    border-bottom: none;

}




html body.egExtras .booking-flow .Collapsible + .Collapsible {
    margin-top: 28px;
}

html body.egExtras div.price-quantity>span.totalPrice {
    font-weight: 400;
}

html body.egExtras .booking-flow .main .extra label,

html body.egExtras .booking-flow .main .extra .price-quantity {
    font-size: 20px;
    font-weight: 400;
    font-family: "NewBaskervilleW01-Roman", serif;

}


html body.egExtras .booking-flow .main .extra .extra-description .text,
html body.egExtras .booking-flow .main .extra .extra-description .notes {
    font-size: 16px;
}


html body.egExtras .extra-inner {
    border: 1px solid #d0cdc5;
    border-radius: 5px;
}

html body.egExtras .extra-description .text {
    padding: 5px 25px 10px;
}

html body.egExtras .booking-flow .Collapsible__trigger {
    background-color: rgb(204 204 204 /35%);
    font-size: 20px;
    font-weight: 400;
    margin: auto;
    border-radius: 4px;
}



html body.egExtras .extra-line-item {
    background: #fff !important;
}

html body.egExtras span.totalPrice {
    color: #1ba9e8;
    font-weight: 600;
}

html body.egExtras .booking-flow .main .extra .price-quantity {
    float: none;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}


html body.egExtras .booking-flow .main .extra .extra-line-item {
    padding: 0;
    border-radius: 5px;
}

html body.egExtras .booking-flow .main .extra label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
}

html body.egExtras .booking-flow input[type=checkbox] {
    cursor: pointer;
    order: 1;
    min-width: 24px;
    min-height: 24px;
}


html body.egExtras .price-quantity {
    display: flex;
    gap: 15px;
    align-items: center;
}

html body.egExtras .booking-flow .main .extra .notes .crew-message {
    border: none !important;
    padding: 0;
    margin: 0;
}

@media(min-width: 800px) {
    html body.egExtras .booking-flow input[type=checkbox] {
        order: 1;
        min-width: 24px;
        min-height: 24px;
    }

    html body.egExtras .booking-flow .main .extra label,
    html body.egExtras .booking-flow .main .extra .price-quantity {
        padding-left: 4.5%;
        font-family: "NewBaskervilleW01-Roman", serif;
    }






}

html body.egExtras .booking-flow .main .extra.child label,
html body.egExtras .booking-flow .main .extra.child .price-quantity {
    padding-left: 16px;
}


@media(min-width: 768px) {
    
    html body.egExtras .extras form .Collapsible .Collapsible__contentInner>div {
        padding: 20px 0 0 0;
    }

    html body.egExtras .egImg {
        width: 200px;
        height: 100px;
        grid-row-start: 1;
        grid-row-end: 3;
    }

    html body.egExtras .booking-flow .main .extra:not(.child) .extra-line-item {
        display: grid;
        grid-template-columns: 202px 1fr;
    }

    html body.egExtras .booking-flow .main .extra label,
    html body.egExtras .booking-flow .main .extra .price-quantity {
        padding-left: 4%;
    }

}

html body.egExtras .booking-flow input[type=checkbox] {
    position: relative;
}

html body.egExtras .booking-flow input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: url('https://editor-assets.abtasty.com/46121/6389f8d421c6b1669986516.svg');
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    left: 0;
    border: 1px solid;
    border-radius: 2px;
}

@media(max-width: 767px) {
    html body.egExtras .extras form .Collapsible .Collapsible__contentInner>div {
        padding-top: 10px;
    }

    html body  #hubspot-messages-iframe-container{
        bottom:140px !important;
    }


    /* .steps {
        width: 100%;
    } */

    html body.egExtras .egImg {
        width: 100% !important;
    }

    html body.egExtras #booking-flow>div>div.steps {
        width: 100%;
    }


    html body.egExtras .extra-line-item {
        display: flex !important;
        flex-direction: column;
    }

    html body.egExtras .booking-flow input[type=checkbox] {
        order: 1;
        min-width: 24px;
        min-height: 24px;
        accent-color: white;
    }



    /* .booking-flow .step {
        font-size: 1.5rem;
    }

    .booking-flow .step {
        padding-top: 9px;
    } */

    html body.egExtras .booking-flow .booking-details {
        margin-bottom: 11px;
    }

    html body.egExtras .booking-flow .main .extra label {
        padding: 10px 10px 0 10px;
    }

    html body.egExtras .booking-flow .main .extra .price-quantity {
        padding: 10px;
    }

    html body.egExtras .extra-description .text {
        padding: 0 10px 10px;
        width: 100%;
    }

    html body.egExtras .booking-flow .main .extra {
        padding: 0;
    }

    html body.egExtras .booking-flow .Collapsible__trigger {
        width: 100%;
    }
}
html body.egExtras .booking-flow .main .extra:not(:has( + .extra)) .extra-inner {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

html body.egExtras .extra-inner {
    border: 1px solid #d0cdc5;
    border-radius: 5px 5px 0 0;
}

/*setting border-radius for child*/

html body.egExtras .booking-flow .main .extra.child .extra-line-item {
    border-radius: 0;
}

html body.egExtras .booking-flow .main .extra.child .extra-inner {
    padding-top: 16px;
    border-top: none;
    border-radius: 0 0 5px 5px;

}

/* Nav and Footer Hide */

@media only screen and (min-width: 768px) {
    /* Hide nav and footer */
.navbar-nav {
    display: none;
}

footer {
    display: none;
}

/* Adjust height of header area */
#navbar-collapse {
    height: 111px !important;
}

/* hide hamburger button on smaller screen sizes */
.navbar-mobile {
    display: none;
}

/* hide flag dropdown */
#block-menu-menu-locale-menu {
    display: none;
}

/* hide manage my booking button */
.payment-button-navbar {
    display: none;
}

/* hide COVID banner */
.abtasty-banner-wrapper {
    display: none !important;
}

#header-manage-booking {
	display: none;
}

    #header {
        margin-top: -58px;
    }

    #header-info {
        position: absolute;
        text-align: right;
        width: auto;
        right: 0;
    }
}

@media only screen and (min-width:768px) and (max-width: 1199px) {
    #header-info {
        top: 65px;
    }

    #header {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 1200px) {
    #header-info {
        top: 100px;
    }
}