Configuration and Library: HTML Widgets

<footer class="checkout-footer"> <div class="edit-cart-message"> 
<h3>CHANGE YOUR ORDER</h3> 
<!--This is next section is optional and is a description under change your order-->
<p>NEED TO MAKE CHANGES TO YOUR ORDER?<br />YOU CAN REMOVE OR RE-ADD ITEMS FROM YOUR CART.</p>
<!--This is the end of the optional section that is a description under change your order-->
<a class="btn btn-primary" href="/?cart=true">VIEW CART</a></div> <div class="support-message"> <div class="message-title"> <div class="icon-support"></div> 
<h3>HELP CENTER</h3> </div>
<!--This is the end of the optional section that is a description under Help center--> 
<p>NEED HELP, CONTACT OUR ORDER SPECIALIST AT THE NUMBER BELOW AND WE'LL HAVE YOU ON YOUR WAY!</p> 
<!--This is the end of the optional section that is a description under Help center-->
<div class="phone-number">(555)555-5555</div> </div> </footer>

<p style="padding: 1rem 1rem 0 1rem;">ASSIGNMENT OFTEN HAS AGE RESTRICTIONS, SO ONLY GUESTS OF THE CORRECT AGE WILL APPEAR IN THE THE DROP DOWNS TO BE ASSIGNED TO PRODUCTS.</p>

<p><span vcloak=""> PRODUCTS OFTEN HAVE AGE RESTRICTIONS, SO ONLY GUESTS OF THE CORRECT AGE CAN BE ASSIGNED TO SPECIFIC PRODUCTS.</span></p>

<p>Be sure to provide accurate information, as an error may increase your risk of injury.</p> <ul> <li><strong>Skier Type I:</strong> Prefers easy moderate slopes and slower speeds.</li> <li><strong>Skier Type II:</strong> Ski Moderately. Prefer a Variety of speeds.</li> <li><strong>Skier Type III:</strong> Skis Aggressively. Normally ski at high speeds.</li> </ul>

<a href="YOUR_URL_GOES_HERE" target="_blank">Click to view</a> this information on identifying your skier type.		

<validate-code></validate-code>

<style><!--
:root {
--voucher-banner-background-color: #00cc99;
--voucher-label-weight: normal;
--voucher-label-color: #4d4dff;
--voucher-label-size: 0.875rem;
--voucher-button-text-color: #99ff33;
--voucher-button-text-size: 1.5em;
--voucher-button-background-color: #ff0066;
--voucher-text-weight: 500;

}
--></style>

 <div class="giftcard-message show-mobile">Do you have a <a v-on:click="showCheckoutProducts">gift card or stored value</a> to apply?</div>

<div style="opacity: 0.65; font-style: italic; line-height: 1.2em;">CONFIGURABLE GIFT CARD AND VOUCHER ENTRY TEXT HERE.</div>

<div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan">By completing this purchase, I agree to the <a href="https://YOURURLFORTERMSANDCONDITIONSGOESHERE" target="_blank">Terms &amp; Conditions</a> for the payment plan products in my cart. The “Order Total” excludes amounts to be charged later on the payment plan.</div>

<div style="border: 1px solid #307cb9; padding: 1rem; text-align: center; background: #f2f2f2;">
<h4>Do not refresh this page</h4>
<p style="line-height: 1.3; margin-bottom: 0;">Processing the order may take a few moments. After clicking 'Confirm Order' do not refresh the page until the order is processed.</p>
</div>

<div class="payment-message" style="padding: 1.6rem; background: #e8edf0; margin: 0 1.2rem; line-height: 1.5;" v-if="requiresCreditCard">A credit card is being collected to reserve your tee time. {{ personalization.TotalPriceDisplay }} is due online. {{ personalization.TotalCustomerEnteredPriceValue | currency }} will be due at the course.</div>

<div class="payment-message" style="padding: 1.6rem; background: #e8edf0; margin: 0 1.2rem; line-height: 1.5;" v-if="requiresCreditCard"><strong>{{ personalization.TotalCustomerEnteredPriceValue | currency }} DUE AT COURSE<br /><br />
Cancellation/No Show Policy:</strong><br />All guests are responsible for their reserved tee times. No payment will be collected to reserve a tee time; in the event of a no show, the credit card associated with the tee time reservation will be charged as follows: 
Tee time cancelled more than 48 hours before tee time, no fee charged. Tee time canceled 24 - 48 hours before tee time, 50% of greens fee will be charged. Tee time canceled less than 24 hours before tee time will be charged 100% of greens fees. 
This cancellation policy and associated penalties is applicable to all non-Full Golf Member players.</div>

