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

Merge branch 'develop' into feature/Digital/SSR-123

Browse source 
# Conflicts:
#	src/common-components/button-question/button-question.vue
This commit is contained in:
Jason Wheeler 2022-11-17 11:23:48 -05:00
commit 207cd61380
35 changed files with 4134 additions and 2195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

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

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

@ -0,0 +1,170 @@
<template>
<label
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId"
@focusin="handleFocus"
@focusout="handleBlur"
@mousedown.left="handleEventAction(eventTypes.CLICK, $event)">
<input
:type="inputType"
:id="buttonId"
:key="buttonId"
:name="groupName"
:class="inputClasses"
:aria-required="isRequired"
:value="value"
:checked="isChecked"
@keypress.space="handleEventAction(eventTypes.SPACE, $event)"
@keypress.enter="handleEventAction(eventTypes.ENTER, $event)"
@change="handleEventAction(eventTypes.CHANGE, $event)" />
<slot></slot>
</label>
</template>
<script>
import { useField } from "vee-validate";
import { toRef } from "vue";
import {
handleButtonComponentFocus,
handleInputComponentBlur,
} from "@/helpers/button-question-focus-helper";
import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
export default {
name: "base-input-button",
props: {
...inputButtonProps,
buttonWrapperClasses: [String, Array, Object],
inputClasses: [String, Array, Object],
},
data() {
return {
valueToEmit: null,
};
},
mounted() {
if (this.isChecked) {
this.handleChange(this.modelValue);
}
},
methods: {
handleEventAction(eventType, e) {
if (this.isMultiSelect) {
switch (eventType) {
case this.eventTypes.CHANGE:
this.handleClick(e);
break;
}
} else {
switch (eventType) {
case this.eventTypes.CLICK:
case this.eventTypes.ENTER:
case this.eventTypes.SPACE:
this.handleClick(e);
break;
case this.eventTypes.CHANGE:
this.selectingInitiatesLoad
? this.handleSelectionChange(e)
: this.handleClick(e);
break;
}
}
},
handleSelectionChange(e) {
if (
this.isMultiSelect &&
(this.modelValue instanceof Array || this.modelValue == null)
) {
let newValue = this.modelValue ? [...this.modelValue] : [];
if (!newValue.includes(this.value)) {
newValue.push(this.value);
} else {
newValue.splice(newValue.indexOf(this.value), 1);
}
this.valueToEmit = newValue;
} else if (!this.isMultiSelect) {
this.valueToEmit = this.value;
}
this.handleChange(this.valueToEmit);
},
handleClick(e) {
this.handleSelectionChange(e);
this.$emit("update:modelValue", this.valueToEmit);
},
handleFocus() {
handleButtonComponentFocus({
groupName: this.groupName,
});
},
handleBlur() {
handleInputComponentBlur({
groupName: this.groupName,
onButtonQuestionLostFocusCallback: this.handlePushClickEventToGACheck,
});
},
},
computed: {
isChecked() {
if (this.isMultiSelect && this.modelValue instanceof Array) {
return this.modelValue.includes(this.value);
} else if (!this.isMultiSelect) {
return this.modelValue == this.value;
} else {
return false;
}
},
inputType() {
return this.isMultiSelect ? "checkbox" : "radio";
},
buttonId() {
return `${this.groupName?.replace(" ", "-")}-${this.value
?.toString()
?.replace(" ", "-")}`;
},
isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad;
},
eventTypes() {
return {
CHANGE: "change",
ENTER: "enter",
SPACE: "space",
CLICK: "click",
};
},
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const fieldOptions = {
type: inputType,
validateOnValueUpdate: false,
validateOnMount: false,
};
const { handleChange, meta, errors } = useField(
toRef(props, "groupName"),
toRef(props, "validationRules"),
fieldOptions
);
return {
handleChange,
errors,
meta,
fieldOptions, // only need to expose this for unit test purposes
};
},
};
</script>
<style lang="scss" scoped>
input {
opacity: 0;
height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
width: 0;
}
</style>

30
src/common-components/base-input-button/button-functionality-props.js Normal file
View file

@ -0,0 +1,30 @@
export const inputButtonProps = {
value: {
type: [String, Number],
required: true,
},
modelValue: {
type: [Array, String, Number],
required: true,
},
isMultiSelect: Boolean,
groupName: {
type: String,
required: true,
},
validationRules: {
type: String,
default: "",
},
valueToLogType: String,
isRequired: {
type: Boolean,
default: true,
},
lastValuePushedToGa: [String, Number],
setLastValuePushedToGa: Function,
selectingInitiatesLoad: {
type: Boolean,
default: false,
},
};

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

File diff suppressed because it is too large Load diff

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

