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

Merge branch 'develop' into feature/CSR-335

Browse source
This commit is contained in:
FrankRua 2022-02-22 16:36:49 -05:00
commit d64cd068a2
24 changed files with 480 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

@ -7,4 +7,5 @@
@import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
</style>

4
src/common-components/button-question/button-question.spec.js
View file

@ -53,7 +53,7 @@ describe("buttonQuestion.vue", () => {
answers: ["2022", "2021", "2020"],
isMultiSelect: false
});
const val = {isChecked: true, buttonId: "2021", }
const val = {checkValue: true, value: "2021", }
wrapper.vm.handleCheckedChanged(val);
// Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
@ -69,7 +69,7 @@ describe("buttonQuestion.vue", () => {
isMultiSelect: true,
}
});
const val = {isChecked: true, buttonId: "2019", }
const val = {checkValue: true, value: "2019", }
wrapper.vm.handleCheckedChanged(val);
// Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);

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

@ -12,7 +12,7 @@
v-for="answer in answers"
:key="answer.Name ? answer.Name : answer"
@isCheckedChanged="handleCheckedChanged"
:buttonID="answer.Name ? answer.Name : answer"
:buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
:value="answer.Name ? answer.Name : answer"
:buttonLabel="answer.Text ? answer.Text : answer"
:buttonLabelSubCopy="answer.SubText"
@ -29,7 +29,7 @@
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="getColLength"
:selectedButtonIDs="selectedValues"
:selectedValues="selectedValues"
data-test="button"
:validationRules="validationRules"
/>
@ -124,11 +124,13 @@ export default {
handleCheckedChanged(val) {
if(this.isMultiSelect && this.selectedValues) {
// Add or remove item to array of data to emit
const newSelectedValues = this.selectedValues;
val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
this.selectedValues = newSelectedValues;
if(Array.isArray(this.selectedValues)) {
const newSelectedValues = this.selectedValues;
val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
this.selectedValues = newSelectedValues;
}
} else {
this.selectedValues = [val.buttonId];
this.selectedValues = [val.value];
}
},
},

2
src/common-components/funnel-header/funnel-header.vue
View file

@ -60,7 +60,7 @@ export default {
<style lang="scss" scoped>
.funnel-header {
height: 56px;
padding: 0.97rem 0;
}
.logo-image {

23
src/layouts/nested-radio-poc/nested-radio.vue
View file

@ -23,18 +23,17 @@ import buttonQuestion from "@/common-components/button-question/button-question"
import listCard from "@/ux-components/list-card/list-card";
export default {
name: "nestedRadio",
components: {
buttonQuestion,
listCard,
},
data() {
return {
demoArray: [
"rain sensor, solar, 3rd visor band",
"rain sensor, heated glass, solar, 3rd visor band",
]
}
name: "nestedRadio",
components: {
buttonQuestion,
listCard,
},
data() {
return {
demoArray: [
"rain sensor, solar, 3rd visor band",
"rain sensor, heated glass, solar, 3rd visor band",
]
}
};
</script>

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

@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
//Assert
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'SideDoor' } ])
});
});

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

@ -67,13 +67,18 @@ export default ({
}
},
answersToDisplay(){
return Array.isArray(this.answersFromCms)
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter(ans =>
{
const name = ans.Name.split('-');
return name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptionsMap[name[1]];
})
: [];
return filteredAnswers.map(ans => {
const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
ans.Name = newName;
return ans;
});
},
},
components: {

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

@ -30,7 +30,7 @@ describe("replace-options-question.vue", () => {
replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
//Assert
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ])
});
});

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

@ -1,8 +1,7 @@
<template>
<transition name="fade">
<div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
<transition name="fade" mode="out-in">
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
<buttonQuestion
v-if="isAvailable"
isWide
:questionText="questionText"
isMultiSelect
@ -61,13 +60,19 @@ export default ({
}
},
answersToDisplay(){
return Array.isArray(this.answersFromCms)
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter(ans =>
{
const name = ans.Name.split('-');
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
})
: [];
return filteredAnswers.map(ans => {
const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
ans.Name = newName;
return ans;
});
},
},
mounted(){
@ -82,15 +87,3 @@ export default ({
}
})
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

126
src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js Normal file
View file

