83 lines
2.3 KiB
Vue
83 lines
2.3 KiB
Vue
<template>
|
|
<div class="payment-method-question">
|
|
<buttonQuestion
|
|
groupName="payment-method"
|
|
buttonTypeString="payment-method-list-button"
|
|
:buttonTypeObject="paymentMethodListButton"
|
|
isWide
|
|
:questionText="paymentMethodQuestionText"
|
|
:answers="paymentMethodAnswerData"
|
|
isRequired
|
|
:validationRules="validationRules"
|
|
v-model="selectedMethod"
|
|
textPosition="text-start" />
|
|
</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 {
|
|
paymentMethodListButton: paymentMethodListButton,
|
|
};
|
|
},
|
|
props: {
|
|
modelValue: String,
|
|
validationRules: String,
|
|
},
|
|
methods: {
|
|
getAnswersNullSafe(widgetName) {
|
|
const rawData = this.getCmsContent(widgetName, "Answers");
|
|
|
|
if (!rawData) {
|
|
return [];
|
|
} else {
|
|
return rawData;
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
selectedMethod: {
|
|
get: function () {
|
|
return this.modelValue;
|
|
},
|
|
set: function (selectedMethod) {
|
|
this.$emit("update:modelValue", selectedMethod);
|
|
},
|
|
},
|
|
paymentMethodQuestionText() {
|
|
return this.getCmsContent("PaymentMethodWidget", "QuestionText");
|
|
},
|
|
paymentMethodAnswerData() {
|
|
const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
|
|
|
|
return cmsData.map((answer) => {
|
|
return {
|
|
buttonLabel: answer.Text,
|
|
altText: answer.Text,
|
|
groupName: "payment-method",
|
|
value: answer.Name,
|
|
buttonImage: answer.AnswerImageUrl,
|
|
};
|
|
});
|
|
},
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.payment-method-question {
|
|
.question-text span {
|
|
text-align: left;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
</style>
|