@ -1,101 +1,135 @@
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
<template>
<div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
<div
:class="
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
">
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
<span class="fw-bold w-100">{{ questionText }}</span>
<span class="fw-bold w-100">{{ questionText }}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="formatString(groupName)">
<legend class="sr-only" :data-focus-target="formatString(groupName)" :id="formatString(groupName)" tabindex="-1">
{{ questionText }}
{{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
</legend>
<div :class="getComponentLoopWrapperClasses">
<div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
<component
:is="buttonType"
@isCheckedChanged="handleCheckedChanged"
:buttonID="answer.Name ? formatString(groupName) + '-' + answer.Name : formatString(groupName) + '-' + getAnswerString(answer, 'Text')"
:value="getValue(answer)"
:buttonLabel="answer.Text ? answer.Text : getAnswerString(answer, 'Name')"
:buttonLabelSubCopy="answer.SubText"
:textPosition="textPosition"
:isMultiSelect="isMultiSelect"
:groupName="formatString(groupName)"
:selectingInitiatesLoad="selectingInitiatesLoad"
:loaderColor="loaderColor"
:loaderPosition="loaderPosition"
:isWide=isWide
:isCashOrInsurance=isCashOrInsurance
:isRequired=isRequired
:buttonImage="answer.AnswerImageUrl"
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="getColLength"
:selectedValues="selectedValues"
data-test="button"
:validationRules="validationRules"
:class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
:valueToLogType="valueToLogType"
/>
<!-- For nested questions -->
<transition name="fade" mode="out-in">
<div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
<slot></slot>
</div>
</transition>
</div>
</div>
</fieldset>
<fieldset
class="w-100"
:aria-required="isRequired"
:class="getFieldSetClasses"
:role="isMultiSelect ? 'group' : 'radiogroup'"
:aria-labelledby="formatString(groupName)">
<legend
class="sr-only"
:data-focus-target="formatString(groupName)"
tabindex="-1"
:id="formatString(groupName)">
{{ questionText }}
{{
isMultiSelect && answers && answers.length > 1
? "Select one or more options below."
: "Select an option below."
}}
</legend>
<div :class="getComponentLoopWrapperClasses">
<div
:class="getComponentWrapperClasses"
v-for="answer in buttonsInfo"
:key="answer.value ? answer.value : answer">
<component
:is="buttonTypeString"
:buttonLabel="answer.buttonLabel"
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
:buttonBodyCopy="answer.buttonBodyCopy"
:buttonAuxillaryCopy="answer.buttonAuxillaryCopy"
:buttonFooterCopy="answer.buttonFooterCopy"
:buttonImage="answer.buttonImage"
:buttonImageId="answer.buttonImageId"
:groupName="answer.groupName"
:isMultiSelect="isMultiSelect"
:value="answer.value"
:selectingInitiatesLoad="selectingInitiatesLoad"
:isWide="isWide"
:validationRules="validationRules"
:textPosition="textPosition"
:additionalButtonStyling="additionalButtonStyling"
:lastValuePushedToGa="lastValuePushedToGa"
:setLastValuePushedToGa="setLastValuePushedToGa"
v-model="selectedValues" />
<!-- For nested questions -->
<transition name="fade" mode="out-in">
<div
v-if="
typeof selectedValues == 'string' &&
selectedValues == answer.value
">
<slot></slot>
</div>
</transition>
</div>
</div>
</fieldset>
</div>
<div class="row form-test-error mt-1">
<error-message :name="formatString(groupName)" v-if="!suppressError"></error-message>
</div>
</div>
</template>
<script>
import listButton from "@/ux-components/list-button/list-button";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import listCard from "@/ux-components/list-card/list-card";
import { ErrorMessage } from 'vee-validate';
import radio from "@/ux-components/radio/radio";
export default {
name: "buttonQuestion",
props: {
buttonType: {
type: String,
default: "listButton",
</div>
</template>
<script>
import listButton from "@/ux-components/list-button/list-button";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import listCard from "@/ux-components/list-card/list-card";
import radio from "@/ux-components/radio/radio";
import { ErrorMessage } from "vee-validate";
export default {
name: "buttonQuestion",
props: {
buttonTypeString: {
type: String,
default: "listButton",
},
buttonTypeObject: {
type: Object,
default: null,
},
isMultiSelect: Boolean,
groupName: String,
questionText: String,
answers: Array,
textPosition: {
type: String,
default: "text-center",
type: String,
default: "text-center",
},
selectingInitiatesLoad: Boolean,
loaderColor: {
type: String,
default: "blue",
type: String,
default: "blue",
},
loaderPosition: {
type: String,
default: "right",
type: String,
default: "right",
},
isRequired: Boolean,
isOverflowScrollable: Boolean,
isWide: Boolean,
isCashOrInsurance: Boolean,
modelValue: [Array, String],
modelValue: [Array, Number, String],
value: [Number, String],
validationRules: String,
suppressError: Boolean,
useTextForValue: Boolean,
valueToLogType: String,
},
computed: {
additionalButtonStyling: String,
},
beforeMount() {
if (this.buttonTypeObject) {
this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
}
},
data() {
return {
lastValuePushedToGa: null,
};
},
computed: {
getFieldSetClasses() {
if (this.isOverflowScrollable) {
return "container-fluid overflow-scroll position-absolute px-5 pb-2";
@ -108,146 +142,132 @@
}
},
getComponentLoopWrapperClasses() {
let classes;
switch (this.buttonType) {
case "listButton":
classes = "w-100";
break;
case "listButtonHorizontal":
classes = "d-flex flex-row p-0";
break;
case 'listCard':
classes = "row g-2 justify-content-center";
break;
case 'radio':
classes = 'ui-radio d-flex'
break;
}
return classes;
let classes;
switch (this.buttonTypeString) {
case "listButton":
classes = "w-100";
break;
case "listButtonHorizontal":
classes = "d-flex flex-row p-0";
break;
case "listCard":
classes = "row g-2 justify-content-center";
if (this.isWide) {
classes += " flex-column";
}
break;
case "radio":
classes = "ui-radio d-flex";
break;
case "servicePackageRadio":
classes = "package-main";
break;
}
return classes;
},
getComponentWrapperClasses() {
let classes = "";
classes += this.isWide ? "col-12" : "col";
if (this.buttonType == "radio") {
classes += " radio-button-container";
}
return classes;
let classes = "";
classes += this.isWide ? "col-12" : "col";
if (this.buttonTypeString == "radio") {
classes += " radio-button-container";
} else if (this.buttonTypeString == "servicePackageRadio") {
classes = "package-wrapper";
}
return classes;
},
getColLength(){
if(this.isWide) {
return "12"
} else {
return "";
}
buttonsInfo() {
return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
altText: answer.altText ?? (answer.Name ? answer.Name : answer),
buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy,
buttonAuxillaryCopy: answer.buttonAuxillaryCopy ?? answer.buttonAuxillaryCopy,
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
buttonImageId: answer.buttonImageId ?? answer.ImageId,
groupName: this.formatString(this.groupName),
value:
answer.value ??
(this.useTextForValue && answer.Text ? answer.Text : answer.Name) ??
(typeof answer !== "object" ? answer : null),
}));
},
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
get() {
return this.modelValue;
},
set(selectedAnswers) {
this.$emit("update:modelValue", selectedAnswers);
},
},
},
methods: {
},
methods: {
formatString(str) {
return str.replace(" ", "-");
return str?.replaceAll(" ", "-");
},
getValue(answer){
if (this.useTextForValue) { return answer.Text }
return answer.Name ? answer.Name : answer;
setLastValuePushedToGa(lastValuePushedToGa) {
this.lastValuePushedToGa = lastValuePushedToGa;
},
getAnswerString(answer, prop = "Name") {
switch (typeof answer) {
case "string":
case "number":
case "boolean":
return this.formatString(answer.toString());
default:
return answer[prop] ? this.formatString(answer[prop]) : this.formatString(answer.toString());
}
},
handleCheckedChanged(val) {
if(this.selectingInitiatesLoad) {
this.selectedValues = val.value;
} else {
if(this.isMultiSelect) {
const newSelectedValues = this.selectedValues;
val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
this.selectedValues = newSelectedValues;
}
else if (Array.isArray(this.selectedValues)) {
this.selectedValues[0] = val.value;
const temp = this.selectedValues;
this.selectedValues = temp;
}
else {
this.selectedValues = val.value;
}
}
this.$emit("isCheckedChanged", val);
},
},
components: {
},
components: {
listButton,
listButtonHorizontal,
listCard,
ErrorMessage,
radio,
},
};
</script>
<style lang="scss">
.button-question-overflow {
height: calc(100vh - 274px);
.overflow-scroll {
},
};
</script>
<style lang="scss">
.button-question-overflow {
height: calc(100vh - 274px);
.overflow-scroll {
// Height will be determined by overall height of content above list
height: calc(100% - 314px);
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}
}
.button-question {
color: $black;
.radio-button-container {
}
.button-question {
color: $black;
.radio-button-container {
&:not(:last-child) {
padding-bottom: map-get($spacers, 2);
padding-bottom: map-get($spacers, 2);
}
}
}
.question-text {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.625rem;
& > span {
text-align: center;
}
}
.vehicle-parts {
.question-text {
span {
font-size: 0.875rem;
text-align: left;
margin: 0 0 0.5rem 0;
}
}
}
.question-text {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.5rem;
& > span {
text-align: center;
}
}
.vehicle-parts {
.question-text {
span {
font-size: .875rem;
text-align: left;
margin: 0 0 .5rem 0;
}
}
.question-text {
margin: 0;
}
fieldset {
.ui-radio {
margin: 0;
}
}
}
</style>
fieldset {
.ui-radio {
margin: 0;
}
}
}
</style>

2
src/common-components/site-footer/site-footer.vue
View file

@ -33,7 +33,7 @@ import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main";
export default {
name: "funnelFooter",
name: "siteFooter",
props: {
isForwardActionDisabled: Boolean,
isBackButtonHidden: { type: Boolean, default: false },

9
src/constants/damage-locations-cms.js Normal file
View file

@ -0,0 +1,9 @@
const damageLocationsCms = {
WINDSHIELD: "WINDSHIELD",
SIDEDOOR: "SIDEDOOR",
REARWINDOW: "REARWINDOW",
DRIVERSIDE: "DRIVERSIDE",
PASSENGERSIDE: "PASSENGERSIDE",
};
export { damageLocationsCms };

21
src/constants/damage-locations-selected.js Normal file
View file

@ -0,0 +1,21 @@
const damageLocationsSelected = {
WINDSHIELD: "Windshield",
SIDEDOOR: "SideDoor",
REARWINDOW: "RearWindow",
REPAIR: "Repair",
REPLACE: "Replace",
DRIVER: "Driver",
PASSENGER: "Passenger",
FRONT: "Front",
REAR: "Rear",
BACK: "Back",
QUARTER: "Quarter",
VENT: "Vent",
SINGLE: "Single",
DRIVERSIDE: "DriverSide",
PASSENGERSIDE: "PassengerSide",
STATIONARY: "Stationary",
SLIDER: "Slider",
};
export { damageLocationsSelected };

4
src/constants/endpoints.js
View file

@ -27,6 +27,10 @@ const endpoints = {
url: "/vehicle/api/v1/vehicle/styles",
method: "GET",
},
GetDamageOptions: {
url: "/parts/api/v1/parts/damage-options",
method: "GET",
},
GetVehicle: {
url: "/vehicle/api/v1/vehicle/lookup",
method: "GET",

1
src/global-methods.js
View file

@ -33,7 +33,6 @@ export default {
true
);
}
return resolve(response);
},
error => {

38
src/helpers/button-question-focus-helper.js Normal file
View file

@ -0,0 +1,38 @@
/**
* Helper for GA click event. When the user mouse clicks on a `base-input-button`, we
* push the click event. When the user tabs through a list of radio buttons via a
* keyboard, we only want to push the GA click event if the selection was deliberate
* (space/enter key) or if there is a selection and the user tabs off of the radio group.
*/
let lastFocusedInputGroupName = "";
let onButtonQuestionLostFocusCallback = null;
const handleAnyComponentFocus = (e) => {
const targetType = e.target.type;
if (targetType !== "radio" && targetType !== "checkbox") {
invokeButtonQuestionLostFocusCallback();
}
};
const handleButtonComponentFocus = (e) => {
if (e && lastFocusedInputGroupName !== e.groupName) {
invokeButtonQuestionLostFocusCallback();
}
};
const handleInputComponentBlur = (e) => {
if (e) {
lastFocusedInputGroupName = e.groupName;
onButtonQuestionLostFocusCallback = e.onButtonQuestionLostFocusCallback;
}
};
const invokeButtonQuestionLostFocusCallback = () => {
if (onButtonQuestionLostFocusCallback) {
onButtonQuestionLostFocusCallback();
}
};
export { handleAnyComponentFocus, handleButtonComponentFocus, handleInputComponentBlur };

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

@ -0,0 +1,86 @@
<template>
<div class="damage-location-question">
<buttonQuestion
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"
:groupName="groupName"
buttonTypeString="listCard"
isRequired
v-model="selectedValues"
validationRules="damage-location-required" />
</div>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
// DEFINE VALIDATION RULES
defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));
export default {
name: "damageLocationQuestion",
data() {
return {
damageOptions: Object,
};
},
props: {
modelValue: Array,
groupName: String,
cmsWidgetName: String,
},
methods: {
initializeComponent(damageOptions) {
this.damageOptions = damageOptions;
},
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
selectedValues: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
damageOptionsMap() {
return {
Windshield: true,
SideDoor:
this.damageOptions.driverSideOptions.availableReplacementOptions.length ||
this.damageOptions.passengerSideOptions.availableReplacementOptions.length,
RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions.length,
};
},
answersToDisplay() {
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter((ans) => {
const name = ans.Name.split("-");
return (
name[0].toUpperCase() === this.mainStore.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: {
buttonQuestion,
},
};
</script>

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

@ -0,0 +1,108 @@
<template>
<transition name="fade" mode="out-in">
<div
v-if="shouldDisplayReplaceOptionsQuestion"
class="replace-options-question"
:class="this.answersToDisplay.length < 2 ? 'd-none' : ''"
aria-live="polite">
<buttonQuestion
isWide
:questionText="questionText"
:isMultiSelect="isMultiSelect"
:answers="answersToDisplay"
:groupName="groupName"
buttonTypeString="listCard"
v-model="selectedValues"
:validationRules="validationRules"
:suppressError="suppressError"
:isRequired="isRequired" />
</div>
</transition>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default {
name: "replaceOptionsQuestion",
data() {
return {
replaceOptions: this.isMultiSelect ? [] : "",
};
},
props: {
isAvailable: Boolean,
filterByVehicleCategory: Boolean,
groupName: String,
modelValue: [Array, String, Number],
isMultiSelect: Boolean,
validationRules: String,
suppressError: Boolean,
cmsWidgetName: String,
isRequired: Boolean,
},
methods: {
initializeComponent(replaceOptions) {
this.replaceOptions = replaceOptions;
},
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
this.selectedValues = this.isMultiSelect
? [this.answersToDisplay[0].Name]
: this.answersToDisplay[0].Name;
}
},
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
selectedValues: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
answersToDisplay() {
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter((ans) => {
const name = ans.Name.split("-");
return this.filterByVehicleCategory
? name[0].toUpperCase() === this.mainStore.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;
});
},
shouldDisplayReplaceOptionsQuestion() {
return this.isAvailable && this.answersToDisplay.length > 0;
},
},
watch: {
isAvailable(val) {
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
val && this.updateSelectedValues();
},
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
if (!shouldDisplayReplaceOptionsQuestion) {
this.selectedValues = this.isMultiSelect ? [] : "";
}
},
},
components: {
buttonQuestion,
},
};
</script>

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

@ -0,0 +1,167 @@
<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"
buttonTypeString="listCard"
v-model="selectedDoorSidesValues"
validationRules="damage-side-required"
isRequired />
</div>
</transition>
<replaceOptionsQuestion
ref="driverSideOptions"
cmsWidgetName="DriverSideReplaceOptionsQuestion"
:isAvailable="isDriverSideReplaceOptionsQuestionAvailable"
groupName="driverSideOptions"
isMultiSelect
filterByVehicleCategory
v-model="selectedDriverSideReplaceOptionsValues"
validationRules="driver-side-options-required"
isRequired />
<replaceOptionsQuestion
ref="passengerSideOptions"
cmsWidgetName="PassengerSideReplaceOptionsQuestion"
:isAvailable="isPassengerSideReplaceOptionsQuestionAvailable"
groupName="passengerSideOptions"
isMultiSelect
filterByVehicleCategory
v-model="selectedPassengerSideReplaceOptionsValues"
validationRules="passenger-side-options-required"
isRequired />
</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 { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { damageLocationsSelected } from "@/constants/damage-locations-selected";
// DEFINE VALIDATION RULES
defineRule("damage-side-required", required(errorMessages.DAMAGE_SIDE_REQUIRED));
defineRule("driver-side-options-required", required(errorMessages.DRIVER_SIDE_OPTIONS_REQUIRED));
defineRule("passenger-side-options-required",required(errorMessages.PASSENGER_SIDE_OPTIONS_REQUIRED));
export default {
name: "sideDoorOptions",
props: {
groupName: String,
modelValue: Object,
selectedDamageLocations: Array,
cmsWidgetName: String,
},
methods: {
initializeComponent(driverSideOptions, passengerSideOptions) {
this.$refs.driverSideOptions.initializeComponent(driverSideOptions);
this.$refs.passengerSideOptions.initializeComponent(passengerSideOptions);
},
getSideDoorReplacementOptions(
selectedDoorSides,
selectedDriverSideReplaceOptions,
selectedPassengerSideReplaceOptions
) {
return {
selectedDoorSides: selectedDoorSides,
selectedDriverSideReplaceOptions: selectedDriverSideReplaceOptions,
selectedPassengerSideReplaceOptions: selectedPassengerSideReplaceOptions,
};
},
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
selectedValues: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
selectedDoorSidesValues: {
get: function () {
return this.selectedValues.selectedDoorSides;
},
set: function (newValue) {
this.selectedValues = this.getSideDoorReplacementOptions(
newValue,
this.selectedValues.selectedDriverSideReplaceOptions,
this.selectedValues.selectedPassengerSideReplaceOptions
);
},
},
selectedDriverSideReplaceOptionsValues: {
get: function () {
return this.selectedValues.selectedDriverSideReplaceOptions;
},
set: function (newValue) {
this.selectedValues = this.getSideDoorReplacementOptions(
this.selectedValues.selectedDoorSides,
newValue,
this.selectedValues.selectedPassengerSideReplaceOptions
);
},
},
selectedPassengerSideReplaceOptionsValues: {
get: function () {
return this.selectedValues.selectedPassengerSideReplaceOptions;
},
set: function (newValue) {
this.selectedValues = this.getSideDoorReplacementOptions(
this.selectedValues.selectedDoorSides,
this.selectedValues.selectedDriverSideReplaceOptions,
newValue
);
},
},
answersToDisplay() {
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter((ans) => {
const name = ans.Name.split("-");
return name[0].toUpperCase() === this.mainStore.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(damageLocationsSelected.DRIVERSIDE) &&
Array.isArray(this.selectedDamageLocations) &&
this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)
);
},
isPassengerSideReplaceOptionsQuestionAvailable() {
return (
Array.isArray(this.selectedDoorSidesValues) &&
this.selectedDoorSidesValues.includes(damageLocationsSelected.PASSENGERSIDE) &&
Array.isArray(this.selectedDamageLocations) &&
this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)
);
},
},
components: {
buttonQuestion,
replaceOptionsQuestion,
},
};
</script>

464
src/layouts/vehicle-damage/vehicle-damage.vue Normal file
View file

@ -0,0 +1,464 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<alert
ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
<damageLocationQuestion
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion" />
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" />
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
<sideDoorOptions
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations" />
<replaceOptionsQuestion
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
<site-footer
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</Form>
</template>
<script>
// Components
import siteHeader from "@/common-components/site-header/site-header";
import siteFooter from "@/common-components/site-footer/site-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
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";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import alert from "@/ux-components/alert/alert";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
import { useMainStore } from '@/store';
// DEFINE VALIDATION RULES
defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
export default {
name: "vehicle-damage",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const damageOptionsPromise = useMainStore().getDamageOptions(useMainStore().order.vehicle.carId);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "damageOptions",
promise: damageOptionsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
vm.$refs.sideDoorOptions.initializeComponent(
resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.damageOptions.windshieldOptions.availableReplacementOptions
);
vm.$refs.backGlassOptions.initializeComponent(
resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
});
},
data() {
return {
selectedDamageLocations: this.getDamageLocationsFromStore(),
sideDoorOptionsData: {
selectedDoorSides: this.getDoorSidesFromStore(),
selectedDriverSideReplaceOptions: this.getDriverSideReplaceOptionsFromStore(),
selectedPassengerSideReplaceOptions: this.getPassengerSideReplaceOptionsFromStore(),
},
selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
};
},
methods: {
arePagePrerequisitesValid() {
if (this.mainStore.order.vehicle.carId) {
return true;
}
return false;
},
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
getDamageLocationsFromStore() {
var glassSelections = [];
if (
useMainStore().order.damage.glassToReplace?.some((glass) => {
return glass.glassLocation === damageLocationsSelected.WINDSHIELD;
}) ||
useMainStore().order.damage.isRepair
) {
glassSelections.push(damageLocationsSelected.WINDSHIELD);
}
if (
useMainStore().order.damage.glassToReplace?.some((glass) => {
return (
glass.glassLocation === damageLocationsSelected.DRIVER ||
glass.glassLocation === damageLocationsSelected.PASSENGER
);
})
) {
glassSelections.push(damageLocationsSelected.SIDEDOOR);
}
if (
useMainStore().order.damage.glassToReplace?.some((glass) => {
return glass.glassLocation === damageLocationsSelected.REAR;
})
) {
glassSelections.push(damageLocationsSelected.REARWINDOW);
}
return glassSelections;
},
getWindshieldOptionsFromStore() {
var windShieldOptions = {
selectedWindshieldDamageType: "",
selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: [],
};
if (useMainStore().order.damage.isRepair === undefined) return windshieldOptions;
if (useMainStore().order.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount = useMainStore().order.damage.numberOfChips;
} else {
if (
useMainStore().order.damage.glassToReplace?.some((glass) => {
return (
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.SINGLE
);
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
}
if (
useMainStore().order.damage.glassToReplace?.some((glass) => {
return (
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.DRIVER
);
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.DRIVER
);
}
if (
useMainStore().order.damage.glassToReplace?.some((glass) => {
return (
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.PASSENGER
);
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.PASSENGER
);
}
}
return windShieldOptions;
},
getDoorSidesFromStore() {
var doorSides = [];
if (
useMainStore().order.damage.glassToReplace?.some((glass) => {
return glass.glassLocation === damageLocationsSelected.DRIVER;
})
) {
doorSides.push(damageLocationsSelected.DRIVERSIDE);
}
if (
useMainStore().order.damage.glassToReplace?.some((glass) => {
return glass.glassLocation === damageLocationsSelected.PASSENGER;
})
) {
doorSides.push(damageLocationsSelected.PASSENGERSIDE);
}
return doorSides;
},
getDriverSideReplaceOptionsFromStore() {
var driverSideReplaceOptions = [];
useMainStore().order.damage.glassToReplace?.forEach((glass) => {
if (glass.glassLocation === damageLocationsSelected.DRIVER) {
driverSideReplaceOptions.push(glass.glassName);
}
});
return driverSideReplaceOptions;
},
getPassengerSideReplaceOptionsFromStore() {
var passengerSideReplaceOptions = [];
useMainStore().order.damage.glassToReplace?.forEach((glass) => {
if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
passengerSideReplaceOptions.push(glass.glassName);
}
});
return passengerSideReplaceOptions;
},
getRearReplaceOptionsFromStore() {
var rearReplaceOptions = useMainStore().order.damage.glassToReplace?.filter(
(glass) => glass.glassLocation === damageLocationsSelected.REAR
)[0]?.glassName;
return rearReplaceOptions;
},
async forwardButtonAction() {
await this.dispatchStoreAction(
this.storeActions.SAVE_VEHICLE_DAMAGE,
{
isWindshieldRepair: this.isWindshieldRepair,
selectedGlassToReplace: this.selectedGlassToReplace(),
selectedWindshieldChipCount:
this.selectedWindshieldOptions.selectedWindshieldChipCount,
},
false
);
return this.navigateForward();
},
navigateForward() {
// If vin already exists, navigate directly to vin-lookup
if (useMainStore().order.vehicle.vin) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
this.$route
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
this.$route
);
}
},
selectedGlassToReplace() {
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
(wsItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem,
});
}
);
}
if (this.isDriverSideReplace) {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem,
});
});
}
if (this.isPassengerSideReplace) {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
(passengerItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem,
});
}
);
}
if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions,
});
}
return selectedGlassToReplace;
},
},
computed: {
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
});
},
isSideDoorDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
});
},
isRearWindowDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
});
},
isWindshieldRepair() {
return (
this.isWindshieldDamageLocation &&
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR
);
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
});
},
isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
});
},
hasRepairReplaceConflict() {
return (
this.isWindshieldDamageLocation &&
this.selectedDamageLocations.length > 1 &&
this.isWindshieldRepair
);
},
hasSplitSingleConflict() {
if (
!this.selectedDamageLocations?.includes("Windshield") ||
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR ||
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
)
return false;
return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedSingleWindshield) => {
return (
selectedSingleWindshield.toUpperCase() ===
damageLocationsSelected.SINGLE.toUpperCase()
);
}
) &&
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedDriverWindshield) => {
return (
selectedDriverWindshield.toUpperCase() ===
damageLocationsSelected.DRIVER.toUpperCase()
);
}
) ||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedPassengerWindshield) => {
return (
selectedPassengerWindshield.toUpperCase() ===
damageLocationsSelected.PASSENGER.toUpperCase()
);
}
))
);
},
shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
}
},
components: {
siteHeader,
siteFooter,
vehicleBanner,
siteSubHeader,
sideDoorOptions,
damageLocationQuestion,
windshieldOptions,
replaceOptionsQuestion,
Form,
alert,
},
};
</script>

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