<div id="“maincontent”">
<h2>How to Check In For Your Round</h2>
<hr class="“bluelinerule”" />
<div class="“introdescription" intro-body="">
<div class="”" introdesctext="">
<p><i>Online check-in is only available on day of play from midnight up to your tee time.</i></p>
<h3>How to Check In For Your Round:</h3>
<ol>
<li>Choose your course, enter your confirmation number and your last name. If you clicked on the <i>Check In</i> link in your email, these fields will be pre-populated.</li>
<li>Choose one or more slots to check in and pay in a single transaction, click Next.</li>
<li>You may choose to check out as a guest or login with your account. If you are a BoyneRewards member, please log in to receive your points.</li>
<li>Playing with friends on your reservation? Simply forward your confirmation email with the link to them or copy the link above and they can check in their slot and pay online too.</li>
<li>Show up and enjoy your round of golf!</li>
</ol></div>
</div>
</div>

<div class="renewal-banner" vcloak=""><h2 class="hdg hdg_28 hdg_48Md mix-hdg_color7" style="text-align: center;"><b>ANNOUNCEMENT HEADER</b></h2><div style="text-align: center;"><p class="xmsonormal" align="center"><span style="font-size: 12pt;">Announcement Text </span><span><o:p></o:p></span></p></div></div>

<div class="renewal-banner" vcloak=""> <h2 class="requires-signin">Renew Your Products Now!</h2> <h2 class="requires-signout"><b><a href="/login?ReturnUrl=/linkedproducts">Login</a></b> to Renew Your Passes!</h2> <p class="requires-signin">Visit the <a href="/linkedproducts">renew products</a> page to see your eligible products.</p> </div>

<div class="reloadSignInMessage"> <div class="message-description"> <h3 class="title">Reload your MEDIA NAME and save time!</h3> <h4 class="subhead">Already have a MEDIA NAME? Save time by reloading here.</h4> </div> <a class="btn btn-primary flat" :href="https://shop.jacksonhole.com/login?1080=2214&amp;1081=2217&amp;1082=2231&amp;ReturnUrl=%2Fs%2Flift-tickets%2Fp%2Flift-ticket-full-day">Sign In</a></div>

<div class="reloadSignInMessage"> <div class="message-description"> <h3 class="title">Sign in before you can reserve your passholder days!</h3> <h4 class="subhead">Sign in using the account you used to purchase your pass.</h4> </div> <a class="btn btn-primary flat" :href="loginLink">Sign In</a></div>		

<h2>Assign MEDIA NAME card</h2>
<p>Add a new MEDIA NAME card to this group member.</p>
<img src="ADD_IMAGE_URL" />

	<div style="background: #ffffff; padding: 10px; text-transform: none;" vcloak=""><span style="font-size: 9pt;">Need Help? You may need to reset your password or <br />find your account with your email or card.</span><br /><br />
	<span style="font-size: 9pt;"><a id="FindMeBtn" href="/register/findbyemail" style="border: 0px none; margin: 0px; padding: 0px; line-height: inherit; white-space: normal; font-style: normal; font-weight: bold; font-stretch: inherit; font-family: Avenir; font-size: 13.6px; vertical-align: baseline; cursor: pointer; text-decoration: underline ! important; color: inherit; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; background-color: #ffffff;">
	CLICK HERE TO FIND YOUR ACCOUNT</a></span></div>

<label class="axIdentity-FieldLabel">Finding Your Card Number</label>
<p>Your Card Number can be found in the highlighted areas below:<br /> <img alt="Card Back" src="IMAGE LINK" /></p>

<div style="padding-bottom: 8px;">Access your CUSTOM PAGE.</div> <a href="YOUR_LINK_GOES_HERE" class="btn btn-primary flat narrow" target="_blank" style="margin-bottom: 20px;">CTA HERE</a>