@ -0,0 +1,126 @@
import { shallowMount } from "@vue/test-utils";
import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import store from "@/store";
jest.mock("@/store", () => { return {}; }, {virtual: true});
describe("replace-options-question.vue", () => {
test("Selected side door option is emitted upon selection.", async () => {
//Arrange
const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
const sideDoorOptions = ["Backseat"];
//Act
wrapper.setValue({ modelValue: sideDoorOptions });
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
});
});
describe("replace-options-question.vue", () => {
test("Selected door side option is updated when selection made.", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.selectedDoorSidesValues = ["DriverSide"]
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedDoorSides"][0]).toEqual([["DriverSide"]]);
});
});
describe("replace-options-question.vue", () => {
test("Selected driver side option is updated when selection made.", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.selectedDriverSideReplacOptionsValues = ["FrontDoor"]
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedDriverSideReplacOptions"][0]).toEqual([["FrontDoor"]]);
});
});
describe("replace-options-question.vue", () => {
test("Selected passenger side option is updated when selection made.", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.selectedPassengerSideReplaceOptionsValues = ["BacktDoor"]
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedPassengerSideReplaceOptions"][0]).toEqual([["BacktDoor"]]);
});
});
describe("replace-options-question.vue", () => {
test("Answers to display filtered by data from api.", async () => {
//Arrange
const { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions } = setupMocks({});
//Act
sideDoorOptions.methods.initializeComponent.call(wrapper.vm, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions, "car-group");
//Assert
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'DriverSide' }, { Name: 'PassengerSide' } ])
});
});
function setupMocks({
modelValueProp = ["DriverSide"],
groupName = "sideDoorOptions",
cmsQuestionText = "CMS text goes here",
cmsAnswers = [{Name: "Car-DriverSide"}, {Name: "Car-PassengerSide"}],
driverSideReplaceOptions = ["FrontDoor", "BackDoor"],
passengerSideReplaceOptions = ["FrontDoor", "BackDoor"],
driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
selectedDamageLocations = ["SideDoor"]
}) {
//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,
groupName: groupName,
selectedDamageLocations: selectedDamageLocations,
};
const wrapper = shallowMount(sideDoorOptions, mountOptions);
const OptionsWrapper = wrapper.findAllComponents({name: "replaceOptionsQuestion"});
OptionsWrapper[0].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
OptionsWrapper[1].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
//Mock CMS content
const cmsContent = {
groupName: groupName,
QuestionText: cmsQuestionText,
Answers: cmsAnswers,
};
return { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions };
}

130
src/layouts/vehicle-damage/side-door-options/side-door-options.vue Normal file
View file

