Merge pull request #1486 from Safelite/feature/CSR-1391.1

Feature/csr 1391.1

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

@@ -0,0 +1,73 @@
+<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>

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

@@ -0,0 +1,99 @@
+<template>
+    <div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== paymentTypes.cc"
+            :buttonText="paymentMethodsInfo[paymentTypes.cc]?.buttonText"
+            :buttonImage="paymentMethodsInfo[paymentTypes.cc]?.answerImageUrl"
+            :buttonImageId="paymentMethodsInfo[paymentTypes.cc]?.imageId"
+            @click-event="switchPaymentClick(paymentTypes.cc)" />
+    </div>
+    <div class="switch-button-separator py-3" v-if="paymentType !== paymentTypes.cc">or</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== paymentTypes.pp"
+            :buttonText="paymentMethodsInfo[paymentTypes.pp]?.buttonText"
+            :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 === paymentTypes.cc">or</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== paymentTypes.ap"
+            :buttonText="paymentMethodsInfo[paymentTypes.ap]?.buttonText"
+            :buttonImage="paymentMethodsInfo[paymentTypes.ap]?.answerImageUrl"
+            :buttonImageId="paymentMethodsInfo[paymentTypes.ap]?.imageId"
+            @click-event="switchPaymentClick(paymentTypes.ap)" />
+    </div>
+</template>
+
+<script>
+import paymentSwitchButton from "./payment-switch-button/payment-switch-button";
+
+export default {
+    name: "paymentSwitch",
+    data() {
+        return {
+            paymentTypes: {
+                cc: "cc",
+                pp: "pp",
+                ap: "ap",
+            },
+        };
+    },
+    props: {
+        cmsWidgetName: String,
+        paymentType: String,
+    },
+    computed: {
+        switchPaymentHeaderText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        paymentMethodAnswerData() {
+            const rawData = this.getCmsContent(this.cmsWidgetName, "Answers");
+
+            if (!rawData) {
+                return [];
+            } else {
+                return rawData;
+            }
+        },
+        paymentMethodsInfo() {
+            return this.paymentMethodAnswerData.reduce((accumulator, paymentMethod) => {
+                accumulator[paymentMethod.Name] = {
+                    buttonText: paymentMethod.Text,
+                    answerImageUrl: paymentMethod.AnswerImageUrl,
+                    imageId: paymentMethod.ImageId,
+                };
+                return accumulator;
+            }, {});
+        },
+    },
+    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>