Many changes

src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue

@@ -0,0 +1,125 @@
+<template>
+    <baseInputButton
+        v-bind="$props"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+        v-model="selectedValue">
+        <div
+            class="button-content list-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";
+import { getIn } from "yup/lib/util/reach";
+
+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-method-list-button",
+    mixins: [inputButtonWrapperMixin],
+    components: {
+        baseInputButton,
+    },
+    methods: {
+        isInlineImageToken,
+        getInlineAltText,
+    },
+    computed: {
+        tokens() {
+            return splitCopyOnCMSPlaceHolder(this.buttonLabel);
+        },
+        hasImage() {
+            return !!this.buttonImage;
+        },
+        shouldDisplaySideImage() {
+            return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
+
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
+        }
+    }
+}
+.list-button-content {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+    outline: none;
+
+    span {
+        &.small {
+            font-size: 0.75rem;
+            color: $gray-550;
+        }
+    }
+}
+</style>

src/layouts/payment-method/payment-method-question/payment-method-question.vue

@@ -1,52 +1,34 @@
 <template>
     <div class="payment-method-question">
         <buttonQuestion
-            groupName="payment-time"
+            groupName="payment-method"
-            :questionText="paymentTimeQuestionText"
+            buttonTypeString="payment-method-list-button"
-            :answers="paymentTimeAnswerData"
+            :buttonTypeObject="paymentMethodListButton"
+            isWide
+            :questionText="paymentMethodQuestionText"
+            :answers="paymentMethodAnswerData"
             isRequired
-            v-model="paymentTime"
+            v-model="selectedMethod"
             textPosition="text-start" />
-        <div v-if="shouldDisplaySecondaryQuestion">
-            <hr />
-            <buttonQuestion
-                groupName="payment-method"
-                :questionText="paymentMethodQuestionText"
-                :answers="paymentMethodAnswerData"
-                isRequired
-                v-model="selectedMethod"
-                textPosition="text-start" />
-        </div>
     </div>
 </template>
 
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
-
+import paymentMethodListButton from "./payment-method-list-button/payment-method-list-button";
 import { paymentMethods, paymentTimes } from "@/constants/payment-method-constants";
 
 export default {
     name: "payment-method-question",
     data() {
         return {
-            paymentTime: this.inferPayInAdvanceValue(),
+            paymentMethodListButton: paymentMethodListButton,
         };
     },
     props: {
         modelValue: String,
     },
     methods: {
-        inferPayInAdvanceValue() {
-            if (this.modelValue === paymentMethods.NONE) {
-                return paymentTimes.NONE;
-            }
-
-            if (this.modelValue === paymentMethods.LATER) {
-                return paymentTimes.LATER;
-            }
-
-            return paymentTimes.ADVANCE;
-        },
         getAnswersNullSafe(widgetName) {
             const rawData = this.getCmsContent(widgetName, "Answers");
 
@@ -66,27 +48,9 @@ export default {
                 this.$emit("update:modelValue", selectedMethod);
             },
         },
-        shouldDisplaySecondaryQuestion() {
-            return this.paymentTime === paymentTimes.ADVANCE;
-        },
-        paymentTimeQuestionText() {
-            return this.getCmsContent("PaymentTimeWidget", "QuestionText");
-        },
         paymentMethodQuestionText() {
             return this.getCmsContent("PaymentMethodWidget", "QuestionText");
         },
-        paymentTimeAnswerData() {
-            const cmsData = this.getAnswersNullSafe("PaymentTimeWidget");
-
-            return cmsData.map((answer) => {
-                return {
-                    buttonLabel: answer.Text,
-                    altText: answer.Text,
-                    groupName: "payment-time",
-                    value: answer.Name,
-                };
-            });
-        },
         paymentMethodAnswerData() {
             const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
 
@@ -96,19 +60,11 @@ export default {
                     altText: answer.Text,
                     groupName: "payment-method",
                     value: answer.Name,
+                    buttonImage: answer.AnswerImageUrl,
                 };
             });
         },
     },
-    watch: {
-        paymentTime(newValue) {
-            if (newValue === paymentTimes.LATER) {
-                this.selectedMethod = paymentMethods.LATER;
-            } else {
-                this.selectedMethod = paymentMethods.NONE;
-            }
-        },
-    },
     components: {
         buttonQuestion,
     },

src/layouts/payment-method/payment-method.vue

@@ -5,7 +5,7 @@
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
             <hr class="mt-0" />
-            <paymentMethodQuestion v-model="paymentMethod" />
+            <paymentMethodQuestion v-model="paymentMethodInternalModel" />
             <div class="fade-on-route-transition sub-container make-tall">
                 <navbar
                     ref="funnelFooter"
@@ -56,7 +56,7 @@ export default {
     },
     data() {
         return {
-            paymentMethod: null,
+            paymentMethodInternalModel: null,
         };
     },
     methods: {
@@ -82,6 +82,16 @@ export default {
                     return null;
             }
         },
+        isPiaDisabled() {
+            return false;
+        },
+        paymentMethod() {
+            if (this.isPiaDisabled) {
+                return paymentMethods.LATER;
+            }
+
+            return this.paymentMethodInternalModel;
+        },
     },
     watch: {
         customCtaCopy(newValue) {