CSR-1391 switch payment functionality

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

@@ -0,0 +1,74 @@
+<template>
+    <baseInputButton v-bind="$props" @update:modelValue="handleClick">
+        <div class="button-content d-flex flex-row py-3 px-4">
+            <img
+                v-if="shouldDisplaySideImage"
+                :id="buttonImageId"
+                class="ms-auto order-3"
+                :src="buttonImage"
+                :alt="altText" />
+            <div class="order-2">
+                <p class="m-0">
+                    <span v-for="token in tokens" :key="token">
+                        <span v-if="isInlineImageToken(token)">
+                            <img
+                                v-if="hasImage"
+                                :src="buttonImage"
+                                :alt="getInlineAltText(token)" />
+                            <span v-else> {{ getInlineAltText(token) }}</span>
+                        </span>
+                        <span v-else>
+                            {{ 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],
+    methods: {
+        isInlineImageToken,
+        getInlineAltText,
+        handleClick(newValue) {
+            this.$emit("click-event", newValue);
+        },
+    },
+    computed: {
+        tokens() {
+            return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? "");
+        },
+        hasImage() {
+            return !!this.buttonImage;
+        },
+        shouldDisplaySideImage() {
+            return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
+        },
+    },
+    components: {
+        baseInputButton,
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,78 @@
+<template>
+    <div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== 'cc'"
+            buttonLabel="Credit or Debit"
+            imageSrc="https://digitalconsumercms.dev.safelite.io/images/default-source/default-album/icons/credit-card-group.svg?sfvrsn=553dfb5b_0"
+            @click-event="switchPaymentClick('cc')" />
+    </div>
+    <div class="switch-button-separator py-3" v-if="paymentType !== 'cc'">or</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== 'pp'"
+            buttonLabel="PayPal"
+            @click-event="switchPaymentClick('pp')" />
+    </div>
+    <div class="switch-button-separator py-3" v-if="paymentType === 'cc'">or</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== 'ap'"
+            buttonLabel="Afterpay"
+            @click-event="switchPaymentClick('ap')" />
+    </div>
+</template>
+
+<script>
+import paymentSwitchButton from "./payment-switch-button/payment-switch-button";
+
+export default {
+    name: "paymentSwitch",
+    data() {
+        return {};
+    },
+    props: {
+        cmsWidgetName: String,
+        paymentType: String,
+    },
+    computed: {
+        switchPaymentHeaderText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        ccButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        ppButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        apButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+    },
+    methods: {
+        switchPaymentClick(paymentType) {
+            this.$emit("switch-payment-event", paymentType);
+        },
+    },
+    components: {
+        paymentSwitchButton,
+    },
+};
+</script>
+
+<style lang="scss">
+.switch-payment-header {
+    font-weight: 500;
+    color: $black;
+}
+
+.switch-button-separator {
+    text-align: center;
+    color: $black;
+}
+
+.switch-payment-button button {
+    width: 100%;
+    color: $black;
+}
+</style>

src/layouts/payment/payment.vue

@@ -21,39 +21,10 @@
                             scrolling="no">
                         </iframe>
                     </div>
-                    <div>{{ switchPaymentText }}</div>
+                    <paymentSwitch
-                    <div>
+                        cmsWidgetName="PaymentMethodWidget"
-                        <button
+                        :paymentType="paymentType"
-                            v-if="paymentType !== 'cc'"
+                        @switch-payment-event="switchPIAMethod" />
-                            ref="switchToCCButton"
-                            type="button"
-                            @mousedown="switchPIAMethod('cc')"
-                            aria-label="Switch to Credit Card">
-                            Switch to Credit Card
-                        </button>
-                    </div>
-                    <div v-if="paymentType !== 'cc'">or</div>
-                    <div>
-                        <button
-                            v-if="paymentType !== 'pp'"
-                            ref="switchToPPButton"
-                            type="button"
-                            @mousedown="switchPIAMethod('pp')"
-                            aria-label="Switch to PayPal">
-                            Switch to PayPal
-                        </button>
-                    </div>
-                    <div v-if="paymentType === 'cc'">or</div>
-                    <div>
-                        <button
-                            v-if="paymentType !== 'ap'"
-                            ref="switchToAPButton"
-                            type="button"
-                            @mousedown="switchPIAMethod('ap')"
-                            aria-label="Switch to Afterpay">
-                            Switch to Afterpay
-                        </button>
-                    </div>
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         isForwardActionDisabled="true"
@@ -193,6 +164,8 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
+import paymentSwitch from "./payment-switch/payment-switch.vue";
+
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import { externalUrls } from "@/router/router-constants/externalUrl-values";
@@ -493,6 +466,7 @@ export default {
         funnelHeader,
         navbar,
         loadingModal,
+        paymentSwitch,
     },
 };
 </script>