73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<template>
|
|
<div class="payment-method-question">
|
|
<buttonQuestion
|
|
v-model="selectedMethod"
|
|
groupName="payment-method"
|
|
buttonTypeString="payment-method-list-button"
|
|
:buttonTypeObject="paymentMethodListButton"
|
|
isWide
|
|
:questionText="paymentMethodQuestionText"
|
|
:answers="paymentMethodAnswerData"
|
|
isRequired
|
|
:validationRules="validationRules"
|
|
textPosition="text-start" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
|
import widgetFields from '@/constants/cms-widget-fields.js';
|
|
import paymentMethodListButton from './payment-method-list-button/payment-method-list-button.vue';
|
|
|
|
export default {
|
|
name: 'payment-method-question',
|
|
components: {
|
|
buttonQuestion
|
|
},
|
|
props: {
|
|
modelValue: String,
|
|
validationRules: String,
|
|
cmsWidgetName: String
|
|
},
|
|
emits: ['update:modelValue'],
|
|
data() {
|
|
return {
|
|
paymentMethodListButton
|
|
};
|
|
},
|
|
computed: {
|
|
selectedMethod: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(selectedMethod) {
|
|
this.$emit('update:modelValue', selectedMethod);
|
|
}
|
|
},
|
|
paymentMethodQuestionText() {
|
|
return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
|
|
},
|
|
paymentMethodAnswerData() {
|
|
const cmsData = this.getInputQuestionWidgetAnswersNullSafe(this.cmsWidgetName);
|
|
|
|
return cmsData.map((answer) => ({
|
|
buttonLabel: answer.Text,
|
|
altText: answer.Text,
|
|
groupName: 'payment-method',
|
|
value: answer.Name,
|
|
buttonImage: answer.AnswerImageUrl
|
|
}));
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.payment-method-question {
|
|
:deep(.question-text span) {
|
|
text-align: left;
|
|
line-height: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|