@ -0,0 +1,50 @@
<template>
<transition name="fade" mode="out-in">
<div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
buttonTypeString="listButtonHorizontal"
useTextForValue
v-model="selectedValue"
:validationRules="validationRules"
isRequired />
</div>
</transition>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default {
name: "windshieldOptions",
props: {
modelValue: [String, Number],
groupName: String,
isAvailable: Boolean,
validationRules: String,
cmsWidgetName: String,
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
selectedValue: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
const numberValue = Number(newValue);
this.$emit("update:modelValue", numberValue);
},
},
},
components: {
buttonQuestion,
},
};
</script>

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

@ -0,0 +1,50 @@
<template>
<transition name="fade" mode="out-in">
<div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
buttonTypeString="listCard"
v-model="selectedValues"
:suppressError="suppressError"
:validationRules="validationRules"
isRequired />
</div>
</transition>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default {
name: "windshieldDamageTypeQuestion",
props: {
modelValue: String,
groupName: String,
isAvailable: Boolean,
suppressError: Boolean,
validationRules: String,
cmsWidgetName: String,
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
selectedValues: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
},
components: {
buttonQuestion,
},
};
</script>

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

@ -0,0 +1,238 @@
<template>
<div class="windshield-options">
<windshieldDamageTypeQuestion
cmsWidgetName="WindshieldDamageTypeQuestion"
:isAvailable="isWindshieldDamageLocation"
:suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValue"
:validationRules="windshieldDamageTypeQuestionValidationRules" />
<alert
v-if="showNoReplacementAvailableError"
class="my-3"
cmsWidgetName="NoReplacementAvailableError"
alertClass="alert-danger"
:isDismissible="false" />
<windshieldChipCountQuestion
cmsWidgetName="WindshieldChipCountQuestion"
:isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
validationRules="windshield-chip-count-required" />
<replaceOptionsQuestion
ref="replaceOptionsQuestion"
cmsWidgetName="WindshieldReplaceOptionsQuestion"
:isAvailable="isReplaceOptionSelected"
isMultiSelect
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
validationRules="windshield-replace-options-required|prevent-split-and-single-together"
:suppressError="hasSplitSingleConflict"
isRequired />
<alert
v-if="hasSplitSingleConflict"
class="mt-5"
cmsWidgetName="SplitSingleConflict"
alertClass="alert-danger"
:isDismissible="false" />
</div>
</template>
<script>
import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import alert from "@/ux-components/alert/alert";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
// DEFINE VALIDATION RULES
defineRule(
"windshield-damage-type-required",
required(errorMessages.WINDSHIELD_DAMAGE_TYPE_REQUIRED)
);
defineRule(
"windshield-chip-count-required",
required(errorMessages.WINDSHIELD_CHIP_COUNT_REQUIRED)
);
defineRule(
"windshield-replace-options-required",
required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED)
);
defineRule(
"check-for-repair-and-replace",
(selectedWindshieldDamageType, selectedDamageLocations) => {
return (
selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR ||
(!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) &&
!selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) ||
selectedDamageLocations[0].length === 1
);
}
);
defineRule("repair-only", (value) => {
return value.toString() === damageLocationsSelected.REPAIR;
});
defineRule("prevent-split-and-single-together", (value) => {
if (
value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) &&
(value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) ||
value
.toString()
.toUpperCase()
.includes(damageLocationsSelected.PASSENGER.toUpperCase()))
) {
return false;
}
return true;
});
export default {
name: "windshieldOptions",
data() {
return {
windshieldAvailableReplacementOptions: Object,
};
},
props: {
modelValue: Object,
selectedDamageLocations: Array,
hasRepairReplaceConflict: Boolean,
hasSplitSingleConflict: Boolean,
},
methods: {
initializeComponent(windshieldAvailableReplacementOptions) {
this.windshieldAvailableReplacementOptions = windshieldAvailableReplacementOptions;
this.$refs.replaceOptionsQuestion.initializeComponent(
windshieldAvailableReplacementOptions
);
},
getWindshieldOptions(
selectedWindshieldDamageType,
selectedWindshieldChipCount,
selectedWindshieldReplaceOptions
) {
// ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL)
return {
selectedWindshieldDamageType: selectedWindshieldDamageType
? selectedWindshieldDamageType
: this.selectedValues.selectedWindshieldDamageType,
selectedWindshieldChipCount: selectedWindshieldChipCount
? selectedWindshieldChipCount
: this.selectedValues.selectedWindshieldChipCount,
selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions
? selectedWindshieldReplaceOptions
: this.selectedValues.selectedWindshieldReplaceOptions,
};
},
},
computed: {
selectedValues: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
selectedWindshieldDamageTypeValue: {
get: function () {
return this.selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD)
? this.selectedValues.selectedWindshieldDamageType
: null;
},
set: function (newValue) {
this.selectedValues = this.getWindshieldOptions(newValue, null, null);
},
},
selectedWindshieldChipCountValues: {
get: function () {
return this.selectedValues.selectedWindshieldChipCount;
},
set: function (newValue) {
this.selectedValues = this.getWindshieldOptions(
this.selectedWindshieldDamageTypeValue,
newValue,
null
);
},
},
selectedWindshieldReplaceOptionsValues: {
get: function () {
return this.selectedValues.selectedWindshieldReplaceOptions;
},
set: function (newValue) {
this.selectedValues = this.getWindshieldOptions(
this.selectedWindshieldDamageTypeValue,
null,
newValue
);
},
},
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some(
(selectedDamageLocation) =>
selectedDamageLocation === damageLocationsSelected.WINDSHIELD
);
},
isRepairOptionSelected() {
if (!this.selectedWindshieldDamageTypeValue) return false;
return (
this.selectedWindshieldDamageTypeValue === damageLocationsSelected.REPAIR &&
this.isWindshieldDamageLocation
);
},
isReplaceOptionSelected() {
if (!this.selectedWindshieldDamageTypeValue) return false;
return (
this.selectedWindshieldDamageTypeValue === damageLocationsSelected.REPLACE &&
this.isWindshieldDamageLocation
);
},
isWindshieldReplaceAvailable() {
return !(
Array.isArray(this.windshieldAvailableReplacementOptions) &&
this.windshieldAvailableReplacementOptions.length < 1
);
},
isSplitWindshieldOption() {
const options = this.windshieldAvailableReplacementOptions.toString().toUpperCase();
if (options.includes("DRIVER") && options.includes("PASSENGER")) {
return true;
}
return false;
},
showNoReplacementAvailableError() {
if (this.isReplaceOptionSelected && !this.isWindshieldReplaceAvailable) {
return true;
}
return false;
},
windshieldDamageTypeQuestionValidationRules() {
// Note: the validation rules string is not dynamic (it cannot be changed once component has been created)
let validationRules =
"windshield-damage-type-required|check-for-repair-and-replace:@DamageLocationQuestion";
// if vehicle has no windshield replacement option
if (!this.isWindshieldReplaceAvailable) {
validationRules = validationRules.concat("|repair-only");
}
return validationRules;
},
},
components: {
windshieldDamageTypeQuestion,
windshieldChipCountQuestion,
replaceOptionsQuestion,
alert,
},
};
</script>

