271 lines
9.2 KiB
Vue
271 lines
9.2 KiB
Vue
<template>
|
|
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
|
|
<component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
|
|
<div class="my-4 alert-heading text-center">
|
|
<span v-html="afterpayHeaderCopy" />
|
|
<span class="afterpay-amount">{{ this.afterpayPrice }}</span>
|
|
<br />
|
|
<span class="alert-sub-heading" v-html="afterpayHeaderSubHeaderCopy" />
|
|
<img :src="afterPayImageUrl" class="afterpay-image" />
|
|
<a
|
|
id="afterpay-learnmore"
|
|
href="#"
|
|
data-afterpay-modal="en_US-safelite"
|
|
data-bind="click:afterpayLearnMore"
|
|
class="afterpay-learn-more">
|
|
<img :src="infoIcon" alt="Info Icon" class="info-icon" />
|
|
</a>
|
|
<div class="after-pay">
|
|
<div
|
|
class="after-pay-toggle"
|
|
:class="[isExpanded ? 'expanded' : '']"
|
|
@click="toggleIsExpanded">
|
|
<a href="#!" v-html="paymentPlanToggleHeading" />
|
|
</div>
|
|
<div class="after-pay-details">
|
|
<div class="payment-section">
|
|
<div class="payment-card">
|
|
<div class="calendar-section">
|
|
<div class="icon"><img :src="calendarIcon" /></div>
|
|
<div>Today</div>
|
|
</div>
|
|
<div class="payment-amount-section">
|
|
<div class="icon"><img :src="paymentIcon" /></div>
|
|
<div class="amount-due">{{ this.afterpayPrice }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-card">
|
|
<div class="calendar-section">
|
|
<div class="icon"><img :src="calendarIcon" /></div>
|
|
<div>2 weeks</div>
|
|
</div>
|
|
<div class="payment-amount-section">
|
|
<div class="icon"><img :src="paymentIcon" /></div>
|
|
<div class="amount-due">{{ this.afterpayPrice }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-card">
|
|
<div class="calendar-section">
|
|
<div class="icon"><img :src="calendarIcon" /></div>
|
|
<div>4 weeks</div>
|
|
</div>
|
|
<div class="payment-amount-section">
|
|
<div class="icon"><img :src="paymentIcon" /></div>
|
|
<div class="amount-due">{{ this.afterpayPrice }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-card">
|
|
<div class="calendar-section">
|
|
<div class="icon"><img :src="calendarIcon" /></div>
|
|
<div>6 weeks</div>
|
|
</div>
|
|
<div class="payment-amount-section">
|
|
<div class="icon"><img :src="paymentIcon" /></div>
|
|
<div class="amount-due">{{ this.afterpayPrice }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<img :src="calendarKeyIcon" />
|
|
<span>Payment Schedule</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<img :src="paymentKeyIcon" />
|
|
<span>Amount Due</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "afterpay-breakout",
|
|
|
|
props: {
|
|
cmsWidgetName: String,
|
|
totalAmount: Number,
|
|
},
|
|
data() {
|
|
return { isExpanded: false };
|
|
},
|
|
methods: {
|
|
toggleIsExpanded() {
|
|
this.isExpanded = !this.isExpanded;
|
|
},
|
|
},
|
|
computed: {
|
|
afterPayImageUrl() {
|
|
return this.getCmsContent(this.cmsWidgetName, "Image");
|
|
},
|
|
hasImage() {
|
|
return !!this.imageUrl;
|
|
},
|
|
afterpayHeaderCopy() {
|
|
// Text for Afterpay Breakout experiment
|
|
|
|
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
|
},
|
|
afterpayHeaderSubHeaderCopy() {
|
|
// Text for Afterpay Breakout experiment
|
|
|
|
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
|
},
|
|
afterpayPrice() {
|
|
const adjusted = (this.totalAmount / 4).toFixed(2);
|
|
return `$${adjusted}`;
|
|
},
|
|
infoIcon() {
|
|
return require(`@/assets/img/icons/info-circle.svg`);
|
|
},
|
|
calendarIcon() {
|
|
return require(`@/assets/img/icons/calendar-icon-black.svg`);
|
|
},
|
|
paymentIcon() {
|
|
return require(`@/assets/img/icons/payment-icon-green.svg`);
|
|
},
|
|
calendarKeyIcon() {
|
|
return require(`@/assets/img/icons/calendar-icon-grey.svg`);
|
|
},
|
|
paymentKeyIcon() {
|
|
return require(`@/assets/img/icons/payment-icon-grey.svg`);
|
|
},
|
|
paymentPlanToggleHeading() {
|
|
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.alert {
|
|
border-radius: 5px;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
|
|
&.alert-info {
|
|
.alert-heading {
|
|
color: $black;
|
|
font-weight: $font-weight-600;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
@include media-breakpoint-up(md) {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
.afterpay-amount {
|
|
color: $green;
|
|
margin-left: 0.25rem;
|
|
}
|
|
.alert-sub-heading {
|
|
color: $gray-1100;
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
.after-pay {
|
|
margin-top: 1rem;
|
|
.after-pay-toggle {
|
|
cursor: pointer;
|
|
|
|
&:after {
|
|
content: "";
|
|
transition: all 0.5s ease;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
margin-left: 0.5rem;
|
|
width: 1rem;
|
|
height: 0.5625rem;
|
|
display: inline-flex;
|
|
}
|
|
&.expanded:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
&.expanded + .after-pay-details {
|
|
max-height: 500px;
|
|
transition: all 250ms ease-in;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
.after-pay-toggle a {
|
|
font-weight: $font-weight-600;
|
|
color: $blue;
|
|
text-decoration: none;
|
|
}
|
|
.after-pay-details {
|
|
max-height: 0;
|
|
transition: all 250ms ease-out;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.payment-section {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
font-size: 0.875rem;
|
|
@include media-breakpoint-up(md) {
|
|
gap: 0rem;
|
|
}
|
|
}
|
|
.payment-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 0.375rem;
|
|
border: 0.25px $gray-1000;
|
|
background: linear-gradient(to bottom, $white 50%, $green-600 50%);
|
|
box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15);
|
|
width: 4.375rem;
|
|
@include media-breakpoint-up(md) {
|
|
width: 5rem;
|
|
}
|
|
font-weight: $font-weight-700;
|
|
text-align: center;
|
|
}
|
|
.calendar-section {
|
|
padding: 0.5rem;
|
|
gap: 0.125rem;
|
|
white-space: nowrap;
|
|
color: $black-100;
|
|
}
|
|
.payment-amount-section {
|
|
padding: 0.5rem;
|
|
}
|
|
.afterpay-learn-more {
|
|
margin-left: 0.25rem;
|
|
}
|
|
.afterpay-image {
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.amount-due {
|
|
color: $green-1000; /* Green text */
|
|
}
|
|
.legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 1rem;
|
|
gap: 1rem;
|
|
color: $gray-1100;
|
|
font-size: 0.875rem;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.125rem;
|
|
white-space: nowrap;
|
|
}
|
|
.legend-item span {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
}
|
|
</style>
|