146 lines
4 KiB
Vue
146 lines
4 KiB
Vue
<template>
|
|
<div class="afterpay-modal-banner" role="alert">
|
|
<component
|
|
:is="'script'"
|
|
src="https://js.squarecdn.com/square-marketplace.js"
|
|
async></component>
|
|
<div>
|
|
<span
|
|
class="callout"
|
|
v-for="token in headerCopyTokens"
|
|
:key="token"
|
|
v-html="token"></span>
|
|
</div>
|
|
<div>
|
|
<span v-for="token in afterpayCopyTokens" :key="token">
|
|
<span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
|
|
<span v-else-if="isInlineImageToken(token)">
|
|
<img v-if="hasImage" :src="imageUrl" :alt="getInlineAltText(token)" />
|
|
<span v-else>{{ getInlineAltText(token) }}</span>
|
|
</span>
|
|
<span v-else v-html="token"></span>
|
|
</span>
|
|
<span class="nbsp"> </span>
|
|
<a
|
|
href="#"
|
|
class="text-link"
|
|
data-afterpay-modal="en_US"
|
|
@click.prevent="onLearnMoreClick">
|
|
{{ bannerCta }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { splitCopyOnCMSPlaceHolder, splitCMSCopyOnBR } from "@/helpers/cms-content-helper";
|
|
|
|
const INLINE_IMAGE_TOKEN = "custom:inlineImage";
|
|
const AFTERPAY_PRICE_TOKEN = "custom:afterpayPrice";
|
|
|
|
function isInlineImageToken(token) {
|
|
return token.includes(INLINE_IMAGE_TOKEN);
|
|
}
|
|
function isAfterpayPriceToken(token) {
|
|
return token.includes(AFTERPAY_PRICE_TOKEN);
|
|
}
|
|
function getInlineAltText(token) {
|
|
const innerTokens = token.split(",");
|
|
return innerTokens[1] ?? "";
|
|
}
|
|
|
|
export default {
|
|
name: "afterpay-banner",
|
|
props: {
|
|
cmsWidgetName: String,
|
|
},
|
|
methods: {
|
|
isInlineImageToken,
|
|
isAfterpayPriceToken,
|
|
getInlineAltText,
|
|
onLearnMoreClick() {
|
|
this.pushEventToGA(
|
|
this.$route.query[this.queryStrings.FMG_PAGE],
|
|
this.GaActions.CLICKED,
|
|
this.bannerCta,
|
|
true
|
|
);
|
|
},
|
|
},
|
|
computed: {
|
|
imageUrl() {
|
|
return this.getCmsContent(this.cmsWidgetName, "Image");
|
|
},
|
|
hasImage() {
|
|
return !!this.imageUrl;
|
|
},
|
|
headerCopyTokens() {
|
|
return splitCMSCopyOnBR(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
|
|
},
|
|
afterpayCopyTokens() {
|
|
return splitCopyOnCMSPlaceHolder(this.getCmsContent(this.cmsWidgetName, "BodyText"));
|
|
},
|
|
bannerCta() {
|
|
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.afterpay-modal-banner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: $blue-150;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
border-radius: 1rem;
|
|
@include media-breakpoint-up(md) {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.callout {
|
|
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
> div:first-of-type {
|
|
display: flex;
|
|
color: $black;
|
|
font-size: $font-size-20;
|
|
line-height: 2rem;
|
|
@include media-breakpoint-down(md) {
|
|
border-bottom: 1px solid;
|
|
padding-bottom: 0.5rem;
|
|
width: 100%;
|
|
justify-content: center;
|
|
|
|
> span:first-of-type {
|
|
margin-right: 0.25rem;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
flex-direction: column;
|
|
border-right: 1px solid;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
> div:last-of-type {
|
|
color: $gray-650;
|
|
text-align: left;
|
|
|
|
@include media-breakpoint-down(md) {
|
|
padding-top: 1rem;
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
img {
|
|
transform: translateY(-0.1rem);
|
|
}
|
|
}
|
|
}
|
|
</style>
|