<style><!-- .page.store-closed-page { top: 17vh !important; left: 50%; right: 100px; padding: 1rem !important; max-width: 450px; transform: translatex(-50%); min-height: 0px !important; z-index: 10000 !important; width: 90vw; text-align: center; } .html-store-closed-page primary-header, .html-store-closed-page primary-footer { opacity: 0.5; } --></style>

<style><!-- .html-category-page #dynamic-hero { display: none !important; } --></style>

<style><!-- #body #hero-image #dynamic-hero { opacity: 1; top: 110px; } #body #hero-image { background-image: url("YOUR_HERO_IMAGE_URL_GOES-HERE"); } @media only screen and (max-width:959px) { #body #hero-image #dynamic-hero { top: 90px; } } --></style>

<script type='text/javascript' src='//static.queue-it.net/script/queueclient.min.js'></script><script data-queueit-c='RESORT'data-queueit-spa='true'type='text/javascript'src='//static.queue-it.net/script/queueconfigloader.min.js'></script>

<script>// <![CDATA[ function getInternetExplorerVersion() { var rv = -1; if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); } else if (navigator.appName == 'Netscape') { var ua = navigator.userAgent; var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); } return rv; } var ieVersion = getInternetExplorerVersion(); if (ieVersion > 0 && ieVersion < 11) { $('html').addClass('upgrade-browser') } // ]]></script> <div class="browsehappy"> <h1>Whoa there!</h1> <p>You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/" target="_blank">upgrade your browser</a> or use a different browser to improve your experience.</p> </div>		