8
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -7,6 +7,7 @@
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true"
:backButtonAccessibleText="backButtonAccessibleText"
@click-event="backButtonAction" />
<div class="fade-on-route-transition">
<styleQuestion
@ -92,5 +93,12 @@ export default {
siteSubHeader,
vehicleBanner,
},
computed: {
backButtonAccessibleText()
{
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
}
}
};
</script>

4
src/mixins/base-mixin.js
View file

@ -5,6 +5,7 @@ import { navigationScenarios } from "@/router/router-constants/navigation-scenar
import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { routerParams } from "@/router/router-constants/router-params";
export default {
data() {
@ -43,5 +44,8 @@ export default {
cssClassNameForCmsWidget(){
return "widget-name-" + this.cmsWidgetName;
},
routerParams() {
return routerParams;
},
},
};

40
src/mixins/input-button-wrapper-mixin.js Normal file
View file

@ -0,0 +1,40 @@
import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
export default {
model: {
prop: "modelValue",
event: "change",
},
props: {
...inputButtonProps,
buttonLabel: [Number, String],
buttonLabelSubCopy: String,
buttonBodyCopy: String,
buttonAuxillaryCopy: String,
buttonFooterCopy: String,
buttonImage: String,
buttonImageId: String,
altText: {
type: String,
default: "",
},
textPosition: String,
screenReaderOnlyText: String,
isWide: Boolean,
additionalButtonStyling: String,
},
computed: {
selectedValue: {
get() {
return this.modelValue;
},
set(e) {
if (this.preHandleAnswerChange) {
this.preHandleAnswerChange(e);
}
this.$emit("update:modelValue", e);
},
},
},
};

19
src/router/router-constants/routing-table.js
View file

@ -52,10 +52,27 @@ const routingTable = function(store) {
},
{
scenario: navigationScenarios.SELECTED_STYLE,
destinationIssPageValue: issPageValues.WELCOME_PAGE,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE,
}
]
},
{
issPageValue: issPageValues.VEHICLE_DAMAGE,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.VEHICLE_STYLE,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN,
destinationIssPageValue: issPageValues.WELCOME_PAGE,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
destinationIssPageValue: issPageValues.WELCOME_PAGE,
},
],
},
{
issPageValue: issPageValues.WELCOME_PAGE,
maps: [

5
src/router/router-params.js Normal file
View file

@ -0,0 +1,5 @@
const routerParams = {
DISPLAY_VEHICLE_CHANGE_ALERT: "displayVehicleChangeAlert",
};
export { routerParams };

28
src/store/index.js
View file

@ -30,6 +30,14 @@ const getDefaultState = () => {
lastName: null,
},
},
damage: {
isRepair: null,
numberOfChips: null,
glassToReplace: null,
partQuestionAnswers: null,
moldingQuestionAnswers: null,
capabilityQuestionAnswers: null,
},
referralNumber: null,
referralDate: null,
accountNumber: 0,
@ -56,6 +64,8 @@ export const useMainStore = defineStore({
id: storeId,
state: () => state,
getters: {
vehicle: (state) => state.order.vehicle,
damage: (state) => state.order.damage,
eventBusItem: (state) => ( eventCategory, eventSubCategory) => {
const matchedEvent = state.applicationUser.eventBus.find(
@ -190,6 +200,13 @@ export const useMainStore = defineStore({
});
},
getDamageOptions(carId) {
return globalMethods.callHttpClient({
methods: endpoints.GetDamageOptions.method,
endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
payload: {},
});
},
setVehicle() {
return globalMethods
.callHttpClient({
@ -204,7 +221,11 @@ export const useMainStore = defineStore({
},
updateVehicle(vehicle) {
this.order.vehicle = { ...this.order.vehicle, ...vehicle };
this.order.vehicle.carId = vehicle.carId;
this.order.vehicle.category = vehicle.category;
this.order.vehicle.imageUrl = vehicle.imageUrl;
this.order.vehicle.imageVifNumber = vehicle.imageVifNumber;
this.order.vehicle.imageColor = vehicle.imageColor;
},
resetVehicleState()
@ -342,6 +363,9 @@ export const useMainStore = defineStore({
},
logCustomEvent({ userId, sessionKey, pageName, sessionId, category, action, label, value, shouldUseSessionId, experimentsForUser})
{
if ( pageName == null || pageName.length == 0 )
pageName = "none";
var payload = {
userId: userId,
sessionKey: sessionKey,
@ -355,7 +379,7 @@ export const useMainStore = defineStore({
shouldUseSessionId: shouldUseSessionId,
experimentsForUser: experimentsForUser,
};
return globalMethods.callHttpClient({
method: endpoints.LogCustomEvent.method,
endpoint: endpoints.LogCustomEvent.url,

4
src/store/store.spec.js
View file

@ -17,7 +17,7 @@ describe("Store", () => {
store = useMainStore();
store.applicationUser.eventBus = [];
jest.resetAllMocks();
})
});
it("Should Store Vehicle Year", () => {
@ -114,7 +114,7 @@ describe("Store", () => {
expect(store.order.vehicle.imageUrl).toEqual(response.data.imageUrl);
expect(store.order.vehicle.imageVifNumber).toEqual(response.data.imageVifNumber);
expect(store.order.vehicle.imageVifColor).toEqual(response.data.imageVifColor);
expect(store.order.vehicle.style).toEqual(response.data.style);
});
it("setVehicle should call globalMethods.callHttpClient", () => {

4
src/styles/mixins/customMixins.scss
View file

@ -4,3 +4,7 @@
@mixin blue-gradient {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
}
@mixin box-shadow-hover($color) {
box-shadow: 0 0 0 4px $color;
}

15
src/styles/shared-input-button-styles.scss Normal file
View file

@ -0,0 +1,15 @@
.base-input-button {
&:not(.has-error):hover {
cursor: pointer;
&.list-button,
&.list-button-horizontal,
&.list-card {
&:not(.selected) {
position: relative;
z-index: 4;
@include box-shadow-hover($blue-300);
}
}
}
}

261
src/styles/ux-variables.scss
View file

@ -1,186 +1,189 @@
//Colors
// White/black
$white: #FFFFFF;
$black: #000000;
$white: #ffffff;
$black: #000000;
// Blues
$blue-100: #E4F1F7;// Used in theme
$blue-200: #C1DFEE;
$blue-300: #9FCEE6;
$blue-400: #69ADCF;// Used in theme
$blue-500: #3B8FB8;
$blue: #1574A1;// Default Blue
$blue-700: #06577C;
$blue-800: #003D58;
$blue-900: #002433;// Used in theme
$blue-100: #e4f1f7; // Used in theme
$blue-200: #c1dfee;
$blue-300: #9fcee6;
$blue-400: #69adcf; // Used in theme
$blue-500: #3b8fb8;
$blue: #1574a1; // Default Blue
$blue-700: #06577c;
$blue-800: #003d58;
$blue-900: #002433; // Used in theme
// Reds
$red-100: #FFE6E4;
$red-200: #FCBFBB;
$red-300: #F89892;
$red-400: #E65C53;
$red: #D4281C;// Default Red
$red-600: #AC160B;
$red-700: #840900;
$red-800: #5B0600;
$red-900: #330300;
$red-100: #ffe6e4;
$red-200: #fcbfbb;
$red-300: #f89892;
$red-400: #e65c53;
$red: #d4281c; // Default Red
$red-600: #ac160b;
$red-700: #840900;
$red-800: #5b0600;
$red-900: #330300;
// Greens
$green-100: #E3F2EA;
$green-200: #BCEDD4;
$green-300: #94D7B6;
$green-400: #5ABC8C;// Used in theme
$green-500: #2CA168;
$green: #0C7E47;// Default Green
$green-700: #006A36;
$green-800: #004F28;
$green-900: #00331A;
$green-100: #e3f2ea;
$green-200: #bcedd4;
$green-300: #94d7b6;
$green-400: #5abc8c; // Used in theme
$green-500: #2ca168;
$green: #0c7e47; // Default Green
$green-700: #006a36;
$green-800: #004f28;
$green-900: #00331a;
// Yellows
$yellow-100: #FFF5EB;
$yellow-200: #FFE1C6;
$yellow-300: #FFCAA0;
$yellow-400: #F5975D;
$yellow: #E86421;// Default Yellow
$yellow-600: #BB4B06;
$yellow-700: #8E3C00;
$yellow-800: #602D00;
$yellow-900: #331A00;
$yellow-100: #fff5eb;
$yellow-200: #ffe1c6;
$yellow-300: #ffcaa0;
$yellow-400: #f5975d;
$yellow: #e86421; // Default Yellow
$yellow-600: #bb4b06;
$yellow-700: #8e3c00;
$yellow-800: #602d00;
$yellow-900: #331a00;
// Grays
$gray-100: #F5F5F5;// Used in theme
$gray-200: #E3E4E4;// Used in theme
$gray-300: #D2D4D4;
$gray: #B0B3B3;// Default Gray
$gray-500: #8E9292;// Used in theme
$gray-550: #727676;// Used in theme
$gray-600: #4D5151;// Used in theme
$gray-700: #303333;// Used in theme
$gray-800: #222424;// Used in theme
$gray-900: #181A1A;// Used in theme
$gray-100: #f5f5f5; // Used in theme
$gray-200: #e3e4e4; // Used in theme
$gray-300: #d2d4d4;
$gray: #b0b3b3; // Default Gray
$gray-500: #8e9292; // Used in theme
$gray-550: #727676; // Used in theme
$gray-600: #4d5151; // Used in theme
$gray-700: #303333; // Used in theme
$gray-800: #222424; // Used in theme
$gray-900: #181a1a; // Used in theme
// Miscellaneous Colors
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$orange: #fd7e14;
$teal: #20c997;
$cyan: #0dcaf0;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$orange: #fd7e14;
$teal: #20c997;
$cyan: #0dcaf0;
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray,
"gray-dark": $gray-500
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray,
"gray-dark": $gray-500,
);
// scss-docs-start theme-color-variables
$primary: $blue;
$secondary: $red;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-500;
$primary: $blue;
$secondary: $red;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-500;
// scss-docs-start theme-colors-map
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
);
//Default font color
$body-color: $gray-600;
$body-color: $gray-600;
//Fonts
$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
//Custom Font size (extra small)
$font-size-xsm: $font-size-base * .75;
$font-size-xsm: $font-size-base * 0.75;
$font-sizes: (
7: $font-size-xsm
7: $font-size-xsm,
);
//Font weight
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 500;
$font-weight-bolder: bolder;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 500;
$font-weight-bolder: bolder;
//Headings
$h1-font-size: $font-size-base * 3;
$h2-font-size: $font-size-base * 2.625;
$h3-font-size: $font-size-base * 2;
$h4-font-size: $font-size-base * 1.625;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base * .875;
$h1-font-size: $font-size-base * 3;
$h2-font-size: $font-size-base * 2.625;
$h3-font-size: $font-size-base * 2;
$h4-font-size: $font-size-base * 1.625;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base * 0.875;
//Border Radius
// Helper classes are rounded, rounded-1, rounded-2, rounded-3
$border-radius: .25rem;
$border-radius-sm: .2rem;
$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course.
$border-radius-pill: 50rem;
$border-radius: 0.25rem;
$border-radius-sm: 0.2rem;
$border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
$border-radius-pill: 50rem;
//Spacing
// 8 spacers available instead of the usual 5
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25, /* 4px */
2: $spacer * .5, /* 8px */
3: $spacer * .75, /* 12px */
4: $spacer * 1, /* 16px */
5: $spacer * 1.5, /* 24px */
6: $spacer * 2, /* 32px */
7: $spacer * 2.5, /* 40px */
8: $spacer * 3, /* 48px */
0: 0,
1: $spacer * 0.25,
/* 4px */ 2: $spacer * 0.5,
/* 8px */ 3: $spacer * 0.75,
/* 12px */ 4: $spacer * 1,
/* 16px */ 5: $spacer * 1.5,
/* 24px */ 6: $spacer * 2,
/* 32px */ 7: $spacer * 2.5,
/* 40px */ 8: $spacer * 3,
/* 48px */
);
//Grid breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 838px,
lg: 1074px,
xl: 1416px
xs: 0,
sm: 576px,
md: 838px,
lg: 1074px,
xl: 1416px,
);
//Shadow
$box-shadow: 0 .5rem 1rem rgba($black, .15);
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
$box-shadow-lg: 0 1rem 3rem rgba($black, .25);//Safelite default
$box-shadow-inset: inset 0 1px 2px rgba($black, .075);
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.25); //Safelite default
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
//Alerts
$alert-bg-scale: -90%;
$alert-border-scale: -100%;
$alert-color-scale: 40%;
$alert-bg-scale: -90%;
$alert-border-scale: -100%;
$alert-color-scale: 40%;
//Modal animation
$modal-fade-transform: translate(0, 0);
$modal-backdrop-opacity: 0;
// This affects all [Bootstrap] modals
$modal-fade-transform: translate(0, 100%);
$modal-backdrop-opacity: 0;

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

@ -1,264 +1,139 @@
import { shallowMount } from "@vue/test-utils";
import { mount } from "@vue/test-utils";
import listButtonHorizontal from "./list-button-horizontal";
import { nextTick } from "vue";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
describe("list-button-horizontal.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isMultiSelect: true,
},
describe("styling/UI", () => {
it("Should return screen reader text", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
screenReaderOnlyText: "Screen Reader Only Text",
},
},
});
// Assert
const paragraph = wrapper.find("span.sr-only");
expect(paragraph.text()).toEqual("Screen Reader Only Text");
});
it("Should return text alignment class", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
textPosition: "text-center",
},
},
});
// Assert
const paragraph = wrapper.find("span.m-0");
expect(paragraph.attributes("class")).toContain("text-center");
});
it("Should return aria-required state", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isRequired: true,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes()["aria-required"]).toEqual("true");
});
it("is cash or insurance button => has 'strong' class", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
additionalButtonStyling: "listButtonHorizontalStrong",
},
},
});
// Assert
const label = wrapper.find("label");
expect(label.classes()).toContain("strong");
});
test("has buttonLabel => displays buttonLabel", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
buttonLabel: "Surprise!",
},
},
});
// Assert
const content = wrapper.find(".list-button-horizontal-content");
expect(content.isVisible()).toBe(true);
expect(content.text()).toContain("Surprise!");
});
test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
buttonLabel: "Surprise!",
buttonLabelSubCopy: "Super duper surprise :)",
},
},
});
// Assert
const content = wrapper.find(".list-button-horizontal-content");
expect(content.isVisible()).toBe(true);
expect(content.text()).toContain("Super duper surprise :)");
});
test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
buttonLabel: "Surprise!",
buttonLabelSubCopy: "Super duper surprise :)",
screenReaderOnlyText: "Tests are fun!",
},
},
});
// Assert
const content = wrapper.find(".list-button-horizontal-content");
const screenReaderOnlyText = wrapper.find(".sr-only");
expect(content.isVisible()).toBe(true);
expect(screenReaderOnlyText.exists()).toBe(true);
expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
});
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
});
it("Should return input type radio if isMultiSelect is false or not specified", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isMultiSelect: false,
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
});
it("Should return primary label text (buttonID)", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
buttonID: "List Card Checkbox",
},
});
// Assert
const label = wrapper.find("label");
expect(label.attributes().for).toEqual("List Card Checkbox");
});
it("Should return screen reader text", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
screenReaderOnlyText: "Screen Reader Only Text",
},
});
// Assert
const paragraph = wrapper.find("span.sr-only");
expect(paragraph.text()).toEqual("Screen Reader Only Text");
});
it("Should return text alignment class", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
textPosition: "text-center",
},
});
// Assert
const paragraph = wrapper.find("span.m-0");
expect(paragraph.attributes("class")).toContain("text-center");
});
it("Should return aria-required state", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isRequired: true,
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes()["aria-required"]).toEqual("true");
});
it("Should return loader enabled true", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { issPage: 'page-name' } },
}
},
propsData: {
selectingInitiatesLoad: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.exists()).toBe(true);
});
it("Should return loader color", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { issPage: 'page-name' } },
}
},
propsData: {
loaderColor: "blue",
selectingInitiatesLoad: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("class")).toContain("blue");
});
it("Should return loader position", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { issPage: 'page-name' } },
}
},
propsData: {
loaderPosition: "right",
selectingInitiatesLoad: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("class")).toContain("right");
});
it("Should emit button value on click", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: false}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
isMultiSelect: false,
value: "Car-Front",
selectedValues: ["Car-Front"]
},
});
// Assert
expect(wrapper.vm.checkValue).toEqual(true);
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
selectingInitiatesLoad: false,
},
});
// Assert
wrapper.vm.handleInputChange();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isMultiSelect: true,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
selectingInitiatesLoad: false,
isMultiSelect: false,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
});
function setupMocks({ mockData }) {
const wrapper = mount(listButtonHorizontal, {
...mockData,
propsData: {
...mockData.propsData,
groupName: "my-group",
modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
value: mockData.propsData?.isMultiSelect ? ["4"] : "4",
},
mixins: [inputButtonWrapperMixin],
});
return { wrapper };
}

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

