73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<template>
|
|
<button
|
|
type="button"
|
|
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
|
|
@click="handleClick">
|
|
<!-- <span class="m-0">{{ buttonLabelText }}</span> -->
|
|
<span v-for="token in tokens" :key="token">
|
|
<span v-if="isInlineImageToken(token)">
|
|
<img
|
|
v-if="hasImage"
|
|
class="ms-2"
|
|
:src="buttonImage"
|
|
:alt="getInlineAltText(token)" />
|
|
<span v-else> {{ getInlineAltText(token) }}</span>
|
|
</span>
|
|
<span v-else>
|
|
{{ token }}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
|
|
|
|
const INLINE_IMAGE_TOKEN = "custom:inlineImage";
|
|
|
|
export default {
|
|
name: "payment-switch-button",
|
|
props: {
|
|
buttonText: String,
|
|
buttonImage: String,
|
|
buttonImageId: String,
|
|
},
|
|
methods: {
|
|
handleClick(clickValue) {
|
|
this.pushEventToGA(
|
|
this.$route.query[this.queryStrings.FMG_PAGE],
|
|
this.GaActions.CLICKED,
|
|
this.buttonText,
|
|
true
|
|
);
|
|
this.$emit("click-event", clickValue);
|
|
},
|
|
isInlineImageToken(token) {
|
|
return token.includes(INLINE_IMAGE_TOKEN);
|
|
},
|
|
getInlineAltText(token) {
|
|
let innerTokens = token.split(",");
|
|
|
|
return innerTokens[1] ?? "";
|
|
},
|
|
},
|
|
computed: {
|
|
tokens() {
|
|
return splitCopyOnCMSPlaceHolder(this.buttonText ?? "");
|
|
},
|
|
hasImage() {
|
|
return !!this.buttonImage;
|
|
},
|
|
buttonLabelText() {
|
|
return this.tokens[0];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn {
|
|
border: 1px solid $gray-600;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|