DigitalConsumer.FixMyGlass/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.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>