@ -1,206 +1,84 @@
<template>
<div
class="list-group list-button-horizontal d-flex flex-column w-100"
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
@keyup.space="triggerButton()"
@keyup.up="handleKeyupArrow()"
@keyup.down="handleKeyupArrow()"
@keyup.left="handleKeyupArrow()"
@keyup.right="handleKeyupArrow()"
>
<input
:type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID"
:name="groupName"
:aria-required="isRequired"
v-model="checkValue"
:checked="checkValue"
@change="handleInputChange()"
/>
<label
tabindex="-1"
:for="buttonID"
:aria-label="buttonLabel"
class="d-flex flex-column justify-content-center py-3 px-4"
@mouseup="triggerButton()"
>
<span
class="m-0"
:class="textPosition"
>
{{buttonLabel}}
</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
{{ buttonLabelSubCopy }}
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
</label>
</div>
</template>
<script>
import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
import { toRef } from "vue";
export default {
name: "listButtonHorizontal",
props: {
isMultiSelect: Boolean,
groupName: String,
buttonID: String,
buttonLabel: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
textPosition: String,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: String,
isRequired: Boolean,
isCashOrInsurance: Boolean,
value: {
// Field initial value
type: String,
default: "",
<baseInputButton
v-bind="$props"
:buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100 base-input-button',
{ strong: isStrongStyling },
]"
v-model="selectedValue">
<div
class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-3">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
{{ buttonLabelSubCopy }}
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
</div>
</baseInputButton>
</template>
<script>
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "listButtonHorizontal",
mixins: [inputButtonWrapperMixin],
computed: {
isStrongStyling() {
return this.additionalButtonStyling === "listButtonHorizontalStrong";
},
validationRules: String,
selectedValues: [Array, String],
hasError: Boolean,
valueToLogType: String,
},
data() {
return {
isLoaderDisplayed: false,
checkValue: Boolean,
};
},
created() {
if (Array.isArray(this.selectedValues)) {
this.checkValue = this.isMultiSelect
? this.selectedValues.includes(this.value)
: this.selectedValues[0] == this.value;
}
else {
this.checkValue = this.selectedValues === this.value;
}
},
methods: {
isValueSelectedByArray(arr) {
return this.isMultiSelect
? arr.includes(this.value)
: arr[0];
},
displayLoader() {
this.isLoaderDisplayed = true;
},
handleInputChange() {
if (!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
},
handleKeyupArrow() {
if (this.isMultiSelect) {
return; // Prevent arrow keys from doing anything if element is a checkbox
}
if (!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
},
triggerButton() {
if (this.selectingInitiatesLoad) {
this.displayLoader();
this.handleCheckChange();
}
},
handleCheckChange() {
const emitEvent = {
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
value: this.value,
buttonId: this.buttonID && this.buttonID.toString(),
};
this.handleChange(this.value);
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
}
},
components: {
loader,
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const fieldOptions = {
type: inputType,
checkedValue: props.value,
potentialInitialValue: props.selectedValues,
};
// Set initialValue for validation setup if pre-selected
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
}
const {
handleChange,
errors,
value
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
const validateValue = value;
return {
handleChange,
errors,
validateValue,
fieldOptions, // only need to expose this for unit test purposes
};
},
};
</script>
<style lang="scss">
.list-button-horizontal {
input[type="radio"],
input[type="checkbox"] {
},
components: {
baseInputButton,
},
};
</script>
<style lang="scss">
.list-button-horizontal {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
height: 0;
opacity: 0;
width: 0;
&:focus-visible+label {
box-shadow: 0 0 0 2.5px $blue;
z-index: 2;
.list-button-horizontal-content {
cursor: pointer;
}
&:focus+label {
box-shadow: 0 0 0 2.5px $blue;
z-index: 3;
&:focus-visible + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 2;
}
&:checked+label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
outline: none;
z-index: 2;
&:focus + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 3;
}
&:checked:focus+label {
box-shadow: 0 0 0 2.5px $blue;
&:checked + .list-button-horizontal-content {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
outline: none;
z-index: 2;
}
&:checked+label p:first-child {
font-weight: 500;
&:checked:focus + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
}
}
label {
&:checked + .list-button-horizontal-content p:first-child {
font-weight: 500;
}
}
.list-button-horizontal-content {
outline: none;
position: relative;
background: $white;
@ -209,136 +87,132 @@
border-radius: 0;
width: 100%;
color: $gray-600;
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 4 !important;
}
}
+p {
display: none;
}
span {
font-size: .875rem;
font-size: 0.875rem;
}
}
// Cash/Insurance option radio button styling
&.radio-fancy {
label {
border: 1px solid $blue-700;
z-index: 2;
color: $blue;
span {
font-size: 1rem;
font-weight: 500;
}
}
// Cash/Insurance option radio button styling
&.strong {
.list-button-horizontal-content {
border: 1px solid $blue-700;
z-index: 2;
color: $blue;
span {
font-size: 1rem;
font-weight: 500;
}
}
label:hover {
background-color: $blue-700;
color: $white;
box-shadow: none;
.list-button-horizontal-content:hover {
background-color: $blue-700;
color: $white;
box-shadow: none;
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
height: 0;
opacity: 0;
width: 0;
&:focus-visible+label {
border-radius: 0.5rem;
z-index: 2;
}
&:focus+label {
z-index: 3;
}
&:checked+label {
outline: none;
box-shadow: none;
color: $white;
background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
border-radius: 0.5rem;
z-index: 5;
}
&:checked:focus+label {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&:checked+label p:first-child {
font-weight: 500;
}
position: absolute;
height: 0;
opacity: 0;
width: 0;
&:focus-visible + .list-button-horizontal-content {
border-radius: 0.5rem;
z-index: 2;
}
&:focus + .list-button-horizontal-content {
z-index: 3;
}
&:checked + .list-button-horizontal-content {
outline: none;
box-shadow: none;
color: $white;
background: linear-gradient(84.45deg, #125b7e 0%, #3b8fb8 100%);
border-radius: 0.5rem;
z-index: 5;
}
&:checked:focus + .list-button-horizontal-content {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&:checked + .list-button-horizontal-content p:first-child {
font-weight: 500;
}
}
}
&.list-button-horizontal {
}
&.list-button-horizontal {
height: 100%;
label {
height: 100%;
height: 100%;
}
}
}
.col {
&:first-of-type {
}
.col,
.list-group {
border-radius: 0;
&:first-of-type {
.list-button-horizontal {
label {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
}
&:last-of-type {
}
&:last-of-type {
.list-button-horizontal {
label {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
//Cash/insurance styling
&:first-of-type {
.list-button-horizontal.radio-fancy {
input[type="radio"] {
&:checked+label {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:checked:focus+label {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
}
&:last-of-type {
.list-button-horizontal.radio-fancy {
input[type="radio"] {
&:checked+label {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&:checked:focus+label {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
}
}
}
</style>
//Cash/insurance styling
&:first-of-type {
.list-button-horizontal.strong {
input[type="radio"] {
&:checked + .list-button-horizontal-content {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:checked:focus + .list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
}
&:last-of-type {
.list-button-horizontal.strong {
input[type="radio"] {
&:checked + .list-button-horizontal-content {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&:checked:focus + .list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
}
}
}
</style>

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

@ -1,256 +1,304 @@
import { shallowMount } from "@vue/test-utils";
import { mount } from "@vue/test-utils";
import listButton from "./list-button";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
describe("list-button.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isMultiSelect: true,
},
describe("loader", () => {
it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
global: {
mocks: {
$route: { query: { fmgPage: "page-name" } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
},
},
propsData: {
selectingInitiatesLoad: true,
},
},
});
// Act
wrapper.vm.selectedValue = "something";
await wrapper.vm.$nextTick();
// Assert
const loader = wrapper.findComponent({ name: "loader" });
expect(loader.exists()).toBe(true);
});
it("Should return loader color", async () => {
// Arrange
const { wrapper } = setupMocks({
mockData: {
global: {
mocks: {
$route: { query: { fmgPage: "page-name" } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
},
},
propsData: {
loaderColor: "blue",
selectingInitiatesLoad: true,
},
},
});
// Act
wrapper.vm.selectedValue = "something";
await wrapper.vm.$nextTick();
// Assert
const loader = wrapper.findComponent({ name: "loader" });
expect(loader.attributes("class")).toContain("blue");
});
it("Should return loader position", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
global: {
mocks: {
$route: { query: { fmgPage: "page-name" } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
},
},
propsData: {
loaderPosition: "right",
selectingInitiatesLoad: true,
},
},
});
// Act
wrapper.vm.selectedValue = "something";
await wrapper.vm.$nextTick();
// Assert
const loader = wrapper.findComponent({ name: "loader" });
expect(loader.attributes("class")).toContain("right");
});
});
// Assert
const input = wrapper.find("input");
describe("baseInputButton checks", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isMultiSelect: true,
},
},
});
expect(input.attributes().type).toEqual("checkbox");
});
// Assert
const input = wrapper.find("input");
it("Should return input type radio if isMultiSelect is false or not specified", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isMultiSelect: false,
},
expect(input.attributes().type).toEqual("checkbox");
});
it("Should return input type radio if isMultiSelect is false or not specified", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isMultiSelect: false,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
});
it("(Radio) Should emit button value on selectedValue change", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: "List Card Checkbox",
buttonID: "list-card-id",
},
},
});
// Act
wrapper.vm.selectedValue = "test";
// Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("test");
});
it("(Checkbox) Should emit button value on selectedValue change", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: "List Card Checkbox",
buttonID: "list-card-id",
isMultiSelect: true,
},
},
});
// Act
wrapper.vm.selectedValue = ["test"];
// Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["test"]);
});
});
// Assert
const input = wrapper.find("input");
describe("styling/UI", () => {
test("has buttonLabel => displays buttonLabel", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
buttonLabel: "Surprise!",
modelValue: "",
groupName: "groupName",
value: "myValue",
},
},
});
expect(input.attributes().type).toEqual("radio");
});
// Assert
const content = wrapper.find(".list-button-content");
expect(content.isVisible()).toBe(true);
expect(content.text()).toContain("Surprise!");
});
it("Should return primary label text (buttonID)", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
buttonID: "List Card Checkbox",
},
test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
buttonLabel: "Surprise!",
buttonLabelSubCopy: "Super duper surprise :)",
modelValue: "",
groupName: "groupName",
value: "myValue",
},
},
});
// Assert
const content = wrapper.find(".list-button-content");
expect(content.isVisible()).toBe(true);
expect(content.text()).toContain("Super duper surprise :)");
});
test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
buttonLabel: "Surprise!",
buttonLabelSubCopy: "Super duper surprise :)",
screenReaderOnlyText: "Tests are fun!",
modelValue: "",
groupName: "groupName",
value: "myValue",
},
},
});
// Assert
const content = wrapper.find(".list-button-content");
const screenReaderOnlyText = wrapper.find(".sr-only");
expect(content.isVisible()).toBe(true);
expect(screenReaderOnlyText.exists()).toBe(true);
expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
});
it("Should return screen reader text", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
screenReaderOnlyText: "Screen Reader Only Text",
modelValue: "",
groupName: "groupName",
value: "myValue",
},
},
});
// Assert
const paragraph = wrapper.find("span.sr-only");
expect(paragraph.text()).toEqual("Screen Reader Only Text");
});
it("Should return text alignment class", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
textPosition: "text-center",
modelValue: "",
groupName: "groupName",
value: "myValue",
},
},
});
// Assert
const paragraph = wrapper.find("span.m-0");
expect(paragraph.attributes("class")).toContain("text-center");
});
it("Should return aria-required state", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isRequired: true,
groupName: "groupName",
modelValue: "",
value: "myValue",
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes()["aria-required"]).toEqual("true");
});
});
// Assert
const label = wrapper.find("label");
expect(label.attributes().for).toEqual("List Card Checkbox");
});
it("Should return screen reader text", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
screenReaderOnlyText: "Screen Reader Only Text",
},
});
// Assert
const paragraph = wrapper.find("span.sr-only");
expect(paragraph.text()).toEqual("Screen Reader Only Text");
});
it("Should return text alignment class", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
textPosition: "text-center",
},
});
// Assert
const paragraph = wrapper.find("span.m-0");
expect(paragraph.attributes("class")).toContain("text-center");
});
it("Should return aria-required state", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isRequired: true,
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes()["aria-required"]).toEqual("true");
});
it("Should return loader enabled true", async () => {
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { issPage: 'page-name' } },
}
},
propsData: {
selectingInitiatesLoad: true,
},
});
// Assert
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.exists()).toBe(true);
});
it("Should return loader color", async () => {
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { issPage: 'page-name' } },
}
},
propsData: {
loaderColor: "blue",
selectingInitiatesLoad: true,
},
});
// Assert
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("class")).toContain("blue");
});
it("Should return loader position", async () => {
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { issPage: 'page-name' } },
}
},
propsData: {
loaderPosition: "right",
selectingInitiatesLoad: true,
},
});
// Assert
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("class")).toContain("right");
});
it("Should emit button value on click", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
buttonID: 'list-card-id'
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: false, buttonId: 'list-card-id'}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
selectedValues: "Car-Front"
},
});
// Assert
expect(wrapper.componentVM.checkValue).toEqual(false);
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
selectingInitiatesLoad: false,
},
});
// Assert
wrapper.vm.handleInputChange();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isMultiSelect: true,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
selectingInitiatesLoad: false,
isMultiSelect: false,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
});
function setupMocks({ mockData }) {
const wrapper = mount(listButton, {
...mockData,
mixins: [inputButtonWrapperMixin],
});
return { wrapper };
}

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