<style>[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--nav {
    margin-bottom: 30px;
    position: relative;
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .inventory-low-wrapper .inventory-low-message {
    flex-basis: 10%;
    background-color: #d6973e;
    color: white;
    text-align: center;
    padding: 3px;
    font-size: 0.75rem !important;
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .price-major {
    display: none;
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--nav::after {
    content: 'Click on any available calendar date to reserve';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #f2f2f2;
    padding: 5px 10px;
    border-radius: 3px;
    white-space: nowrap;
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper::after {
    content: " ";
    position: absolute;
    margin-bottom: 20px;
    text-align: center;
    height: 40px;
    background-image: url('https://shop.woodwardparkcity.com/images/uploaded/reservations-inventory-key.png');
    background-size: 320px auto;
    background-repeat: no-repeat;
    width: 90%;
    background-position: center;
    left: 50%;
    transform: translateX(-50%);
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day {
    background: none !important;
}

@media screen and (min-width: 768px) {
    [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day:not(.-disabled-) .price::after {
        content: 'Reserve';
        font-size: 0.8em !important;
        font-weight: normal !important;
        text-transform: uppercase;
        padding: 2px 10px;
    }
    [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day {
        background: #88C583 !important;
    }
    [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day .price::after {
        color: #4A4A4A !important;
        background: none !important;
        font-size: 0.8em !important;
    }
    [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .-lowinventory- {
        background: #F7AD44 !important;
    }
    [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .-lowinventory- .price::after {
        content: 'Reserve';
        font-size: 0.8em !important;
        font-weight: normal !important;
        text-transform: uppercase;
        padding: 2px 10px;
        color: #4A4A4A !important;
    }
}

@media screen and (max-width: 767px) {
    [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .datepicker--nav::after {
        font-size: 0.75rem;
    }
    [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .date-day {
        font-size: 0.65rem !important;
    }
    [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .datepicker--cell-day:not(.-disabled-) .date-day {
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 90%;
        width: 90%;
        max-height: 32px;
        max-width: 32px;
        line-height: 32px;
        border-radius: 10px;
        background: #88C583;
        color: #222;
    }
    [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .datepicker--cell-day.-lowinventory- .date-day {
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 90%;
        width: 90%;
        max-height: 32px;
        max-width: 32px;
        line-height: 32px;
        border-radius: 10px;
        background: #F7AD44;
        color: #222;
    }
}

</style>

<div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan">
A credit card is being collected to collect payments. Payments will be collected monthly for products you are purchasing.
</div>	

<script>// <![CDATA[ (function() { // the DOM will be available here if this is placed at the end of the body tag console.log('TEMPORARY FIX FOR PAYMENT PLAN VERBIAGE') let paymentPlansAdminElement= document.getElementById("payment-plans-admin"); let innerParagraphs = paymentPlansAdminElement.getElementsByTagName("p"); //Should only be one paragraph innerParagraphs[0].innerHTML = "The following orders were purchased with payment plans. These indicated credit cards will be automatically charged the amount shown on the payment date; payments using the same card will be grouped together into one payment on your credit card statement. You may update the credit cards below if necessary. If you have had a failed payment and update your credit card, the new card will be immediately charged for any failed payments." })(); // ]]></script>

<div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan">
A credit card is being collected to collect payments. Payments will be collected monthly for products you are purchasing.
</div>	

<payment-details-schedule></payment-details-schedule>

<script>// <![CDATA[
Vue.component('payment-details-schedule', {

  data: function () {
    return {
      monthlyPayment: 0,
      paymentTableHeaders: [
        { text: 'Date', value: 'Date', align: 'center' },
        { text: 'Amount', value: 'Amount', align: 'center' },
      ],
      processing: false,
      showModal: false,
      paymentPlanProductIds: [],
      dates: null,
      paymentPrices: [],
      paymentDetails: [],
      paymentRemainder: 0,   
      modalDescription: null,
      widgetDescription: null,
      totalPaymentPrice: 0,
      totalDeposit: 0
    }
  },
    template: '<div class="payment-plan-details" v-if="paymentDetails.length && isPaymentPlanProduct"> <p>You will be billed in 4 easy payments <span v-if="paymentRemainder == 0">of ${{ monthlyPayment.toFixed(2) }}</span>.<div v-if="widgetDescription">{{widgetDescription}}</div><span class="ax--btn ax--btn--secondary viewSchedule" @click="showModal = true">View Payment Schedule</span></p><ax-modal v-if="showModal" modalType="message" size="medium" @close="showModal = false" style="top: 100px;"><template v-slot:header><h3>Payment Plan Schedule</h3><div>{{modalDescription}}</div><div>${{totalDeposit.toFixed(2)}} will be charged now.  The remaining ${{totalPaymentPrice.toFixed(2)}} will be charged on the following schedule:</div></template><template v-slot:body><ax-loader v-if="processing" size="lg" position="fixed" loader-color="#222" /><ax-data-table v-if="!!paymentDetails.length" :allow-row-selection="false" break-width="large" :headers="paymentTableHeaders" :items="paymentDetails"/><div style="margin: 10px 0; font-style: italic;">Product total with deposit: ${{(totalPaymentPrice + totalDeposit).toFixed(2)}}</div></template></ax-modal></div>',
  created() {
    this.dates = window.datesArray
    this.paymentPrices = window.priceArray
    this.paymentPlanProductIds = window.productArray
    this.      })

      if (_this.totalPaymentPrice > 0) {
        //Determine monthly payment
        let thisPayment = +(_this.totalPaymentPrice / _this.dates.length)

        _this.monthlyPayment = Math.floor(thisPayment * 100) / 100

        //Determine if there is a remainder amount
        _this.paymentRemainder = +(_this.totalPaymentPrice - (_this.monthlyPayment * _this.dates.length)).toFixed(2)

        //Then we create payment record for each configured date
        _this.dates.forEach(function (paymentDate, index) {
          if (index === _this.dates.length - 1 && _this.paymentRemainder > 0) {
            let lastPayment = _this.monthlyPayment + _this.paymentRemainder
            _this.paymentDetails.push({ date: paymentDate, amount: `$${lastPayment.toFixed(2)}` })
          }
          else {
            _this.paymentDetails.push({ date: paymentDate, amount: `$${_this.monthlyPayment.toFixed(2)}` })
          }
        })

        //Add a total amount row

        _this.paymentDetails.push({ date: '<b>TOTAL</b>', amount: `<b>$${_this.totalPaymentPrice.toFixed(2)}</b>` })

      }

    },
  },
  watch: {
    selectedAttributeValueIds: {
      immediate: true,
      deep: false,
      handler(newValue, oldValue) {
        this.buildPaymentSchedule()
      },
    },
  }
})
// ]]></script>
<style><!--
.payment-plan-details p {
    margin-bottom: 5px;
  }

  .payment-plan-details .viewSchedule.ax--btn {
    display: block;
    text-align: center;
    text-transform: uppercase;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
  }

  .addtocart-card .viewSchedule {
    margin-top: 10px;
  }

  .payment-plan-details .ax--modal-container .ax--modal-body {
    max-height: 125vh;
    overflow-y: visible;
    margin-bottom: 0;
  }

  .payment-plan-details .ax--modal-container .ax--data-table {
    margin: 0.35rem 0;
  }
--></style>modalDescription = window.modalDescription
    this.widgetDescription = window.widgetDescription

    this.buildPaymentSchedule()
  },
  computed: {
    productId() {
      return this.$store.getters['products/selectedProduct'].Id
    },
    selectedAttributeValueIds() {
      return this.selectedAttributes
        .filter(function (attribute) {
        return !attribute.IsDisabled
        }) 
        .map(function (obj) {
          return obj.SelectedValueId;
        });
    },
    selectedAttributes() {
      return this.$store.getters['products/selectedProductAttributes']
    },
    numberOfPayments() {
      return this.dates.length
    },
    isPaymentPlanProduct() {
      let _this = this
      let foundProductId = this.paymentPlanProductIds.find(function (pid) {
        return pid === _this.productId;
      });

      if (foundProductId){
        return true
      }
      else {
        return false
      }
    },
  },
  methods: {
    buildPaymentSchedule() {
      this.paymentDetails = []
      let paymentPriceRecord = null
      this.totalPaymentPrice = 0
      this.totalDeposit = 0

      //First we must determine which of the selected attributes have payment prices and calculate a total payment price for them
      let _this = this
      this.selectedAttributeValueIds.forEach(function (attributeId, index) {
        paymentPriceRecord = null
        paymentPriceRecord = _this.paymentPrices.filter(p => {
          return p.id.toString() === attributeId
        })

        if (paymentPriceRecord && paymentPriceRecord.length > 0) {
          _this.totalPaymentPrice += paymentPriceRecord[0].paymentPrice
          _this.totalDeposit += paymentPriceRecord[0].deposit
        }

<script>// <![CDATA[
//ADD WIDGET DESCRIPTION HERE
//   Description must be in single quotes.  
var widgetDescription='This is configurable:'
//ADD MODAL DESCRIPTION HERE
//   Description must be in single quotes.  
var modalDescription='You will be billed on the following schedule:'
//ADD PAYMENT DATES HERE
//   Format is 'mm/dd/yyyy' and must be in single quotes.  
//   Commas are required between dates
var datesArray = [
'06/01/2020',
'07/01/2020',
'08/01/2020',
'09/01/2020'
];

//ADD PRiCES FOR ATTRIBUTES IDS HERE
//   Each record is an object in the format {id: 12345, paymentPrice: 100.25}F
//   id and paymentPrice are numeric (no quotes or $)
//   Commas are required between objects

var priceArray = [
    { id: 10790, paymentPrice: 499.00, deposit: 100.00 },
    { id: 10791, paymentPrice: 349.00, deposit: 80.00  },
    { id: 10792, paymentPrice: 229.00, deposit: 60.00  },
    { id: 10794, paymentPrice: 349.00, deposit: 80.00  },
    { id: 10796, paymentPrice: 319.00, deposit: 80.00  },
    { id: 10797, paymentPrice: 399.00, deposit: 100.00  },
];
//ADD PAYMENT PLAN PRODUCT IDS HERE
//   values are numeric (no quotes)
//   Commas are required between ids
var productArray = [
515,
516,
517
];
// ]]></script> 

<script>// <![CDATA[
(function() {
    // the DOM will be available here if this is placed at the end of the body tag
    console.log('TEMPORARY FIX FOR PAYMENT PLAN VERBIAGE')
    let paymentPlansAdminElement= document.getElementById("payment-plans-admin");

    let innerParagraphs =  paymentPlansAdminElement.getElementsByTagName("p");

    //Should only be one paragraph

    innerParagraphs[0].innerHTML = "The following orders were purchased with payment plans. These indicated credit cards will be automatically charged the amount shown on the payment date; payments using the same card will be grouped together into one payment on your credit card statement. You may update the credit cards below if necessary.  If you have had a failed payment and update your credit card, the new card will be immediately charged for any failed payments."
})();
// ]]></script>