@ -0,0 +1,130 @@
<template>
<div class="side-door-options">
<transition name="fade" mode="out-in">
<div class="side-doors" v-if="selectedDamageLocations.includes('SideDoor')" aria-live="polite">
<buttonQuestion
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedDoorSidesValues"
/>
</div>
</transition>
<replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
<replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
</div>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import store from "@/store";
export default ({
name: "sideDoorOptions",
data(){
return {
questionText: String,
answersFromCms: Array,
selectedDoorSides: [],
// Child component data
selectedDriverSideReplacOptions: [],
selectedPassengerSideReplaceOptions: [],
}
},
props: {
groupName: String,
modelValue: Array,
selectedDamageLocations: Array,
},
methods: {
initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
// Child Components intialize
this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
},
getSideDoorReplacementOptions(){
return {
selectedDoorSides: this.selectedDoorSides,
selectedDriverSideReplacOptions: this.selectedDriverSideReplacOptions,
selectedPassengerSideReplaceOptions: this.selectedPassengerSideReplaceOptions
}
},
},
computed: {
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
selectedDoorSidesValues: {
get: function() {
return this.selectedDoorSides;
},
set: function(newValue) {
this.$emit("update:selectedDoorSides", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
}
},
selectedDriverSideReplacOptionsValues: {
get: function() {
return this.selectedDriverSideReplacOptions;
},
set: function(newValue) {
this.$emit("update:selectedDriverSideReplacOptions", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
}
},
selectedPassengerSideReplaceOptionsValues: {
get: function() {
return this.selectedPassengerSideReplaceOptions;
},
set: function(newValue) {
this.$emit("update:selectedPassengerSideReplaceOptions", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
}
},
answersToDisplay(){
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter(ans =>
{
const name = ans.Name.split('-');
return name[0].toUpperCase() === store.getters.vehicle.category;
})
: [];
return filteredAnswers.map(ans => {
const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
ans.Name = newName;
return ans;
});
},
isDriverSideReplaceOptionsQuestionAvailable(){
return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide");
},
isPassengerSideReplaceOptionsQuestionAvailable(){
return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide");
},
},
mounted() {
if(typeof(this.selectedValues) === "object"){
this.selectedDoorSides = this.selectedValues.selectedDoorSides;
this.selectedDriverSideReplacOptions = this.selectedValues.selectedDriverSideReplacOptions;
this.selectedPassengerSideReplaceOptions = this.selectedValues.selectedPassengerSideReplaceOptions;
}
},
components: {
buttonQuestion,
replaceOptionsQuestion,
}
})
</script>

39
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -4,7 +4,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
@ -172,16 +172,6 @@ function setupMocks({
}) {
//Mock api responses
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
return Promise.resolve({
driverSideOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
},
windshieldOptions: {
availableReplacementOptions: ["Single", "Driver", "Passenger"],
},
});
});
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
@ -198,6 +188,9 @@ function setupMocks({
driverSideOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
},
passengerSideOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
},
windshieldOptions: {
availableReplacementOptions: ["Single", "Driver", "Passenger"],
},
@ -222,12 +215,11 @@ function setupMocks({
initializeComponent: jest.fn(),
};
const driverSideOptions = replaceOptionsQuestion
driverSideOptions.methods = {
damageLocationQuestion.methods = {
initializeComponent: jest.fn(),
};
damageLocationQuestion.methods = {
sideDoorOptions.methods = {
initializeComponent: jest.fn(),
};
@ -250,17 +242,9 @@ function setupMocks({
vehicleBannerWrapper.vm.initializeComponent =
vehicleBanner.methods.initializeComponent;
const funnelSubHeaderWrapper = wrapper.findComponent({
name: "funnelSubHeader",
});
funnelSubHeaderWrapper.vm.initializeComponent =
funnelSubHeader.methods.initializeComponent;
const driverSideOptionsWrapper = wrapper.findAllComponents({
name: "replaceOptionsQuestion",
}).at(0);
driverSideOptionsWrapper.vm.initializeComponent =
replaceOptionsQuestion.methods.initializeComponent;
const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
sideDoorOptionsWrapper.vm.initializeComponent =
sideDoorOptions.methods.initializeComponent;
const windshieldOptionsWrapper = wrapper.findComponent({
name: "windshieldOptions",
@ -269,6 +253,11 @@ function setupMocks({
windshieldOptionsWrapper.vm.initializeComponent =
windshieldOptions.methods.initializeComponent;
const funnelSubHeaderWrapper = wrapper.findComponent({
name: "funnelSubHeader",
});
funnelSubHeaderWrapper.vm.initializeComponent =
funnelSubHeader.methods.initializeComponent;
const damageLocationQuestionWrapper = wrapper.findComponent({
name: "damageLocationQuestion",

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

@ -4,12 +4,11 @@
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" />
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
<replaceOptionsQuestion ref="windshieldOptions" isAvailable groupName="windshieldOptions" v-model="windshieldOptionsData" />
<windshieldOptions ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:selectedDamageLocations="selectedDamageLocations"
/>
<sideDoorOptions ref="sideDoorOptions" groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" :selectedDamageLocations="selectedDamageLocations" />
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
</div>
</template>
@ -20,8 +19,8 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
// Supporting files
@ -68,12 +67,12 @@ export default {
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.driverSideOptions.initializeComponent(
resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
);
vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
);
vm.$refs.sideDoorOptions.initializeComponent(
resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
@ -86,7 +85,11 @@ export default {
data(){
return {
selectedDamageLocations: [],
driverSideOptionsData: [],
sideDoorOptionsData: {
selectedDoorSides: [],
selectedDriverSideReplacOptions: [],
selectedPassengerSideReplaceOptions: []
},
selectedWindshieldOptions: []
}
},
@ -111,7 +114,7 @@ export default {
funnelFooter,
vehicleBanner,
funnelSubHeader,
replaceOptionsQuestion,
sideDoorOptions,
damageLocationQuestion,
windshieldOptions,
},

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

@ -1,8 +1,7 @@
<template>
<transition name="fade">
<div class="windshield-chip-count-question">
<transition name="fade" mode="out-in">
<div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
v-if="isAvailable"
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
@ -49,4 +48,4 @@ export default ({
buttonQuestion,
}
})
</script>
</script>

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

@ -1,8 +1,7 @@
<template>
<transition name="fade">
<div class="windshield-damage-type-question">
<transition name="fade" mode="out-in">
<div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
v-if="isAvailable"
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
@ -68,4 +67,4 @@ export default ({
buttonQuestion,
}
})
</script>
</script>

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

@ -1,24 +1,22 @@
<template>
<transition name="fade">
<div class="windshield-options" aria-live="polite">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation
:suppressError="suppressError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
:isAvailable=isRepairOptionSelected
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
/>
</div>
</transition>
<div class="windshield-options">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation
:suppressError="suppressError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
:isAvailable=isRepairOptionSelected
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
/>
</div>
</template>
<script>
@ -27,16 +25,6 @@ import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-opti
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
export default ({
name: "windshieldOptions",
data(){
return {
chipCountQuestionText: String,
chipCountAnswersFromCms: Array,
selectedWindshieldDamageType: null,
selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: [],
}
},
props: {
modelValue: Array,
@ -50,9 +38,6 @@ export default ({
initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms,
windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
@ -79,9 +64,7 @@ export default ({
return this.selectedValues.selectedWindshieldDamageType;
},
set: function(newValue) {
this.selectedValues.selectedWindshieldChipCount = null;
this.selectedValues.selectedWindshieldReplaceOptions = null;
this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
this.selectedValues = this.getWindshieldOptions(newValue, null, null);
}
},
selectedWindshieldChipCountValues: {
@ -89,8 +72,7 @@ export default ({
return this.selectedValues.selectedChipCount;
},
set: function(newValue) {
this.selectedValues.selectedWindshieldReplaceOptions = null;
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, null);
}
},
selectedWindshieldReplaceOptionsValues: {
@ -98,15 +80,13 @@ export default ({
return this.selectedValues.selectedWindshieldReplaceOptions;
},
set: function(newValue) {
this.selectedValues.selectedWindshieldChipCount = null;
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, null, newValue);
}
},
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some(selectedDamages =>
{
const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
});
},
isRepairOptionSelected(){

9
src/styles/common-animations.scss Normal file
View file

@ -0,0 +1,9 @@
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}

6
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -161,7 +161,7 @@ describe("list-button-horizontal.vue", () => {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
@ -172,7 +172,7 @@ describe("list-button-horizontal.vue", () => {
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@ -189,7 +189,7 @@ describe("list-button-horizontal.vue", () => {
isWide: false,
modelValue: ["List Card Checkbox"],
isMultiSelect: false,
selectedButtonIDs: ["Car-Front"]
selectedValues: ["Car-Front"]
},
});
// Assert

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

@ -9,7 +9,7 @@
:type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID"
:name="groupName"
:value="buttonID"
:value="value"
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@ -69,7 +69,7 @@ export default {
type: String,
default: "",
},
selectedButtonIDs: [Array, String],
selectedValues: [Array, String],
hasError: Boolean,
},
data() {
@ -79,8 +79,8 @@ export default {
};
},
created(){
if(this.selectedButtonIDs){
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
if(Array.isArray(this.selectedValues)){
this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
}
},
methods: {
@ -97,7 +97,7 @@ export default {
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
}
}
},
@ -133,7 +133,7 @@ export default {
height: 0;
&:focus-visible + label {
box-shadow: 0 0 0 2px $blue;
z-index: 3;
z-index: 2;
}
&:focus + label {
box-shadow: 0 0 0 2px $blue;
@ -159,7 +159,7 @@ export default {
&:hover {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 3 !important;
z-index: 4 !important;
}
+ p {
display: none;

6
src/ux-components/list-button/list-button.spec.js
View file

@ -159,7 +159,7 @@ describe("list-button.vue", () => {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
@ -170,7 +170,7 @@ describe("list-button.vue", () => {
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@ -186,7 +186,7 @@ describe("list-button.vue", () => {
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
selectedButtonIDs: ["Car-Front"]
selectedValues: ["Car-Front"]
},
});
// Assert

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

@ -9,7 +9,7 @@
:type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID"
:name="groupName"
:value="buttonID"
:value="value"
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@ -71,7 +71,7 @@ export default {
type: [String, Number],
default: "",
},
selectedButtonIDs: [Array, String],
selectedValues: [Array, String],
hasError: Boolean,
},
data() {
@ -81,8 +81,8 @@ export default {
};
},
created(){
if(this.selectedButtonIDs){
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
if(Array.isArray(this.selectedValues)){
this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
}
},
methods: {
@ -99,7 +99,7 @@ export default {
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
}
},
},

8
src/ux-components/list-card/list-card.spec.js
View file

@ -197,7 +197,7 @@ describe("list-card.vue", () => {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
@ -208,7 +208,7 @@ describe("list-card.vue", () => {
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@ -217,14 +217,14 @@ describe("list-card.vue", () => {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
selectedButtonIDs: ["Car-Front"]
selectedValues: ["Car-Front"]
},
});
// Assert

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

@ -1,22 +1,48 @@
<template>
<div :class="'col' + colLength">
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']">
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" @click="handleChange(value)" v-model="checkValue" @change="handleCheckChange()" />
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
<img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
<p v-if=!isWide class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
{{buttonLabel}}
</p>
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
{{buttonLabelSubCopy}}
</p>
<div v-if=isWide class="order-2">
<p class="m-0 small">{{ buttonLabel }}</p>
<p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
{{ buttonLabelSubCopy }}
</p>
</div>
</label>
<div :class="'col' + colLength">
<div
class="list-card w-100 rounded-3 d-flex align-items-center h-100"
:class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
>
<input
:type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID"
:name="groupName"
:value="value"
:aria-required="isRequired"
:data-focus-target="groupName"
@click="handleChange(value)"
v-model="checkValue"
@change="handleCheckChange()"
/>
<label
:for="buttonID"
class="d-flex w-100 align-items-center px-2 h-100"
:class="getLabelClasses" tabindex="-1"
>
<img
:id="buttonImageId"
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
:src="buttonImage"
:alt="altText"
/>
<p
v-if="!isWide"
class="small order-3"
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
>
{{buttonLabel}}
</p>
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
{{buttonLabelSubCopy}}
</p>
<div v-if="isWide" class="order-2">
<p class="m-0 small">{{ buttonLabel }}</p>
<p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
{{ buttonLabelSubCopy }}
</p>
</div>
</label>
</div>
</div>
</template>
@ -49,31 +75,40 @@ export default {
selectedButtonIDs: [Array, String],
hasError: Boolean,
},
data() {
return {
checkValue: Boolean,
colLength: String,
validationRules: String,
selectedValues: [Array, String],
hasError: Boolean,
},
data(){
return {
checkValue: Boolean,
}
},
created(){
if(Array.isArray(this.selectedValues)){
this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
}
},
computed: {
getLabelClasses() {
if (this.isWide) {
let classes = "flex-row py-r ps-3 pe-8";
if (this.buttonLabelSubCopy) {
classes += " checkboxTop";
}
},
created() {
if (this.selectedButtonIDs) {
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
}
},
computed: {
getLabelClasses() {
if (this.isWide) {
let classes = "flex-row py-r ps-3 pe-8";
if (this.buttonLabelSubCopy) {
classes += " checkboxTop";
}
return classes;
} else {
return "flex-column pt-4 pb-2";
}
},
},
methods: {
handleCheckChange() {
},
methods: {
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
}
}
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const emitEvent = {
isChecked: this.checkValue,

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

@ -47,40 +47,29 @@ export default {
checkValue: Boolean,
};
},
methods: {
handleCheckChanged(newValue, oldValue) {
const isInitialization = typeof oldValue === "function";
if (!isInitialization) {
this.$emit("isCheckedChanged", {
isChecked: newValue.target.checked,
buttonId: this.buttonID.toString(),
});
}
},
},
setup(props) {
const {
groupName,
value
} = toRefs(props);
const {
checked,
handleChange,
errorMessage
} = useField(
groupName,
undefined, {
type: "radio",
checkedValue: value,
}
);
return {
checked,
handleChange,
errorMessage,
};
},
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
}
}
},
setup(props) {
const { groupName, value } = toRefs(props);
const { checked, handleChange, errorMessage } = useField(
groupName,
undefined,
{
type: "radio",
checkedValue: value,
}
);
return {
checked,
handleChange,
errorMessage,
};
},
};
</script>
<style lang="scss" scoped>