@ -1,241 +1,114 @@
<template>
<div
class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
@keyup.space="triggerButton"
@keyup.enter="triggerButton"
@keyup.up="handleKeyupArrow"
@keyup.down="handleKeyupArrow"
@keyup.left="handleKeyupArrow"
@keyup.right="handleKeyupArrow">
<input
:type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID"
:name="groupName"
:value="value"
:aria-required="isRequired"
v-model="checkValue"
:checked="checkValue"
@change="handleInputChange"
>
<label
tabindex="-1"
:for="buttonID"
:aria-label="buttonLabel"
class="d-flex flex-column justify-content-center py-3 px-4"
@mouseup="triggerButton"
>
<span
class="m-0"
:class="textPosition"
>
{{ buttonLabel }}
</span>
<span
v-if="buttonLabelSubCopy"
class="m-0 small"
:class="textPosition"
>
{{ buttonLabelSubCopy }}
</span>
<span
v-if="screenReaderOnlyText"
class="sr-only"
>
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[this.loaderColor, this.loaderPosition]"
/>
</label>
</div>
</template>
<script>
import { useField } from "vee-validate";
import { toRef } from "vue";
import loader from "@/ux-components/loader/loader";
export default {
name: "listButton",
props: {
isMultiSelect: Boolean,
groupName: String,
buttonLabel: [Number, String],
buttonID: [Number, String],
isRequired: Boolean,
textPosition: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
selectingInitiatesLoad: Boolean,
<baseInputButton
v-bind="$props"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
v-model="selectedValue">
<div
:aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
{{ buttonLabelSubCopy }}
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[this.loaderColor, this.loaderPosition]" />
</div>
</baseInputButton>
</template>
<script>
import loader from "@/ux-components/loader/loader";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "listButton",
mixins: [inputButtonWrapperMixin],
props: {
loaderColor: String,
loaderPosition: String,
value: {
// Field initial value
type: [String, Number],
default: "",
},
validationRules: String,
selectedValues: [Array, String],
hasError: Boolean,
valueToLogType: String,
},
data() {
return {
isLoaderDisplayed: false,
checkValue: false,
};
},
mounted() {
if (Array.isArray(this.validateValue)) {
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
if (this.checkValue != isSelectedByValidator) {
this.handleChange(this.value);
}
}
else {
this.checkValue = this.selectedValues == this.value;
}
},
methods: {
isValueSelectedByArray(arr) {
return this.isMultiSelect
? arr.includes(this.value)
: arr[0];
loaderPosition: {
type: String,
default: "right",
},
},
data() {
return {
isLoaderDisplayed: false,
};
},
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
this.isLoaderDisplayed = true;
},
handleInputChange() {
if(!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
preHandleAnswerChange() {
if (this.selectingInitiatesLoad) {
this.displayLoader();
}
},
handleKeyupArrow() {
if (this.isMultiSelect) {
return; // Prevent arrow keys from doing anything if element is a checkbox
}
},
triggerButton() {
if(this.selectingInitiatesLoad) {
this.displayLoader();
this.handleCheckChange();
}
},
handleCheckChange() {
const emitEvent = {
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
value: this.value.toString(),
buttonId: this.buttonID && this.buttonID.toString(),
};
this.handleChange(this.value);
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
},
},
components: {
},
components: {
loader,
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const fieldOptions = {
type: inputType,
checkedValue: props.value,
potentialInitialValue: props.selectedValues,
};
// Set initialValue for validation setup if pre-selected
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
baseInputButton,
},
};
</script>
<style lang="scss" scoped>
.loader {
position: absolute;
}
.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
&:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
const {
handleChange,
errors,
value
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
const validateValue = value;
return {
handleChange,
errors,
validateValue,
fieldOptions, // only need to expose this for unit test purposes
};
},
};
</script>
<style lang="scss" scoped>
.list-group {
&.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
height: 0;
opacity: 0;
&:focus-visible + label {
&:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + label {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + label {
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked:focus + label {
}
&:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + label p,
&:checked + label span {
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + label span:nth-child(2) {
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
}
}
label {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
span {
&.small {
font-size: .75rem;
color: $gray-550;
}
}
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
}
cursor: pointer;
}
+ p {
display: none;
}
}
}
</style>
}
.list-button-content {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
span {
&.small {
font-size: 0.75rem;
color: $gray-550;
}
}
}
</style>

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

@ -1,329 +1,179 @@
import { shallowMount } from "@vue/test-utils";
import { mount } from "@vue/test-utils";
import listCard from "./list-card";
import { nextTick } from "vue";
describe("list-card.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isMultiSelect: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "checkbox-demo-1",
groupName: "Checkbox 1",
buttonImage: "windshield-damage.svg",
},
});
it("Should return input type checkbox if isMultiSelect is true", () => {
// Act
const wrapper = mount(listCard, {
propsData: {
isMultiSelect: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "checkbox-demo-1",
groupName: "Checkbox 1",
buttonImage: "windshield-damage.svg",
value: "test value",
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
});
it("Should return primary label text", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
},
});
it("Should return primary label text", () => {
// Act
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
value: "test value",
},
});
// Assert
const paragraph = wrapper.find("p");
expect(paragraph.text()).toEqual("Windshield");
// Assert
const paragraph = wrapper.find("p");
expect(paragraph.text()).toEqual("Windshield");
});
it("Should return secondary (sub) label text", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
},
});
it("Should return secondary (sub) label text", () => {
// Act
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
value: "test value",
},
});
// Assert
const paragraph = wrapper.find("p:nth-of-type(2)");
expect(paragraph.text()).toEqual("Test");
// Assert
const paragraph = wrapper.find("p:nth-of-type(2)");
expect(paragraph.text()).toEqual("Test");
});
it("Should return value used for various text settings including the label 'for' and input id", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
},
});
it("Should return input group name used for radio or checkbox", () => {
// Act
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
value: "test value",
},
});
// Assert
const label = wrapper.find("label");
expect(label.attributes().for).toEqual("List Card Checkbox");
// Assert
const input = wrapper.find("input");
expect(input.attributes().name).toEqual("radio 1");
});
it("Should return input group name used for radio or checkbox", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
},
});
it("Should return aria-required state", () => {
// Act
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
value: "test value",
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().name).toEqual("radio 1");
// Assert
const input = wrapper.find("input");
expect(input.attributes()["aria-required"]).toEqual("true");
});
it("Should return aria-required state", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
},
});
it("Should return flex row classes if isWide is true", () => {
// Act
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: true,
buttonLabelSubCopy: "",
value: "test value",
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes()["aria-required"]).toEqual("true");
// Assert
const label = wrapper.find(".list-card-content");
expect(label.exists()).toBe(true);
const labelClasses = wrapper.vm.labelClasses;
expect(labelClasses).toContain("flex-row");
expect(label.classes()).toContain("flex-row");
});
it("Should return flex row classes if isWide is true", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: true,
buttonLabelSubCopy: "",
},
});
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is provided", () => {
// Act
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: true,
buttonLabelSubCopy: "Button Subcopy",
value: "test value",
},
});
// Assert
const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4"]);
// Assert
const label = wrapper.find(".list-card-content");
expect(label.exists()).toBe(true);
const labelClasses = wrapper.vm.labelClasses;
expect(labelClasses).toContain("flex-row");
expect(label.classes()).toContain("flex-row");
expect(labelClasses).toContain("checkboxTop");
expect(label.classes()).toContain("checkboxTop");
});
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: true,
buttonLabelSubCopy: "Button Subcopy",
},
});
it("Should return flex column classes if isWide is false", () => {
// Act
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
value: "test value",
},
});
// Assert
const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4", "checkboxTop"]);
// Assert
const label = wrapper.find(".list-card-content");
expect(label.exists()).toBe(true);
const labelClasses = wrapper.vm.labelClasses;
expect(labelClasses).toContain("flex-column");
expect(label.classes()).toContain("flex-column");
});
it("Should return flex column classes if isWide is false", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
},
});
// Assert
const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
});
it("Should emit button value on click", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
buttonID: 'list-card-id',
selectedValues: "List Card Checkbox"
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: true, buttonId: 'list-card-id'}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
selectedValues: "Car-Front"
},
});
// Assert
expect(wrapper.componentVM.checkValue).toEqual(false);
});
it("Should set an initial value for validation if selectedValues include the value", async () => {
// Arrange
const wrapper = shallowMount(listCard, {
propsData: {
value: "Windshield",
groupName: "radio 1",
selectedValues: ["Windshield"],
},
});
// Assert
expect(wrapper.vm.fieldOptions.initialValue).toEqual([ 'Windshield' ]);
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
selectingInitiatesLoad: false,
},
});
// Assert
wrapper.vm.handleInputChange();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isMultiSelect: true,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
selectingInitiatesLoad: false,
isMultiSelect: false,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
it("Should run handleChange if triggerButton is triggered", async () => {
// Act
const wrapper = shallowMount(listCard, {
global: {
mocks: {
'$route': { query: { issPage: 'page-name' } },
}
},
propsData: {
selectingInitiatesLoad: false,
},
});
// Assert
wrapper.vm.triggerButton();
await nextTick();
expect(wrapper.vm.handleChange).toBeCalled;
expect(wrapper.vm.handleCheckChange).not.toBeCalled;
expect(wrapper.vm.displayLoader).not.toBeCalled;
});
it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
// Act
const wrapper = shallowMount(listCard, {
global: {
mocks: {
'$route': { query: { issPage: 'page-name' } },
}
},
propsData: {
selectingInitiatesLoad: true,
},
});
// Assert
wrapper.vm.triggerButton();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
expect(wrapper.vm.displayLoader).toBeCalled;
});
});

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

