CSR-1391 better looking payment buttons

src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue

@@ -1,74 +1,73 @@
 <template>
-    <baseInputButton v-bind="$props" @update:modelValue="handleClick">
+    <button
-        <div class="button-content d-flex flex-row py-3 px-4">
+        type="button"
-            <img
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
-                v-if="shouldDisplaySideImage"
+        @click="handleClick">
-                :id="buttonImageId"
+        <!-- <span class="m-0">{{ buttonLabelText }}</span> -->
-                class="ms-auto order-3"
+        <span v-for="token in tokens" :key="token">
-                :src="buttonImage"
+            <span v-if="isInlineImageToken(token)">
-                :alt="altText" />
+                <img
-            <div class="order-2">
+                    v-if="hasImage"
-                <p class="m-0">
+                    class="ms-2"
-                    <span v-for="token in tokens" :key="token">
+                    :src="buttonImage"
-                        <span v-if="isInlineImageToken(token)">
+                    :alt="getInlineAltText(token)" />
-                            <img
+                <span v-else> {{ getInlineAltText(token) }}</span>
-                                v-if="hasImage"
+            </span>
-                                :src="buttonImage"
+            <span v-else>
-                                :alt="getInlineAltText(token)" />
+                {{ token }}
-                            <span v-else> {{ getInlineAltText(token) }}</span>
+            </span>
-                        </span>
+        </span>
-                        <span v-else>
+    </button>
-                            {{ token }}
-                        </span>
-                    </span>
-                </p>
-            </div>
-        </div>
-    </baseInputButton>
 </template>
 
 <script>
-import baseInputButton from "@/digital-components/base-input-button/base-input-button";
-import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
 
 const INLINE_IMAGE_TOKEN = "custom:inlineImage";
 
-function isInlineImageToken(token) {
-    return token.includes(INLINE_IMAGE_TOKEN);
-}
-
-function getInlineAltText(token) {
-    let innerTokens = token.split(",");
-
-    return innerTokens[1] ?? "";
-}
-
 export default {
     name: "payment-switch-button",
-    mixins: [inputButtonWrapperMixin],
+    props: {
+        buttonText: String,
+        buttonImage: String,
+        buttonImageId: String,
+    },
     methods: {
-        isInlineImageToken,
+        handleClick(clickValue) {
-        getInlineAltText,
+            this.pushEventToGA(
-        handleClick(newValue) {
+                this.$route.query[this.queryStrings.FMG_PAGE],
-            this.$emit("click-event", newValue);
+                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.buttonLabel ?? "");
+            return splitCopyOnCMSPlaceHolder(this.buttonText ?? "");
         },
         hasImage() {
             return !!this.buttonImage;
         },
-        shouldDisplaySideImage() {
+        buttonLabelText() {
-            return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
+            return this.tokens[0];
         },
     },
-    components: {
-        baseInputButton,
-    },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.btn {
+    border: 1px solid $gray-600;
+    border-radius: 8px;
+}
+</style>

src/layouts/payment/payment-switch/payment-switch.vue

@@ -2,24 +2,29 @@
     <div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
     <div class="switch-payment-button">
         <paymentSwitchButton
-            v-if="paymentType !== 'cc'"
+            v-if="paymentType !== paymentTypes.cc"
-            buttonLabel="Credit or Debit"
+            :buttonText="paymentMethodsInfo[paymentTypes.cc]?.buttonText"
-            imageSrc="https://digitalconsumercms.dev.safelite.io/images/default-source/default-album/icons/credit-card-group.svg?sfvrsn=553dfb5b_0"
+            :buttonImage="paymentMethodsInfo[paymentTypes.cc]?.answerImageUrl"
-            @click-event="switchPaymentClick('cc')" />
+            :buttonImageId="paymentMethodsInfo[paymentTypes.cc]?.imageId"
+            @click-event="switchPaymentClick(paymentTypes.cc)" />
     </div>
-    <div class="switch-button-separator py-3" v-if="paymentType !== 'cc'">or</div>
+    <div class="switch-button-separator py-3" v-if="paymentType !== paymentTypes.cc">or</div>
     <div class="switch-payment-button">
         <paymentSwitchButton
-            v-if="paymentType !== 'pp'"
+            v-if="paymentType !== paymentTypes.pp"
-            buttonLabel="PayPal"
+            :buttonText="paymentMethodsInfo[paymentTypes.pp]?.buttonText"
-            @click-event="switchPaymentClick('pp')" />
+            :buttonImage="paymentMethodsInfo[paymentTypes.pp]?.answerImageUrl"
+            :buttonImageId="paymentMethodsInfo[paymentTypes.pp]?.imageId"
+            @click-event="switchPaymentClick(paymentTypes.pp)" />
     </div>
-    <div class="switch-button-separator py-3" v-if="paymentType === 'cc'">or</div>
+    <div class="switch-button-separator py-3" v-if="paymentType === paymentTypes.cc">or</div>
     <div class="switch-payment-button">
         <paymentSwitchButton
-            v-if="paymentType !== 'ap'"
+            v-if="paymentType !== paymentTypes.ap"
-            buttonLabel="Afterpay"
+            :buttonText="paymentMethodsInfo[paymentTypes.ap]?.buttonText"
-            @click-event="switchPaymentClick('ap')" />
+            :buttonImage="paymentMethodsInfo[paymentTypes.ap]?.answerImageUrl"
+            :buttonImageId="paymentMethodsInfo[paymentTypes.ap]?.imageId"
+            @click-event="switchPaymentClick(paymentTypes.ap)" />
     </div>
 </template>
 
@@ -29,7 +34,13 @@ import paymentSwitchButton from "./payment-switch-button/payment-switch-button";
 export default {
     name: "paymentSwitch",
     data() {
-        return {};
+        return {
+            paymentTypes: {
+                cc: "cc",
+                pp: "pp",
+                ap: "ap",
+            },
+        };
     },
     props: {
         cmsWidgetName: String,
@@ -39,14 +50,24 @@ export default {
         switchPaymentHeaderText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
-        ccButtonText() {
+        paymentMethodAnswerData() {
-            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+            const rawData = this.getCmsContent(this.cmsWidgetName, "Answers");
+
+            if (!rawData) {
+                return [];
+            } else {
+                return rawData;
+            }
         },
-        ppButtonText() {
+        paymentMethodsInfo() {
-            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+            return this.paymentMethodAnswerData.reduce((accumulator, paymentMethod) => {
-        },
+                accumulator[paymentMethod.Name] = {
-        apButtonText() {
+                    buttonText: paymentMethod.Text,
-            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+                    answerImageUrl: paymentMethod.AnswerImageUrl,
+                    imageId: paymentMethod.ImageId,
+                };
+                return accumulator;
+            }, {});
         },
     },
     methods: {