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

CSR-269

Browse source
This commit is contained in:
CarlNation 2022-02-17 08:05:05 -05:00
parent e2bfed2b36
commit 5d866d0d04
9 changed files with 137 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -121,7 +121,7 @@ export default {
},
},
mounted(){
if(Array.isArray(this.answers) && this.answers.length === 1) {
if(Array.isArray(this.answers) && this.answers.length === 1 && this.selectedValues != undefined) {
const newSelectedValues = this.selectedValues;
newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
this.selectedValues = newSelectedValues;

2
src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
View file

@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => {
test("Answers to display filtered by data from api.", async () => {
//Arrange
const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory});
//Act
replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");

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

@ -2,7 +2,7 @@
<transition name="fade">
<div class="replace-options-question">
<buttonQuestion
v-if="isAvailable && answersToDisplay.length > 1"
v-if="isAvailable && answersToDisplay.length > 0"
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"
@ -30,9 +30,6 @@ defineRule("replace-options-required", (value) => {
export default ({
name: "replaceOptionsQuestion",
updated() {
console.log("ro:modelValue=>" + this.modelValue);
},
data(){
return {
questionText: String,
@ -51,7 +48,6 @@ export default ({
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
this.replaceOptions = replaceOptions;
console.log("ro:" + this.questionText);
},
},
computed: {
@ -60,7 +56,6 @@ export default ({
return this.modelValue;
},
set: function(newValue) {
console.log("ro:newVal=>" + newValue);
this.$emit("update:modelValue", newValue);
}
},

5
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -33,11 +33,6 @@ import baseMixin from "@/mixins/base-mixin";
export default {
name: "vehicle-damage",
updated() {
console.log("vd:selectedWindshieldChipCount=>" + this.selectedWindshieldOptions.selectedWindshieldChipCount);
console.log("vd:selectedWindshieldDamageType=>" + this.selectedWindshieldOptions.selectedWindshieldDamageType);
console.log("vd:selectedWindshieldReplaceOptions=>" + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

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

@ -1,99 +0,0 @@
<template>
<div class="windshield-damage-type-question">
<buttonQuestion
v-if="isAvailable && answersToDisplay.length > 1"
:questionText="questionText"
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedValues"
validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
:suppressError="suppressError"
/>
</div>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import store from "@/store";
import { defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("windshield-damage-required", (value) => {
if (!value || value.length < 1) {
return "Please select windshield damage";
}
return true;
});
defineRule("checkForRepairAndReplace", (value, [other]) => {
if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
return "checkForRepairAndReplace error"
}
return true;
});
export default ({
name: "windshieldDamageTypeQuestion",
data(){
return {
questionText: String,
answersFromCms: Array,
damageOptions: Object,
}
},
props: {
isMultiSelect: Boolean,
modelValue: Array,
isAvailable: Boolean,
name: String,
groupName: String,
suppressError: Boolean,
},
methods: {
initializeComponent(cmsContent, damageOptions){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
this.damageOptions = damageOptions;
},
},
computed: {
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
damageOptionsMap(){
return {
Windshield: true,
SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
}
},
answersToDisplay(){
// HARD CODED MOCK DATA FOR NOW
return [
{
"Name": "Windshield-Crack",
"Text": "Crack",
"SubText": "My damage is larger than six inches.",
"ImageId": "2cf13fbb-22d8-4b61-bd3d-3d413ea58c87",
"AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-replace-desktop-ds.png"
},
{
"Name": "Windshield-Chip",
"Text": "Chip(s)",
"SubText": "I have three or fewer chips smaller than six inches.",
"ImageId": "faaa14d9-3650-4949-a687-7665962337b8",
"AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-repair-desktop-ds.png"
}
]
},
},
components: {
buttonQuestion,
},
})
</script>

71
src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js Normal file
View file

@ -0,0 +1,71 @@
import { shallowMount } from "@vue/test-utils";
import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
jest.mock("@/store", () => { return {}; }, {virtual: true});
describe("windshield-chip-count-question.vue", () => {
test("Selected chip count is emitted upon selection.", async () => {
//Arrange
const { wrapper } = setupMocks({ modelValueProp: "Two" });
const chipCountToSelect = "Two";
//Act
wrapper.setValue({ modelValue: chipCountToSelect });
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Two" }]);
});
});
describe("Windshield-chip-count-question.vue", () => {
test("Should display question and answers from api.", async () => {
//Arrange
const { wrapper, cmsContent } = setupMocks({modelValueProp: "One"});
//Act
windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
//Assert
expect(wrapper.vm.questionText).toStrictEqual("How many chips are we repairing?");
expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'One' }, { Name: 'Two' }, { Name: 'Three'} ]);
});
});
function setupMocks({
modelValueProp = ["Two"],
groupName = "WindshieldChipCountQuestion",
cmsQuestionText = "How many chips are we repairing?",
cmsAnswers = [{Name: "One"}, {Name: "Two"}, {Name: "Three"}],
dataFromStoreApi = [],
}) {
//Mock store
store.dispatch = jest.fn(() => dataFromStoreApi);
store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
const mountOptions = getMountOptions({
store: {
dispatch: store.dispatch,
getters: store.getters,
},
});
//Mock props
mountOptions.propsData = {
modelValue: modelValueProp
};
const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions);
//Mock CMS content
const cmsContent = {
groupName: groupName,
QuestionText: cmsQuestionText,
Answers: cmsAnswers,
};
const damageOptions = dataFromStoreApi;
return { wrapper, cmsContent, damageOptions };
}

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

@ -1,10 +1,11 @@
<template>
<transition name="fade">
<div class="windshield-chip-count">
<div class="windshield-chip-count-question">
<buttonQuestion
:questionText="buttonQuestionText"
:answers="buttonAnswers"
:groupName="buttongroupName"
v-if="isAvailable"
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
buttonType="listButtonHorizontal"
v-model="selectedChipCountValues"
/>
@ -17,22 +18,24 @@ import buttonQuestion from "@/common-components/button-question/button-question"
export default ({
name: "windshieldOptions",
data(){
return {
questionText: String,
answersFromCms: Array
}
},
props: {
modelValue: Array,
questionText: String,
answersFromCms: Array,
groupName: String,
isAvailable: Boolean,
},
methods: {
initializeComponent(cmsContent){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
}
},
computed: {
buttonQuestionText() {
return this.questionText;
},
buttonAnswers() {
return this.answersFromCms;
},
buttongroupName() {
return this.groupName;
},
selectedChipCountValues: {
get: function() {
return this.modelValue;

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

@ -1,12 +1,15 @@
<template>
<transition name="fade">
<div class="windshield-options">
<div class="windshield-damage-type-question">
<buttonQuestion
:questionText="buttonQuestionText"
:answers="buttonAnswers"
:groupName="buttongroupName"
v-if="isAvailable"
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
buttonType="listCard"
v-model="selectedValues"
validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
:suppressError="suppressError"
/>
</div>
</transition>
@ -14,30 +17,43 @@
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import { defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("windshield-damage-required", (value) => {
if (!value || value.length < 1) {
return "Please select windshield damage";
}
return true;
});
defineRule("checkForRepairAndReplace", (value, [other]) => {
if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
return "checkForRepairAndReplace error"
}
return true;
});
export default ({
name: "windshieldOptions",
name: "windshieldDamageTypeQuestion",
data(){
return {
questionText: String,
answersFromCms: Array
}
},
props: {
modelValue: Array,
questionText: String,
answersFromCms: Array,
groupName: String,
isAvailable: Boolean,
suppressError: Boolean,
},
methods: {
initializeComponent(qt, an){
alert("hi");
initializeComponent(cmsContent){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
}
},
computed: {
buttonQuestionText() {
return this.questionText;
},
buttonAnswers() {
return this.answersFromCms;
},
buttongroupName() {
return this.groupName;
},
selectedValues: {
get: function() {
return this.modelValue;

51
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -2,22 +2,18 @@
<transition name="fade">
<div class="windshield-options" aria-live="polite">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
v-if="isWindshieldDamageLocation"
:questionText="questionText"
:answersFromCms="answersFromCms"
:isAvailable=isWindshieldDamageLocation
:suppressError="suppressError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
v-if="isWindshieldDamageLocation && isRepairOptionSelected"
:questionText="chipCountQuestionText"
:answersFromCms="chipCountAnswersFromCms"
:isAvailable=isRepairOptionSelected
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
isAvailable
:isAvailable=isReplaceOptionSelected
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
/>
@ -31,24 +27,10 @@ import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-opti
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
export default ({
name: "windshieldOptions",
updated() {
console.log("wo:isWindshieldDamageLocation=>" + this.isWindshieldDamageLocation);
console.log("wo:selectedWindshieldDamageTypeValues=>" + this.selectedWindshieldDamageTypeValues);
// if (this.isReplaceOptionSelected)
// this.$options.components.replaceOptionsQuestion.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
},
data(){
return {
questionText: String,
answersFromCms: Array,
chipCountQuestionText: String,
chipCountAnswersFromCms: Array,
replaceOptionsQuestionText: String,
replaceOptionsAnswersFromCms: Array,
availableReplacementOptions: Array,
// wsrFromCms: Array,
// wsrOptions: Array,
sro:[],
selectedWindshieldDamageType: null,
selectedWindshieldChipCount: null,
@ -67,20 +49,13 @@ export default ({
methods: {
initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms,
windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
this.wsrFromCms = windshieldReplaceOptionsQuestionFromCms;
this.wsrOptions = windshieldAvailableReplacementOptions;
//this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
this.$options.components.replaceOptionsQuestion.methods.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
},
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
return {
@ -96,9 +71,7 @@ export default ({
return this.modelValue;
},
set: function(newValue) {
//console.log("oldval=>" + this.modelValue);
this.$emit("update:modelValue", newValue);
// this.$options.components.replaceOptionsQuestion2.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
}
},
selectedWindshieldDamageTypeValues:{
@ -115,8 +88,6 @@ export default ({
},
set: function(newValue) {
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
//console.log("here=>" + newValue);
//this.$emit("update:selectedChipCount", newValue);
}
},
selectedWindshieldReplaceOptionsValues: {
@ -137,13 +108,13 @@ export default ({
isRepairOptionSelected(){
if (this.selectedWindshieldDamageTypeValues === undefined) return false;
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR");
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
},
// isReplaceOptionSelected(){
// if (this.selectedWindshieldDamageTypeValues === undefined) return false;
isReplaceOptionSelected(){
if (this.selectedWindshieldDamageTypeValues === undefined) return false;
// return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE");
// },
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
},
},
components: {
windshieldDamageTypeQuestion,