@ -1,399 +1,243 @@
<template>
<div :class="{'h-100': !isWide}">
<div
class="list-card w-100 rounded-3 d-flex align-items-center"
:class="[
'h-100',
isWide ? 'horizontal' : '',
(errors.length > 0 || hasError) ? 'has-error' : '',
<baseInputButton
v-bind="$props"
:buttonWrapperClasses="[
'list-card w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
{ horizontal: isWide },
]"
@keyup.space="triggerButton"
@keyup.up="handleKeyupArrow"
@keyup.down="handleKeyupArrow"
@keyup.left="handleKeyupArrow"
@keyup.right="handleKeyupArrow"
>
<input
:type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID"
:name="groupName"
:value="value"
:aria-required="isRequired"
v-model="checkValue"
:checked="checkValue"
@change="handleInputChange"
/>
<label
tabindex="-1"
:for="buttonID"
:aria-label="buttonLabel"
class="d-flex w-100 align-items-center px-2 h-100"
:class="getLabelClasses"
@mouseup="triggerButton"
>
<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 }}
v-model="selectedValue">
<div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content button-content rounded-3"
:class="labelClasses">
<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>
</div>
</label>
</div>
</div>
</template>
<script>
import { useField } from "vee-validate";
import { toRef } from "vue";
export default {
<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>
</div>
</baseInputButton>
</template>
<script>
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "listCard",
props: {
isMultiSelect: Boolean, //Defines use as checkbox
isWide: Boolean,
buttonImage: String, //Required: File name of image
buttonImageId: String,
buttonLabel: String, //Required: Label text
isRequired: Boolean, //Required: is aria-required required or not?
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
buttonID: String, //Required: Unique
groupName: String, //Rquired: Unique
buttonLabelSubCopy: String, //Optional: sub text
value: {
// Field initial value
type: String,
default: "",
},
colLength: String,
validationRules: String,
selectedValues: [Array, String],
hasError: Boolean,
valueToLogType: String,
},
data() {
return {
checkValue: null,
}
},
mounted() {
if (Array.isArray(this.validateValue)) {
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
if (this.checkValue != isSelectedByValidator) {
this.handleChange(this.value);
}
}
else {
this.checkValue = this.selectedValues == this.value;
}
mixins: [inputButtonWrapperMixin],
components: {
baseInputButton,
},
computed: {
getLabelClasses() {
if (this.isWide) {
let classes = "flex-row py-2 ps-4 pe-4";
if (this.buttonLabelSubCopy) {
classes += " checkboxTop";
}
return classes;
} else {
return "flex-column pt-4 pb-3";
}
},
labelClasses() {
if (this.isWide) {
let classes = "flex-row py-2 ps-4 pe-4";
if (this.buttonLabelSubCopy) {
classes += " checkboxTop";
}
return classes;
} else {
return "flex-column pt-4 pb-3";
}
},
},
methods: {
isValueSelectedByArray(arr) {
return this.isMultiSelect
? arr.includes(this.value)
: arr[0];
},
handleInputChange() {
if(!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
},
handleKeyupArrow() {
if (this.isMultiSelect) {
return; // Prevent arrow keys from doing anything if element is a checkbox
}
if(!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
},
triggerButton() {
if(this.selectingInitiatesLoad) {
this.displayLoader();
this.handleCheckChange();
}
},
handleCheckChange() {
const emitEvent = {
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
value: this.value.toString(),
buttonId: this.buttonID && this.buttonID.toString(),
};
this.handleChange(this.value);
this.$emit("isCheckedChanged", emitEvent);
},
},
watch: {
// Changing this will impact pre-selection data loads on vehicle-parts.
// If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
selectedValues(newVal) {
if (typeof newVal === "string") {
this.checkValue = newVal == this.value;
}
else if (newVal !== undefined) {
this.checkValue = newVal.value;
}
},
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const fieldOptions = {
type: inputType,
checkedValue: props.value, // EX: "Single" or "Passenger"
potentialInitialValue: props.selectedValues,
};
// Set initialValue for validation setup if pre-selected
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
}
const {
handleChange,
errors,
value
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
// First land on the blank, unselected page, no handleChange
// Land on page with initial values, handleChange
const validateValue = value;
return {
handleChange,
errors,
validateValue,
fieldOptions, // only need to expose this for unit test purposes
};
},
};
</script>
<style lang="scss">
.list-card {
};
</script>
<style lang="scss">
@mixin list-card-focus($box-shadow-color) {
&:focus-visible + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
border-radius: 0.5rem;
}
&:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
border-radius: 0.5rem;
}
&:checked:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
}
}
.list-card {
border: 1px solid $gray-500;
&.invalid {
//Red border if invalid
border: 1px solid $red;
&.has-error {
input[type="checkbox"],
input[type="radio"] {
@include list-card-focus($red);
}
}
img {
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
height: auto;
width: 6.5rem;
margin-bottom: 2.2rem;
max-width: 100%;
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
height: auto;
width: 6.5rem;
margin-bottom: 2.2rem;
max-width: 100%;
}
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0px 0px 0px 4px $blue-300;
border: 1px solid transparent;
}
}
input[type="checkbox"],
input[type="radio"] {
opacity: 0;
width: 0;
height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
position: absolute;
+ label {
outline: none;
display: block;
position: relative;
&:hover {
cursor: pointer;
}
p {
color: $gray-600;
text-align: center;
&.sub-copy {
color: $gray-550;
}
}
}
&:checked + label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem;
}
&:focus-visible + label {
box-shadow: 0 0 0 2.5px $blue;
border-radius: 0.5rem;
}
&:focus + label {
box-shadow: 0 0 0 2.5px $blue;
border-radius: 0.5rem;
}
&:checked:focus + label {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + label {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
font-weight: 400;
}
}
+ label::before {
content: "";
position: absolute;
display: flex;
margin: 0 auto;
width: 1rem;
height: 1rem;
margin: 3rem 0 0 0;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
order: 2;
flex-shrink: 0;
color: $gray-600;
}
+ label.checkboxTop::before {
margin: -1.25rem 0.5rem 0 0 !important;
}
+ label.checkboxTop::after {
margin: -1.5rem 0.5rem 0 0 !important;
}
&:checked + label::before {
background: $blue;
}
&:checked + label::after {
content: "";
position: absolute;
margin: 3.2rem 0 0 0;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 11px;
transform: rotate(-45deg);
z-index: 1;
}
}
input[type="radio"] {
+ label::before {
content: "";
display: none;
}
+ label::after {
content: "";
display: none;
}
+ label {
img {
margin-bottom: 0;
}
}
}
&.horizontal {
img {
margin-bottom: 0;
width: 5.5rem;
}
input[type="checkbox"],
input[type="radio"] {
+ label::before {
content: "";
position: relative;
margin: 0 0.5rem 0 0;
order: 1;
}
&:checked + label::after {
content: "";
margin: -0.15rem 0 0 0;
left: 1.175rem;
}
&:checked + label {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
font-weight: 400;
}
}
+ label {
outline: none;
min-height: 48px;
color: $gray-600;
img {
margin-bottom: 0;
}
p {
color: $gray-600;
text-align: left;
&.sub-copy {
color: $gray-550;
+ .list-card-content {
outline: none;
display: block;
position: relative;
p {
color: $gray-600;
text-align: center;
&.sub-copy {
color: $gray-550;
}
}
}
}
}
&:checked + .list-card-content {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem;
}
@include list-card-focus($blue);
&:checked + .list-card-content {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
font-weight: 400;
}
}
+ .list-card-content::before {
content: "";
position: absolute;
display: flex;
margin: 0 auto;
width: 1rem;
height: 1rem;
margin: 3rem 0 0 0;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
order: 2;
flex-shrink: 0;
color: $gray-600;
}
+ .list-card-content.checkboxTop::before {
margin: -1.25rem 0.5rem 0 0 !important;
}
+ .list-card-content.checkboxTop::after {
margin: -1.5rem 0.5rem 0 0 !important;
}
&:checked + .list-card-content::before {
background: $blue;
}
&:checked + .list-card-content::after {
content: "";
position: absolute;
margin: 3.2rem 0 0 0;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 11px;
transform: rotate(-45deg);
z-index: 1;
}
}
}
</style>
input[type="radio"] {
+ .list-card-content::before {
content: "";
display: none;
}
+ .list-card-content::after {
content: "";
display: none;
}
+ .list-card-content {
img {
margin-bottom: 0;
}
}
}
&.horizontal {
img {
margin-bottom: 0;
width: 5.5rem;
}
input[type="checkbox"],
input[type="radio"] {
+ .list-card-content::before {
content: "";
position: relative;
margin: 0 0.5rem 0 0;
order: 1;
}
&:checked + .list-card-content::after {
content: "";
margin: -0.15rem 0 0 0;
left: 1.175rem;
}
&:checked + .list-card-content {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
font-weight: 400;
}
}
+ .list-card-content {
outline: none;
min-height: 48px;
color: $gray-600;
img {
margin-bottom: 0;
}
p {
color: $gray-600;
text-align: left;
&.sub-copy {
color: $gray-550;
}
}
}
}
}
}
</style>

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

