Page Comparison

 <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="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 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>

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

<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><!-- #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>

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

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

<header id="brand-header">
    <div class="container">
      <div class="wrapper">
        <div class="logo"></div>
        <a id="back-to-main-website" href="/" tabindex="0"
          >Back to main website <i class="fa fa-caret-right"></i
        ></a>
      </div>
    </div>
  </header>

<footer id="main-footer" class="main-footer">
  <div class="main-footer--columns-wrapper">
    <div class="main-footer--column">
      <div class="main-footer--line-one"><span>CONTACT US</span></div>
      <div class="main-footer--line-two">
        <span class="phone">800-888-8888</span>
        <span class="phone-label">Reservations</span>
      </div>
    </div>
    <div class="main-footer--column">
      <div class="main-footer--line-two">
        <span class="phone">800-889-8899</span>
        <span class="phone-label">Passes</span>
      </div>
    </div>
    <div class="main-footer--column">
      <div class="main-footer--line-two">
        <span class="phone">info@peak-resort.com</span>
        <span class="phone-label"></span>
      </div>
    </div>
  </div>
  <a href="#" target="_blank" class="logo-image">Peak Resort</a>
</footer>