jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-762 Edit how most button-question wrappers emit

Browse source
This commit is contained in:
Katie 2022-09-23 09:31:17 -04:00
parent dce7a575b6
commit d4100f4d26
20 changed files with 190 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/common-components/base-input-button/base-input-button.vue
View file

@ -122,7 +122,7 @@ export default {
},
handleClick(e) {
this.handleSelectionChange(e);
this.$emit("change", this.valueToEmit);
this.$emit("buttonClicked", this.valueToEmit);
},
pushClickEventToGA() {
this.pushEventToGA(
@ -136,7 +136,7 @@ export default {
},
computed: {
isChecked() {
if (this.isMultiSelect || this.modelValue instanceof Array) {
if (this.isMultiSelect && this.modelValue instanceof Array) {
return this.modelValue.includes(this.value);
}
@ -151,9 +151,6 @@ export default {
"-"
)}`;
},
// baseInputButtonProps() {
// }
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";

4
src/common-components/button-question/button-question.vue
View file

@ -51,7 +51,7 @@
:validationRules="validationRules"
:textPosition="textPosition"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange" />
@buttonClicked="handleAnswerChange" />
<!-- For nested questions -->
<transition name="fade" mode="out-in">
<div
@ -222,7 +222,7 @@ export default {
},
handleAnswerChange(primaryAnswerValue) {
this.primaryValue = primaryAnswerValue;
this.$emit("change", primaryAnswerValue);
this.$emit("buttonQuestionChange", primaryAnswerValue);
this.$emit("update:modelValue", primaryAnswerValue);
},
},

2
src/helpers/heritage-integration/order-helper.js
View file

@ -18,6 +18,7 @@ export async function loadOrderIfPresent() {
return null;
}
// TODO KO isOrderDifferent and isOrderSubmitted
// Reset state if cookie says to.
if (funnelCookie.ShouldResetState) {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
@ -25,7 +26,6 @@ export async function loadOrderIfPresent() {
return null;
}
// Load referral if there is a cookie, and it doesn't indicate it needs a state reset.
return (await loadOrder(funnelCookie.ReferralNumber, funnelCookie.ReferralDate, funnelCookie.ReferralCorrelationId, funnelCookie.ReferralParentAccountNumber)).data;
}

25
src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
View file

@ -6,40 +6,39 @@
buttonType="listButtonHorizontal"
v-model="selectedValues"
isCashOrInsurance
isRequired />
isRequired
/>
</div>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default {
export default ({
name: "cashOrInsuranceQuestion",
props: {
props: {
modelValue: String,
groupName: String,
cmsWidgetName: String,
},
computed: {
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValues: {
get: function () {
get: function() {
// Convert to CMS answer name from bool
var cmsAnswerValue = this.modelValue
? "InsuranceAnswer"
: "CashAnswer";
var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
return cmsAnswerValue;
},
set: function (newValue) {
set: function(newValue) {
// Convert back to bool for parent component
this.$emit("update:modelValue", newValue === "InsuranceAnswer");
},
}
},
},
components: {
buttonQuestion,
},
};
</script>
})
</script>

21
src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
View file

@ -6,8 +6,7 @@
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
isRequired
v-model="selectedValue"
v-model="selectedDamageLocations"
validationRules="damage-location-required"
/>
</div>
@ -19,22 +18,20 @@ import store from "@/store";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin"
// DEFINE VALIDATION RULES
defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));
export default ({
name: "damageLocationQuestion",
mixins: [buttonQuestionWrapperMixin],
data(){
return {
damageOptions: {},
// selectedValue: []
selectedDamageLocations: this.modelValue
}
},
props: {
modelValue: Array,
props: {
modelValue: [Array, String, Number],
groupName: String,
cmsWidgetName: String,
},
@ -72,13 +69,13 @@ export default ({
});
},
},
watch: {
selectedDamageLocations(selectedDamageLocations) {
this.$emit("update:modelValue", selectedDamageLocations);
}
},
components: {
buttonQuestion,
},
watch: {
selectedValue(selectedValue) {
this.$emit("update:modelValue", selectedValue)
}
}
})
</script>

16
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -8,7 +8,7 @@
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedValue"
v-model="selectedReplaceOptions"
:validationRules="validationRules"
:suppressError="suppressError"
:isRequired="isRequired"
@ -20,21 +20,22 @@
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import store from "@/store";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
export default ({
name: "replaceOptionsQuestion",
mixins: [buttonQuestionWrapperMixin],
// mixins: [buttonQuestionWrapperMixin],
data() {
return {
replaceOptions: [],
selectedReplaceOptions: this.modelValue
}
},
props: {
modelValue: [Array, String, Number],
isAvailable: Boolean,
filterByVehicleCategory: Boolean,
groupName: String,
// modelValue: Array,
isMultiSelect: Boolean,
validationRules: String,
suppressError: Boolean,
@ -50,7 +51,7 @@ export default ({
// ex: BackGlass stationary
if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
const selectedAnswer = this.answersToDisplay[0].Name;
this.selectedValue = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
this.selectedReplaceOptions = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
}
},
},
@ -87,8 +88,11 @@ export default ({
},
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
if (!shouldDisplayReplaceOptionsQuestion) {
this.selectedValue = [];
this.selectedReplaceOptions = [];
}
},
selectedReplaceOptions(selectedReplaceOptions) {
this.$emit("update:modelValue", selectedReplaceOptions);
}
},
components: {

19
src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
View file

@ -7,7 +7,7 @@
:groupName="groupName"
buttonType="listButtonHorizontal"
useTextForValue
v-model="selectedValue"
v-model="numberOfChips"
:validationRules="validationRules"
isRequired
/>
@ -17,12 +17,18 @@
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
export default ({
name: "windshieldOptions",
mixins: [buttonQuestionWrapperMixin],
name: "windshieldChipCountQuestion",
// mixins: [buttonQuestionWrapperMixin],
data() {
return {
numberOfChips: this.modelValue
}
},
props: {
modelValue: [String, Number],
groupName: String,
isAvailable: Boolean,
validationRules: String,
@ -38,6 +44,11 @@ export default ({
},
components: {
buttonQuestion,
},
watch: {
numberOfChips(numberOfChips) {
this.$emit("update:modelValue", numberOfChips);
}
}
})
</script>

39
src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
View file

@ -1,28 +1,36 @@
<template>
<transition name="fade" mode="out-in">
<div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
<div
class="windshield-damage-type-question"
v-if="isAvailable"
aria-live="polite">
<buttonQuestion
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
buttonType="listCard"
v-model="selectedValue"
v-model="selectedWindshieldDamageType"
:suppressError="suppressError"
:validationRules="validationRules"
isRequired
/>
isRequired />
</div>
</transition>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
export default ({
export default {
name: "windshieldDamageTypeQuestion",
mixins: [buttonQuestionWrapperMixin],
// mixins: [buttonQuestionWrapperMixin],
data() {
return {
selectedWindshieldDamageType: this.modelValue,
};
},
props: {
modelValue: String,
groupName: String,
isAvailable: Boolean,
suppressError: Boolean,
@ -30,15 +38,20 @@ export default ({
cmsWidgetName: String,
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
},
watch: {
selectedWindshieldDamageType(selectedWindshieldDamageType) {
this.$emit("update:modelValue", selectedWindshieldDamageType);
},
},
components: {
buttonQuestion,
},
})
</script>
};
</script>

84
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -1,16 +1,15 @@
<template>
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="makes"
groupName="ChooseVehicleMake"
textPosition="text-start"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="makes"
groupName="ChooseVehicleMake"
textPosition="text-start"
v-model="selectedMake"
:selectOnKeypress="false"
isRequired />
</template>
<script>
@ -19,37 +18,44 @@ import buttonQuestion from "@/common-components/button-question/button-question"
import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
import buttonQuestionWrapperMixin from "../../../mixins/button-question-wrapper-mixin";
// import buttonQuestionWrapperMixin from "../../../mixins/button-question-wrapper-mixin";
export default {
name: "make-question",
mixins: [buttonQuestionWrapperMixin],
data() {
return {
makes: [],
};
},
props: {
cmsWidgetName: String,
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
name: "make-question",
// mixins: [buttonQuestionWrapperMixin],
data() {
return {
makes: [],
selectedMake: ""
};
},
},
components: {
buttonQuestion,
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_MAKES,
{ year: store.getters.vehicle.year }
);
props: {
modelValue: String,
cmsWidgetName: String,
},
initializeComponent(initialData) {
this.makes = initialData;
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
},
components: {
buttonQuestion,
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_MAKES,
{ year: store.getters.vehicle.year }
);
},
initializeComponent(initialData) {
this.makes = initialData;
},
},
watch: {
selectedMake(selectedMake) {
this.$emit("update:modelValue", selectedMake);
},
},
},
};
</script>

9
src/layouts/vehicle-model/model-question/model-question.vue
View file

@ -7,7 +7,7 @@
:answers="models"
groupName="ChooseVehicleModel"
textPosition="text-start"
v-model="selectedValue"
v-model="selectedModel"
:selectOnKeypress="false"
isRequired
/>
@ -27,9 +27,11 @@ export default {
data() {
return {
models: [],
selectedModel: ""
};
},
props: {
modelValue: String,
cmsWidgetName: String,
},
computed: {
@ -51,5 +53,10 @@ export default {
this.models = initialData;
},
},
watch: {
selectedModel(selectedModel) {
this.$emit("update:modelValue", selectedModel);
}
}
};
</script>

3
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -64,10 +64,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import { Form } from "vee-validate";
import store from "@/store";
import { storeMutations } from "@/constants/store-mutations.js";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { assertParenthesizedExpression } from "@babel/types";
export default {
name: "vehicle-parts",

12
src/layouts/vehicle-style/style-question/style-question.vue
View file

@ -7,7 +7,7 @@
:answers="styles"
groupName="ChooseVehicleStyle"
textPosition="text-start"
v-model="selectedValue"
v-model="selectedStyle"
:selectOnKeypress="false"
isRequired
/>
@ -19,14 +19,15 @@ import buttonQuestion from "@/common-components/button-question/button-question"
import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
export default {
name: "style-question",
mixins: [buttonQuestionWrapperMixin],
// mixins: [buttonQuestionWrapperMixin],
data() {
return {
styles: [],
selectedStyle: ""
};
},
props: {
@ -55,5 +56,10 @@ export default {
this.styles = initialData;
},
},
watch: {
selectedStyle(selectedStyle) {
this.$emit("update:modelValue", selectedStyle);
}
}
};
</script>

12
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -8,7 +8,7 @@
:answers="years"
groupName="ChooseVehicleYear"
textPosition="text-start"
v-model="selectedValue"
v-model="selectedYear"
:selectOnKeypress="false"
isRequired
/>
@ -20,14 +20,15 @@ import buttonQuestion from "@/common-components/button-question/button-question"
// Supporting files
import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
export default {
name: "year-question",
mixins: [buttonQuestionWrapperMixin],
// mixins: [buttonQuestionWrapperMixin],
data() {
return {
years: [],
selectedYear: ""
};
},
props: {
@ -52,5 +53,10 @@ export default {
this.years = initialData;
},
},
watch: {
selectedYear(selectedYear) {
this.$emit("update:modelValue", selectedYear);
}
}
};
</script>

49
src/mixins/button-question-wrapper-mixin.js
View file

@ -1,20 +1,35 @@
import { ref, isRef } from "vue";
export default {
props: {
modelValue: [String, Number]
},
data() {
return {
selectedValue: null,
};
},
mounted() {
console.log("MOUNTED: ", this.modelValue)
this.selectedValue = this.modelValue;
},
watch: {
selectedValue(selectedValue) {
console.log("selectedValue: ", selectedValue)
this.$emit("update:modelValue", selectedValue);
props: {
modelValue: [Array, String, Number],
// modelValueName: {
// type: String,
// required: true,
// },
},
data() {
return {
selectedValue: null,
};
},
created() {
this.selectedValue = this.modelValue;
console.log("Created: ", {
selectedValue: this.selectedValue,
// modelValue: this.modelValue,
// modelValueName: this.modelValueName
})
if (this.modelValueName) {
this[this.modelValueName] = this.selectedValue;
// this.$on("update:modelValue", (dynamicModelValue) => {
// console.log("ON HIT", {
// dynamicModelValue: dynamicModelValue
// })
// this.selectedValue = dynamicModelValue;
// this.$emit("update:modelValue", dynamicModelValue)
// })
}
},
},
};

3
src/mixins/vehicle-questions-mixin.js
View file

@ -74,6 +74,9 @@ export default {
const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
const hasCapabilityQuestions = this.hasCapabilityQuestions(partsOrQuestions);
console.log({
hasGlassLocationWithMultipleParts: hasGlassLocationWithMultipleParts
})
if (hasPartQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.PART_QUESTIONS)) {
self.$router.navigateWithSaving(self.navigationScenarios.HAS_PART_QUESTIONS, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions });
}

2
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -5,7 +5,7 @@
'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': isCashOrInsurance },
]"
@change="handleAnswerChange">
@buttonClicked="handleAnswerChange">
<div
class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
<span class="m-0" :class="textPosition">

5
src/ux-components/list-button/list-button.vue
View file

@ -2,7 +2,7 @@
<baseInputButton
v-bind="$props"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
@change="handleAnswerChange">
@buttonClicked="handleAnswerChange">
<div
tabindex="-1"
:aria-label="buttonLabel"
@ -66,6 +66,9 @@ export default {
<style lang="scss" scoped>
.list-group {
.loader {
position: absolute;
}
&.list-button {
outline: none;
input[type="radio"],

2
src/ux-components/list-card/list-card.vue
View file

@ -5,7 +5,7 @@
'list-card w-100 rounded-3 d-flex align-items-center h-100',
{ horizontal: isWide },
]"
@change="handleAnswerChange">
@buttonClicked="handleAnswerChange">
<div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
:class="getLabelClasses">

1
src/ux-components/loader/loader.vue
View file

@ -27,7 +27,6 @@ export default {
<style lang="scss">
.loader {
display: flex;
position: absolute;
//Open an overlay to prevent page interaction
&:before {

2
src/ux-components/radio/radio.vue
View file

@ -3,7 +3,7 @@
v-bind="$props"
buttonWrapperClasses="ui-radio form-check"
inputClasses="form-check-input"
@change="handleAnswerChange">
@buttonClicked="handleAnswerChange">
<div class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{