@ -1,34 +1,34 @@
<template>
<div
<div
class="loader"
role="alert"
aria-label="Loading new page"
v-bind:class="[this.loaderColor, this.loaderPosition]"
></div>
</template>
<script>
export default {
name: "loader",
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
props: {
v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
</template>
<script>
export default {
name: "loader",
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
props: {
/* Color options: red, green, blue, white, black */
loaderColor: {
type: String,
type: String,
},
/* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
loaderPosition: {
type: String,
type: String,
},
},
};
</script>
<style lang="scss">
.loader {
display: flex;
//Open an overlay to prevent page interaction
&:before {
},
};
</script>
<style lang="scss">
.loader {
display: flex;
//Open an overlay to prevent page interaction
&:before {
content: "";
position: fixed;
top: 0;
@ -38,9 +38,9 @@
background-color: transparent;
z-index: 9999;
cursor: default;
}
//Spinner basics
&:after {
}
//Spinner basics
&:after {
content: "";
mask: url(../../assets/icons/spinner.svg);
mask-size: cover;
@ -49,42 +49,38 @@
height: 1rem;
animation: rotation 1s infinite linear;
@keyframes rotation {
100% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
}
//Spinner position
&.center {
position: absolute;
}
//Spinner position
&.center {
right: 50%;
transform: translateX(50%);
}
&.right {
position: absolute;
}
&.right {
right: 1rem;
}
&.left {
position: absolute;
}
&.left {
left: 1rem;
}
//Spinner color
&:after {
}
//Spinner color
&:after {
//Default spinner color (blue) if no other color is specified from the options below
background-color: $blue;
}
&.red:after {
background-color: $red;
}
&.green:after {
background-color: $green;
}
&.white:after {
background-color: $white;
}
&.black:after {
background-color: $black;
}
}
</style>
&.red:after {
background-color: $red;
}
&.green:after {
background-color: $green;
}
&.white:after {
background-color: $white;
}
&.black:after {
background-color: $black;
}
}
</style>