Merge branch 'develop' into feature/CSR-296
This commit is contained in:
commit
e2bd611f03
10 changed files with 58 additions and 57 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.funnel-header {
|
||||
height: 56px;
|
||||
padding: 0.97rem 0;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question">
|
||||
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" aria-live="polite">
|
||||
<buttonQuestion
|
||||
isWide
|
||||
:questionText="questionText"
|
||||
|
|
@ -93,15 +93,3 @@ export default ({
|
|||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,8 @@ describe("replace-options-question.vue", () => {
|
|||
driverSideReplaceOptions = ["FrontDoor", "BackDoor"],
|
||||
passengerSideReplaceOptions = ["FrontDoor", "BackDoor"],
|
||||
driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
|
||||
passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"]
|
||||
passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
|
||||
selectedDamageLocations = ["SideDoor"]
|
||||
}) {
|
||||
|
||||
//Mock store
|
||||
|
|
@ -107,6 +108,7 @@ describe("replace-options-question.vue", () => {
|
|||
mountOptions.propsData = {
|
||||
modelValue: modelValueProp,
|
||||
groupName: groupName,
|
||||
selectedDamageLocations: selectedDamageLocations,
|
||||
};
|
||||
|
||||
const wrapper = shallowMount(sideDoorOptions, mountOptions);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<div class="side-door-options">
|
||||
<buttonQuestion
|
||||
:questionText="questionText"
|
||||
isMultiSelect
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
v-model="selectedDoorSidesValues"
|
||||
/>
|
||||
<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" />
|
||||
|
||||
|
|
@ -35,6 +39,7 @@ export default ({
|
|||
props: {
|
||||
groupName: String,
|
||||
modelValue: Array,
|
||||
selectedDamageLocations: Array,
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){
|
||||
|
|
|
|||
|
|
@ -8,17 +8,17 @@
|
|||
v-model="selectedDamageLocations"
|
||||
groupName="DamageLocationQuestion"
|
||||
/>
|
||||
<sideDoorOptions
|
||||
ref="sideDoorOptions"
|
||||
isAvailable
|
||||
groupName="SideDoorSideQuestion"
|
||||
v-model="sideDoorOptionsData"
|
||||
/>
|
||||
<windshieldOptions
|
||||
ref="windshieldOptions"
|
||||
v-model="selectedWindshieldOptions"
|
||||
:selectedDamageLocations="selectedDamageLocations"
|
||||
/>
|
||||
<sideDoorOptions
|
||||
ref="sideDoorOptions"
|
||||
groupName="SideDoorSideQuestion"
|
||||
v-model="sideDoorOptionsData"
|
||||
:selectedDamageLocations="selectedDamageLocations"
|
||||
/>
|
||||
<replaceOptionsQuestion
|
||||
ref="backGlassOptions"
|
||||
:isAvailable="isRearWindowDamageLocation"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
9
src/styles/common-animations.scss
Normal file
9
src/styles/common-animations.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
Loading…
Reference in a new issue