112 lines
No EOL
3.6 KiB
Vue
112 lines
No EOL
3.6 KiB
Vue
<template>
|
|
<ButtonQuestion
|
|
class="vin-lookup-methods-question"
|
|
v-model="selectedValue"
|
|
:answers="answersFromCms"
|
|
groupName="VinLookupMethodsOption"
|
|
buttonTypeString="listButton"
|
|
:questionText="questionTextFromCms"
|
|
isRequired
|
|
:validationRules="rules.optionRequired"
|
|
data-test-id="vin-lookup-methods-button-question" />
|
|
</template>
|
|
|
|
<script>
|
|
|
|
// Import Other Supporting Files
|
|
import { useMainStore } from '@/store';
|
|
import { experimentSettings } from '@/constants/experiments';
|
|
import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
|
|
import settleAllPromises from '@/helpers/layout-helper';
|
|
import globalRules from '@/constants/global-rules';
|
|
|
|
// Import Component
|
|
import ButtonQuestion from '@/digital-components/button-question/button-question.vue';
|
|
|
|
export default {
|
|
name: 'vin-lookup-methods',
|
|
components: {
|
|
ButtonQuestion
|
|
},
|
|
props: {
|
|
modelValue: String,
|
|
cmsWidgetName: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
emits: ['update:modelValue'],
|
|
data() {
|
|
return {
|
|
questionTextFromCms: '',
|
|
answersFromCms: [],
|
|
rules: {
|
|
optionRequired: globalRules.OPTION_REQUIRED
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
selectedValue: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(newValue) {
|
|
this.$emit('update:modelValue', newValue);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async initializeComponent() {
|
|
const isVinbyAddressPermissible = await this.getIsVinbyAddressPermissible();
|
|
this.questionTextFromCms = this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
|
|
|
const answers = this.getCmsContent(this.cmsWidgetName, 'Answers');
|
|
if (Array.isArray(answers)) {
|
|
if (!isVinbyAddressPermissible) {
|
|
const homeAddressIndex = answers.findIndex(answer => answer.Name === vinLookupMethodSelections.HOMEADDRESS);
|
|
answers.splice(homeAddressIndex, 1);
|
|
}
|
|
|
|
const ymmsPageEnabled = this.getSettingValue(experimentSettings.ISS_YMMS_VIN_REQUIRED_PAGE_ENABLED) === 'true';
|
|
const isVinRequired = useMainStore().order.vehicle.vinRequired;
|
|
if (isVinRequired && ymmsPageEnabled) {
|
|
const vinIndex = answers.findIndex(answer => answer.Name === vinLookupMethodSelections.NOVIN);
|
|
if (vinIndex >= 0) {
|
|
answers.splice(vinIndex, 1);
|
|
}
|
|
}
|
|
|
|
this.answersFromCms = answers;
|
|
}
|
|
},
|
|
async getIsVinbyAddressPermissible() {
|
|
const isVinbyAddressPermissibleResponse = useMainStore().getIsVinbyAddressPermissible();
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: 'isVinbyAddressPermissible',
|
|
promise: isVinbyAddressPermissibleResponse
|
|
}
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
return resultMap.isVinbyAddressPermissible;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.vin-lookup-methods-question {
|
|
:deep(.question-text) {
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
:deep(.list-button) {
|
|
.list-button-content,
|
|
input[type="radio"]:checked + .list-button-content {
|
|
color: $black;
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
}
|
|
}
|
|
</style> |