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

Merge pull request #762 from Safelite/feature/CSR-762

Browse source 
Feature/csr 762
This commit is contained in:
katieoh-safelite 2022-10-27 13:31:36 -04:00 committed by GitHub
commit 61ecd7cf9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
55 changed files with 5427 additions and 2783 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.prettierrc Normal file
View file

@ -0,0 +1,5 @@
{
"tabWidth": 4,
"bracketSameLine": true,
"printWidth": 100
}

35
src/App.vue
View file

@ -1,16 +1,29 @@
<template>
<router-view v-slot="{ Component }">
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<component :is="Component" />
</transition>
</router-view>
<router-view v-slot="{ Component }">
<transition
:duration="{ enter: 200, leave: 200 }"
name="route-fade"
mode="out-in">
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<component :is="Component" @focusin="handleAnyComponentFocus" />
</transition>
</router-view>
</template>
<script>
import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper"
export default {
name: "app",
methods: {
handleAnyComponentFocus: handleAnyComponentFocus
}
};
</script>
<style lang="scss">
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
</style>

1263
src/common-components/base-input-button/base-input-button.spec.js Normal file
View file

File diff suppressed because it is too large Load diff

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

@ -0,0 +1,201 @@
<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 { queryStrings } from "@/constants/query-strings";
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.ENTER:
case this.eventTypes.CHANGE:
this.handleClick(e);
this.handlePushClickEventToGACheck(
this.eventTypes.CLICK
);
break;
}
} else {
switch (eventType) {
case this.eventTypes.CLICK:
case this.eventTypes.ENTER:
case this.eventTypes.SPACE:
this.handleClick(e);
this.handlePushClickEventToGACheck(
this.eventTypes.CLICK
);
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,
});
},
handlePushClickEventToGACheck(source) {
// if from a click or click-like event
if (source === this.eventTypes.CLICK) {
this.pushClickEventToGA();
} else { // if from tabbing around
if (
this.valueToEmit !== null &&
!this.isValueSelectedOnClick &&
this.isChecked &&
this.lastValuePushedToGa != this.value
) {
this.pushClickEventToGA();
}
}
},
pushClickEventToGA(value) {
this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
value?.toString() ?? this.value?.toString(),
true,
this.valueToLogType
);
this.setLastValuePushedToGa(value ?? this.value);
},
},
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,
},
}

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

File diff suppressed because it is too large Load diff

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

@ -1,253 +1,249 @@
<!-- 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 v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
<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
: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>
</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)"
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="buttonType"
:buttonLabel="answer.buttonLabel"
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
:buttonImage="answer.buttonImage"
:buttonImageId="answer.buttonImageId"
:groupName="answer.groupName"
:isMultiSelect="isMultiSelect"
:value="answer.value"
:selectingInitiatesLoad="selectingInitiatesLoad"
:isWide="isWide"
:validationRules="validationRules"
:textPosition="textPosition"
: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>
</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";
import { ErrorMessage } from "vee-validate";
export default {
name: "buttonQuestion",
props: {
buttonType: {
type: String,
default: "listButton",
name: "buttonQuestion",
props: {
buttonType: {
type: String,
default: "listButton",
},
isMultiSelect: Boolean,
groupName: String,
questionText: String,
answers: Array,
textPosition: {
type: String,
default: "text-center",
},
selectingInitiatesLoad: Boolean,
loaderColor: {
type: String,
default: "blue",
},
loaderPosition: {
type: String,
default: "right",
},
isRequired: Boolean,
isOverflowScrollable: Boolean,
isWide: Boolean,
isCashOrInsurance: Boolean,
modelValue: [Array, Number, String],
value: [Number, String],
validationRules: String,
suppressError: Boolean,
useTextForValue: Boolean,
valueToLogType: String,
},
isMultiSelect: Boolean,
groupName: String,
questionText: String,
answers: Array,
textPosition: {
type: String,
default: "text-center",
data() {
return {
lastValuePushedToGa: null,
};
},
selectingInitiatesLoad: Boolean,
loaderColor: {
type: String,
default: "blue",
},
loaderPosition: {
type: String,
default: "right",
},
isRequired: Boolean,
isOverflowScrollable: Boolean,
isWide: Boolean,
isCashOrInsurance: Boolean,
modelValue: [Array, String],
validationRules: String,
suppressError: Boolean,
useTextForValue: Boolean,
valueToLogType: String,
},
computed: {
getFieldSetClasses() {
if (this.isOverflowScrollable) {
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
}
else if (this.buttonType == "listCard") {
return "w-100";
}
else {
return "";
}
},
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;
},
getComponentWrapperClasses() {
let classes = "";
computed: {
getFieldSetClasses() {
if (this.isOverflowScrollable) {
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
} else if (this.buttonType == "listCard") {
return "w-100";
} else {
return "";
}
},
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";
if (this.isWide) {
classes += " flex-column";
}
break;
case "radio":
classes = "ui-radio d-flex";
break;
}
return classes;
},
getComponentWrapperClasses() {
let classes = "";
classes += this.isWide ? "col-12" : "col";
classes += this.isWide ? "col-12" : "col";
if (this.buttonType == "radio") {
classes += " radio-button-container";
}
if (this.buttonType == "radio") {
classes += " radio-button-container";
}
return classes;
return classes;
},
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,
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() {
return this.modelValue;
},
set(selectedAnswers) {
this.$emit("update:modelValue", selectedAnswers);
},
},
},
getColLength(){
if(this.isWide) {
return "12"
} else {
return "";
}
methods: {
formatString(str) {
return str?.replaceAll(" ", "-");
},
setLastValuePushedToGa(lastValuePushedToGa) {
this.lastValuePushedToGa = lastValuePushedToGa;
},
},
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
components: {
listButton,
listButtonHorizontal,
listCard,
ErrorMessage,
radio,
},
},
methods: {
formatString(str) {
return str.replace(" ", "-");
},
getValue(answer){
if (this.useTextForValue) { return answer.Text }
return answer.Name ? answer.Name : answer;
},
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: {
listButton,
listButtonHorizontal,
listCard,
ErrorMessage,
radio,
},
};
</script>
<style lang="scss">
.button-question-overflow {
height: calc(100vh - 274px);
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;
}
.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;
color: $black;
.radio-button-container {
&:not(:last-child) {
padding-bottom: map-get($spacers, 2);
.radio-button-container {
&:not(:last-child) {
padding-bottom: map-get($spacers, 2);
}
}
}
}
.question-text {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.625rem;
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.625rem;
& > span {
text-align: center;
}
& > span {
text-align: center;
}
}
.vehicle-parts {
.question-text {
span {
font-size: .875rem;
text-align: left;
margin: 0 0 .5rem 0;
.question-text {
span {
font-size: 0.875rem;
text-align: left;
margin: 0 0 0.5rem 0;
}
}
}
.question-text {
margin: 0;
}
fieldset {
.ui-radio {
margin: 0;
.question-text {
margin: 0;
}
fieldset {
.ui-radio {
margin: 0;
}
}
}
}
</style>

13
src/common-components/question-chain/question-chain.vue
View file

@ -8,8 +8,8 @@
:questionText="q.questionText"
:answers="q.answers"
:groupName="`question-${glassIndex}-${q.questionSequence}`"
v-model="q.answerSelected"
@isCheckedChanged="handleAnswer"
:modelValue="q.answerSelected"
@update:modelValue="handleAnswer(q, $event)"
isRequired
:validationRules="validationRules"
/>
@ -45,13 +45,13 @@ export default {
questionSequence: q.questionSequence,
answers: q.answers.map((a) => {
return {
Text: a.answerText,
buttonLabel: a.answerText,
// Name will either be nextQuestionSequence or answerResult
// Name will be used by list-button as the input value.
// It must be a single string or number, so concatenating together a string with
// 4 pieces of data separated by pipe characters:
// question number|type of answer|answer value|answer text
Name: a.nextQuestionSequence ?
value: a.nextQuestionSequence ?
q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText :
q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
nextQuestionSequence: a.nextQuestionSequence,
@ -77,7 +77,8 @@ export default {
}
},
methods: {
handleAnswer(returnedAnswer) {
handleAnswer(question, returnedAnswer) {
question.answerSelected = returnedAnswer;
/*
returnedAnswer example format:
{
@ -86,7 +87,7 @@ export default {
"buttonId": "Driver-Front-1-1|answer|DD11132|Yes"
}
*/
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer.value);
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer);
if (isQuestionChainComplete) {
this.$emit("update:modelValue", isQuestionChainComplete);

27
src/constants/store-actions.js
View file

@ -18,11 +18,11 @@ const storeActions = {
LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress",
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
GET_PARTS: "getParts",
GET_CAPABILITY_QUESTIONS: "getCapabilityQuestions",
GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: "getPartFromCapabilityQuestionAnswer",
GET_PART_FROM_CAPABILITY_QUESTION_ANSWER:
"getPartFromCapabilityQuestionAnswer",
GET_MOLDING_QUESTIONS: "getMoldingQuestions",
SAVE_SESSION: "saveSession",
LOAD_SESSION: "loadSession",
@ -45,22 +45,23 @@ const storeActions = {
RESET_STATE: "resetState",
// SAVE COMPONENT STATE
SAVE_VEHICLE_YEAR: "saveVehicleYear",
SAVE_VEHICLE_MAKE:"saveVehicleMake",
SAVE_VEHICLE_MODEL:"saveVehicleModel",
SAVE_VEHICLE_YEAR: "saveVehicleYear",
SAVE_VEHICLE_MAKE: "saveVehicleMake",
SAVE_VEHICLE_MODEL: "saveVehicleModel",
SAVE_VEHICLE_STYLE: "saveVehicleStyle",
SAVE_VEHICLE_DAMAGE: "saveVehicleDamage",
SAVE_VIN_LOOKUP: "saveVinLookup",
SAVE_SERVICE_LOCATION: "saveServiceLocation",
SAVE_EMAIL: "saveEmail",
SAVE_REGISTRATION_LICENSE_PLATE_LOOKUP: "saveRegistrationLicensePlateLookup",
SAVE_VIN: "saveVin",
SAVE_VEHICLE_DAMAGE: "saveVehicleDamage",
SAVE_VIN_LOOKUP: "saveVinLookup",
SAVE_SERVICE_LOCATION: "saveServiceLocation",
SAVE_EMAIL: "saveEmail",
SAVE_REGISTRATION_LICENSE_PLATE_LOOKUP: "saveRegistrationLicensePlateLookup",
SAVE_VIN: "saveVin",
SAVE_REGISTRATION_ADDRESS_LOOKUP: "saveRegistrationAddressLookup",
SAVE_GLASS_PARTS: "saveGlassParts",
SAVE_PART_QUESTION_ANSWERS: "savePartQuestionAnswers",
RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED: "resetMoldingAndCapabilityQuestionAnswersIfNeeded",
RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED:
"resetMoldingAndCapabilityQuestionAnswersIfNeeded",
SAVE_MOLDING_QUESTION_ANSWERS: "saveMoldingQuestionAnswers",
SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers"
SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers",
};
export { storeActions };

5
src/constants/store-mutations.js
View file

@ -1,5 +1,4 @@
const storeMutations = {
// VEHICLE MUTATIONS
UPDATE_YEAR: "updateYear",
UPDATE_MAKE: "updateMake",
@ -22,7 +21,7 @@ const storeMutations = {
UPDATE_GLASS_PARTS: "updateGlassParts",
UPDATE_OTHER_PARTS: "updateOtherParts",
UPDATE_REGISTRATION_LICENSE_PLATE : "updateRegistrationLicensePlate",
UPDATE_REGISTRATION_LICENSE_PLATE: "updateRegistrationLicensePlate",
UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress",
UPDATE_REGISTRATION_CITY: "updateRegistrationCity",
UPDATE_REGISTRATION_STATE: "updateRegistrationState",
@ -69,4 +68,4 @@ const storeMutations = {
UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry",
};
export { storeMutations };
export { storeMutations };

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

@ -0,0 +1,41 @@
/**
* 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,
};

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

@ -0,0 +1,251 @@
import {
handleAnyComponentFocus,
handleButtonComponentFocus,
handleInputComponentBlur,
} from "@/helpers/button-question-focus-helper";
describe("buttonQuestionFocusHelper", () => {
let onButtonQuestionLostFocusCallbackOne = jest.fn();
let onButtonQuestionLostFocusCallbackTwo = jest.fn();
let focusOnInputInGroupOne;
let blurFromInputInGroupOne;
let focusOnInputInGroupTwo;
let blurFromInputInGroupTwo;
let focusOnNonRadioCheckboxElement;
beforeEach(() => {
onButtonQuestionLostFocusCallbackOne = jest.fn();
onButtonQuestionLostFocusCallbackTwo = jest.fn();
// Sanity check
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
focusOnInputInGroupOne = () => {
handleButtonComponentFocus({
groupName: "group1",
});
};
blurFromInputInGroupOne = () => {
handleInputComponentBlur({
groupName: "group1",
onButtonQuestionLostFocusCallback: onButtonQuestionLostFocusCallbackOne,
});
};
focusOnInputInGroupTwo = () => {
handleButtonComponentFocus({
groupName: "group2",
});
};
blurFromInputInGroupTwo = () => {
handleInputComponentBlur({
groupName: "group2",
onButtonQuestionLostFocusCallback: onButtonQuestionLostFocusCallbackTwo,
});
};
focusOnNonRadioCheckboxElement = () => {
handleAnyComponentFocus({
target: {
type: "nonRadioCheckbox",
},
});
};
});
test("focus on input => no callbacks were called", () => {
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
});
test("focus on input, then focus on input in same group => no callbacks are called", () => {
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in group 1
blurFromInputInGroupOne();
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
});
test("focus on non-radio/checkbox, focus on input => no callbacks are called", () => {
// focus on non-radio/checkbox
focusOnNonRadioCheckboxElement();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
});
test("focus on input in group 1, then focus on input in different group => callback for group 1 is called", () => {
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in different group
blurFromInputInGroupOne();
focusOnInputInGroupTwo();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
});
test("focus on input in group 1, focus on input in same group, then focus on input in different group => callback for group 1 is called", () => {
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in same group
blurFromInputInGroupOne();
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in different group
blurFromInputInGroupOne();
focusOnInputInGroupTwo();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
});
test("focus on input in group 1, focus on non-radio/checkbox element => callback from group 1 is called", () => {
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in group 2
blurFromInputInGroupOne();
focusOnNonRadioCheckboxElement();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
});
test("focus on input in group 1, focus on input in group 2, focus on non-radio/checkbox element => both callbacks are called", () => {
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in group 2
blurFromInputInGroupOne();
focusOnInputInGroupTwo();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(0);
// focus on non-radio/checkbox
blurFromInputInGroupTwo();
focusOnNonRadioCheckboxElement();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
});
test("focus on input in group 1, focus on input in group 2, focus on input in group 1 => both callbacks are called", () => {
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in group 2
blurFromInputInGroupOne();
focusOnInputInGroupTwo();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(0);
// focus on input in group 1
blurFromInputInGroupTwo();
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
});
test("go back and forth a lot => correct callbacks are called at the right time", () => {
// Arrange/Act
// focus on input in group 1
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in group 2
blurFromInputInGroupOne();
focusOnInputInGroupTwo();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
// focus on input in group 1
blurFromInputInGroupTwo();
focusOnInputInGroupOne();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
// focus on non-radio/checkbox element
blurFromInputInGroupOne();
focusOnNonRadioCheckboxElement();
// Assert
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(2);
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
// focus on input in group 1
focusOnInputInGroupOne();
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(2);
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
});
});

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

@ -25,7 +25,6 @@ export async function loadSessionIfPresent() {
return null;
}
// Load referral if there is a cookie, and it doesn't indicate it needs a state reset.
return (await loadSession(funnelCookie.ReferralNumber, funnelCookie.ReferralDate, funnelCookie.ReferralCorrelationId, funnelCookie.ReferralParentAccountNumber)).data;
}

6
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
View file

@ -34,14 +34,14 @@ describe("addressVehiclesQuestion.vue", () => {
const wrapper = shallowMount(addressVehiclesQuestion, {
mixins: [mockMixin],
propsData: {
vehicles: ["1", "2"],
modelValue: ["1", "2"],
vehicles: ["1", "2", "newValue"],
modelValue: "2",
}
});
// Act
const localThis = { $emit: jest.fn() }
addressVehiclesQuestion.computed.selectedVehicleVinAsArray.set.call(localThis, ['newValue']);
addressVehiclesQuestion.computed.selectedVehicleVin.set.call(localThis, 'newValue');
// Assert
expect(localThis.$emit).toBeCalledWith("update:modelValue", "newValue");

12
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
View file

@ -5,7 +5,7 @@
groupName="ChooseAddressVehicle"
:questionText="questionText"
:answers="vehicles"
v-model="selectedVehicleVinAsArray"
v-model="selectedVehicleVin"
isRequired
:validation-rules="validationRules"
:valueToLogType="ValueToLogTypes.LAST_5"
@ -63,18 +63,16 @@ export default {
questionText() {
return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
},
selectedVehicleVinAsArray: {
selectedVehicleVin: {
get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
return modelValueAsArray;
return this.modelValue;
},
set: function(newValue) {
const newValueAsScalar = newValue && newValue.length > 0 ? newValue[newValue.length-1] : null;
this.$emit("update:modelValue", newValueAsScalar);
this.$emit("update:modelValue", newValue);
}
},
selectedVehicle() { // this computed is only needed for the computed differentVehicleAlertBody text above
return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVinAsArray[this.selectedVehicleVinAsArray.length-1] );
return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVin[this.selectedVehicleVin.length-1] );
},
},
components: {

2
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -195,7 +195,7 @@ export default {
selectedVehicleVin: {
handler() {
// does this vehicle match the previously selected carId?
this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
this.isCarIdDifferent = this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
if (this.isCarIdDifferent) {
this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
} else {

1
src/layouts/estimate/estimate.spec.js
View file

@ -168,7 +168,6 @@ describe("estimate.vue", () => {
store.commit(storeMutations.UPDATE_IS_REPAIR, null);
// Act
console.log(store.getters.damage)
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert

5
src/layouts/estimate/estimate.vue
View file

@ -27,7 +27,7 @@
validationRules="option-required"
/>
</div>
<div v-if="isRepair">
<div v-else>
<alert
class="my-4"
cmsWidgetName="AlertQuoteReady"
@ -87,7 +87,6 @@
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@isDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
@ -131,7 +130,7 @@ export default {
name: "estimate",
data() {
return {
selectedVinLookupMethod: "",
selectedVinLookupMethod: null,
serviceZipCode: this.getZipFromStore(),
emailAddress: this.getEmailFromStore(),
displayInvalidZipAlert: false,

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

@ -36,7 +36,7 @@ describe("replace-options-question.vue", () => {
});
describe("replace-options-question.vue", () => {
test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", async () => {
test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedReplaceOptions", async () => {
//Arrange
const { wrapper, cmsContent, replaceOptions

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

@ -11,7 +11,7 @@
v-model="selectedValues"
:validationRules="validationRules"
:suppressError="suppressError"
:isRequired=isRequired
:isRequired="isRequired"
/>
</div>
</transition>
@ -25,14 +25,14 @@ export default ({
name: "replaceOptionsQuestion",
data(){
return {
replaceOptions: [],
replaceOptions: this.isMultiSelect ? [] : "",
}
},
props: {
isAvailable: Boolean,
filterByVehicleCategory: Boolean,
groupName: String,
modelValue: Array,
modelValue: [Array, String, Number],
isMultiSelect: Boolean,
validationRules: String,
suppressError: Boolean,
@ -46,7 +46,7 @@ export default ({
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
this.selectedValues = [this.answersToDisplay[0].Name];
this.selectedValues = this.isMultiSelect ? [this.answersToDisplay[0].Name] : this.answersToDisplay[0].Name;
}
},
},
@ -91,7 +91,7 @@ export default ({
},
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
if (!shouldDisplayReplaceOptionsQuestion) {
this.selectedValues = [];
this.selectedValues = this.isMultiSelect ? [] : "";
}
}
},

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

@ -57,7 +57,7 @@ export default ({
name: "sideDoorOptions",
props: {
groupName: String,
modelValue: Array,
modelValue: Object,
selectedDamageLocations: Array,
cmsWidgetName: String,
},

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

@ -129,20 +129,20 @@ describe("vehicle-damage.vue", () => {
},
});
wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"];
wrapper.vm.selectedWindshieldOptions = {
selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: ["Single"],
selectedWindshieldDamageType: "Replace"
};
wrapper.vm.sideDoorOptionsData = {
selectedDoorSides: ["DriverSide", "PassengerSide"],
selectedDriverSideReplaceOptions: ["Back"],
selectedPassengerSideReplaceOptions: ["Quarter"]
};
wrapper.vm.selectedRearReplaceOptions = ["Stationary"];
wrapper.setData({
selectedDamageLocations: ["Windshield", "SideDoor", "RearWindow"],
selectedWindshieldOptions: {
selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: ["Single"],
selectedWindshieldDamageType: "Replace"
},
sideDoorOptionsData: {
selectedDoorSides: ["DriverSide", "PassengerSide"],
selectedDriverSideReplaceOptions: ["Back"],
selectedPassengerSideReplaceOptions: ["Quarter"]
},
selectedRearReplaceOptions: "Stationary",
})
const expectedGlassToReplace = [{ location: "Windshield", name: "Single" }, { location: "Driver", name: "Back" },
{ location: "Passenger", name: "Quarter" }, { location: "Rear", name: "Stationary" }];
@ -519,19 +519,19 @@ describe("vehicle-damage.vue", () => {
const storeWindshieldOptions = [[1, false, "Windshield", "Single", {
selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]
selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]
}],
[2, false, "Windshield", "Driver", {
selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]
selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]
}],
[3, false, "Windshield", "Passenger", {
selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]
selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]
}],
[4, true, "", "", {
selectedWindshieldDamageType: damageLocationsSelected.REPAIR,
selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: []
selectedWindshieldChipCount: 2, selectedWindshieldReplaceOptions: []
}]
];
test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => {
@ -618,8 +618,8 @@ describe("vehicle-damage.vue", () => {
expect(glassSelections).toEqual(expectedGlass);
});
const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]],
["Rear", "Slider", [damageLocationsSelected.SLIDER]]
const rearReplaceOptions = [["Rear", "Stationary", damageLocationsSelected.STATIONARY],
["Rear", "Slider", damageLocationsSelected.SLIDER]
];
test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {

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

@ -196,11 +196,15 @@ export default {
},
getWindshieldOptionsFromStore() {
var windShieldOptions = { selectedWindshieldDamageType: "", selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
var windShieldOptions = { selectedWindshieldDamageType: "", selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: []};
if (store.getters.damage.isRepair === undefined) return windshieldOptions;
if (!store.getters.damage.isRepair) {
if (store.getters.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount = store.getters.damage.numberOfChips;
}
else {
if (store.getters.damage.glassToReplace?.some(glass => { return glass.location === damageLocationsSelected.WINDSHIELD &&
glass.name === damageLocationsSelected.SINGLE })) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
@ -220,13 +224,7 @@ export default {
}
}
if (store.getters.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount.push(store.getters.damage.numberOfChips);
}
return windShieldOptions;
},
getDoorSidesFromStore() {
@ -265,15 +263,9 @@ export default {
return passengerSideReplaceOptions;
},
getRearReplaceOptionsFromStore(){
var rearReplaceOptions = [];
store.getters.damage.glassToReplace?.forEach(glass => {
if (glass.location === damageLocationsSelected.REAR){
rearReplaceOptions.push(glass.name);
}
});
getRearReplaceOptionsFromStore() {
var rearReplaceOptions = store.getters.damage.glassToReplace?.filter(glass => glass.location === damageLocationsSelected.REAR)[0]?.name;
return rearReplaceOptions;
},
@ -290,7 +282,6 @@ export default {
},
navigateForward(){
// If vin already exists, navigate directly to vin-lookup
if(store.getters.vehicle.vin) {
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
@ -321,9 +312,7 @@ export default {
}
if (this.isRearWindowDamageLocation) {
this.selectedRearReplaceOptions.forEach(rearItem => {
selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: rearItem});
})
selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: this.selectedRearReplaceOptions});
}
return selectedGlassToReplace;
@ -373,15 +362,15 @@ export default {
hasSplitSingleConflict() {
if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType === damageLocationsSelected.REPAIR || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield =>
return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedSingleWindshield =>
{
return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase();
}) &&
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedDriverWindshield =>
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedDriverWindshield =>
{
return selectedDriverWindshield.toUpperCase() === damageLocationsSelected.DRIVER.toUpperCase();
}) ||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedPassengerWindshield =>
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedPassengerWindshield =>
{
return selectedPassengerWindshield.toUpperCase() === damageLocationsSelected.PASSENGER.toUpperCase();
})

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

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

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

@ -7,7 +7,7 @@
:groupName="groupName"
buttonType="listButtonHorizontal"
useTextForValue
v-model="selectedChipCountValues"
v-model="selectedValue"
:validationRules="validationRules"
isRequired
/>
@ -21,20 +21,12 @@ import buttonQuestion from "@/common-components/button-question/button-question"
export default ({
name: "windshieldOptions",
props: {
modelValue: Array,
modelValue: [String, Number],
groupName: String,
isAvailable: Boolean,
validationRules: String,
cmsWidgetName: String,
},
methods: {
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
this.selectedValues = [this.answersToDisplay[0].Name];
}
},
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
@ -42,7 +34,7 @@ export default ({
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedChipCountValues: {
selectedValue: {
get: function() {
return this.modelValue;
},
@ -52,12 +44,6 @@ export default ({
}
},
},
watch: {
isAvailable(val) {
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
val && this.updateSelectedValues();
}
},
components: {
buttonQuestion,
}

12
src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
View file

@ -6,22 +6,22 @@ import store from "@/store";
jest.mock("@/store", () => { return {}; }, {virtual: true});
describe("windshield-damage-type-question.vue", () => {
test("Selected chip count is emitted upon selection.", async () => {
test("Selected windshield damage is emitted upon selection.", async () => {
//Arrange
const { wrapper } = setupMocks({modelValueProp: ["Repair"]});
const { wrapper } = setupMocks({modelValueProp: "Repair"});
//Act
wrapper.setValue({ modelValue: ["Replace"] });
wrapper.setValue({ modelValue: "Replace" });
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.vm.selectedValues).toEqual(["Repair"]);
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Replace"] }]);
expect(wrapper.vm.selectedValues).toEqual("Repair");
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Replace" }]);
});
});
function setupMocks({
modelValueProp = ["Two"],
modelValueProp = "",
groupName = "WindshieldDamageTypeQuestion",
cmsQuestionText = "What's your windshield damage?",
cmsAnswers = [{Name: "Repair"}, {Name: "Replace"}],

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

@ -57,8 +57,8 @@ defineRule("windshield-replace-options-required", required(errorMessages.WINSHIE
defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => {
return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR ||
!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) ||
selectedDamageLocations.length === 1;
(!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) ||
(selectedDamageLocations[0].length === 1);
});
defineRule("repair-only", (value) => {
return value.toString() === damageLocationsSelected.REPAIR;
@ -83,7 +83,7 @@ export default ({
},
props: {
modelValue: String,
modelValue: Object,
selectedDamageLocations: Array,
hasRepairReplaceConflict: Boolean,
hasSplitSingleConflict: Boolean,
@ -114,7 +114,7 @@ export default ({
},
selectedWindshieldDamageTypeValue: {
get: function() {
return this.selectedValues.selectedWindshieldDamageType;
return this.selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) ? this.selectedValues.selectedWindshieldDamageType : null;
},
set: function(newValue) {
this.selectedValues = this.getWindshieldOptions(newValue, null, null);

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

@ -23,7 +23,7 @@ export default {
name: "make-question",
data() {
return {
makes: Array,
makes: [],
};
},
props: {

282
src/layouts/vehicle-make/vehicle-make.spec.js
View file

@ -5,150 +5,224 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import store from "@/store";
// Components
import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
jest.mock("@/store", () => ({
commit: jest.fn(),
dispatch: jest.fn(),
getters: {
vehicle: {
year: 2019,
},
},
commit: jest.fn(),
dispatch: jest.fn(),
// getters: jest.fn().mockImplementation(() => ({
// vehicle: {
// year: 2019,
// },
// })),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
fetchCmsContentForPage: jest.fn(),
}));
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
settleAllPromises: jest.fn(),
}));
describe("vehicle-make.vue", () => {
test("Make question component is initized with api data", async (done) => {
//Arrange
const makeQuestionInitialData = ["honda", "ford", "dodge"];
const { wrapper, apiPromise } = setupMocks({
makeQuestionInitialData: makeQuestionInitialData,
});
test("Make question component is initized with api data", async (done) => {
//Arrange
const makeQuestionInitialData = ["honda", "ford", "dodge"];
const { wrapper, apiPromise } = setupMocks({
makeQuestionInitialData: makeQuestionInitialData,
});
//Act
vehicleMake.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-make" } },
undefined,
(c) => c(wrapper.vm)
);
//Act
vehicleMake.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-make" } },
undefined,
(c) => c(wrapper.vm)
);
//Assert
apiPromise.finally(() => {
expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(
makeQuestionInitialData
);
done();
//Assert
apiPromise.finally(() => {
expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(
makeQuestionInitialData
);
done();
});
});
});
});
describe("vehicle-make.vue", () => {
test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => {
//Arrange
const { wrapper, apiPromise } = setupMocks({
pageHeaderWidgetHeaderText: "Select a make to get started",
mountOptionsMockData: {
router: {
navigate: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
},
});
test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => {
//Arrange
const { wrapper, apiPromise } = setupMocks({
pageHeaderWidgetHeaderText: "Select a make to get started",
mountOptionsMockData: {
router: {
navigate: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
},
});
//Act
vehicleMake.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-make" } },
undefined,
(c) => c(wrapper.vm)
);
wrapper.vm.backButtonAction();
await nextTick();
//Act
vehicleMake.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-make" } },
undefined,
(c) => c(wrapper.vm)
);
wrapper.vm.backButtonAction();
await nextTick();
//Assert
apiPromise.finally(() => {
expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
done();
//Assert
apiPromise.finally(() => {
expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
done();
});
});
});
});
describe("vehicle-make.vue", () => {
test("Year set, arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks({});
describe("arePagePrerequisitesValue", () => {
test("Year set, arePagePrerequisitesValid should be true", async () => {
//Arrange
const { wrapper } = setupMocks({
vehicleData: {
year: 2019
}
});
//Act
vehicleMake.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-make" } },
undefined,
(c) => c(wrapper.vm)
);
//Act
vehicleMake.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-make" } },
undefined,
(c) => c(wrapper.vm)
);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test("Year not set, arePagePrerequisitesValid should be false", async () => {
//Arrange
store.getters.vehicle.year = jest.fn().mockReturnValueOnce(undefined);
const { wrapper } = setupMocks({});
//Act
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(false);
});
});
test("selectedMake changes => save make in store", async () => {
//Arrange
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
},
}
});
// Act
await wrapper.setData({
selectedMake: "Make",
});
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledTimes(1);
expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledWith(
"saveVehicleMake",
"Make",
false
);
});
test("selectedMake changes => navigate with saving", async () => {
//Arrange
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
},
route: {
fmgPage: "test",
},
},
});
// Act
await wrapper.setData({
selectedMake: "Make",
});
// Assert
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledTimes(1);
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
"SELECTED_MAKE",
expect.anything()
);
});
});
function setupMocks({
vehicleMakeQuestionCmsContent = {},
makeQuestionInitialData = {},
pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {},
vehicleMakeQuestionCmsContent = {},
makeQuestionInitialData = {},
pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {},
vehicleData = {}
}) {
//Mock api responses
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
FunnelHeaderWidget: {
LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
},
makeQuestionInitialData: makeQuestionInitialData,
};
//Mock api responses
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
FunnelHeaderWidget: {
LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
},
makeQuestionInitialData: makeQuestionInitialData,
};
const apiPromise = Promise.resolve(apiResponses);
const apiPromise = Promise.resolve(apiResponses);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
settleAllPromises.mockImplementation(() => apiPromise);
store.getters = {
vehicle: vehicleData
}
//Mock make question methods
makeQuestion.methods = {
loadInitialData: jest.fn(),
initializeComponent: jest.fn(),
};
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
settleAllPromises.mockImplementation(() => apiPromise);
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(vehicleMake, mountOptions);
const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
makeQuestionWrapper.vm.initializeComponent =
makeQuestion.methods.initializeComponent;
//Mock make question methods
makeQuestion.methods = {
loadInitialData: jest.fn(),
initializeComponent: jest.fn(),
};
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(vehicleMake, mountOptions);
const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
return { wrapper, apiPromise };
return { wrapper, apiPromise };
}

22
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -3,14 +3,21 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
displayGenericVehicleImage
/>
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
:hasBackButton="true"
@click-event="backButtonAction"
cmsWidgetName="FunnelSubHeaderWidget"
:hasBackButton="true"
@click-event="backButtonAction"
/>
<div class="fade-on-route-transition">
<makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
<makeQuestion
v-model="selectedMake"
ref="makeQuestion"
cmsWidgetName="VehicleMakeQuestion"
/>
</div>
</div>
</div>
@ -26,7 +33,6 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeMutations } from "@/constants/store-mutations";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
@ -75,7 +81,7 @@ export default {
);
},
arePagePrerequisitesValid() {
if (store.getters.vehicle.year){
if (store.getters.vehicle.year) {
return true;
}
return false;
@ -84,7 +90,7 @@ export default {
watch: {
selectedMake(make) {
this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false);
this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false);
this.$router.navigateWithSaving(
this.navigationScenarios.SELECTED_MAKE,
this.$route

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

@ -23,7 +23,7 @@ export default {
name: "model-question",
data() {
return {
models: Array,
models: [],
};
},
props: {

1
src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
View file

@ -19,7 +19,6 @@ const featureListData = {
}
describe("glass-part-question.vue", () => {
test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => {
//Arrange

68
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -13,9 +13,7 @@
altText=""
isRequired
:groupName="`${location}-${name}`"
@isCheckedChanged="ResetTintAndPartSelections"
:validationRules="tintValidationRules"
>
:validationRules="tintValidationRules">
<div class="row my-2" aria-live="polite">
<div class="col">
<buttonQuestion
@ -29,7 +27,7 @@
isRequired
:groupName="`${location}-${name}-${selectedTint}`"
:validationRules="partValidationRules"
/>
/>
</div>
</div>
</buttonQuestion>
@ -64,7 +62,10 @@ export default {
location: String,
colorAnswers: Array,
modelValue: Object,
alreadyPopulatedPartsData: Array
alreadyPopulatedPartsData: {
type: Array,
default: () => [],
},
},
mounted() {
this.LoadPreselectedValues();
@ -75,12 +76,21 @@ export default {
computed: {
tintValidationRules() {
const validationRuleName = `${this.location}-${this.name}-tint-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
defineRule(
validationRuleName,
required(errorMessages.OPTION_REQUIRED)
);
return validationRuleName;
},
partValidationRules() {
const validationRuleName = `${this.location}-${this.name}-part-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
defineRule(
validationRuleName,
required(errorMessages.OPTION_REQUIRED)
);
return validationRuleName;
},
colorQuestionText() {
@ -95,9 +105,9 @@ export default {
Object.keys(this.featureListData).forEach((tintOption) => {
tintOptions.push({
Name: tintOption,
Text: tintOption,
AnswerImageUrl: require(`@/assets/img/tints/${this.getTintSourceImage(
value: tintOption,
buttonLabel: tintOption,
buttonImage: require(`@/assets/img/tints/${this.getTintSourceImage(
this.location,
tintOption
)}`),
@ -112,16 +122,29 @@ export default {
return this.modelValue?.partNumber;
},
set(newValue) {
this.$emit("update:modelValue", this.partsForSelectedTint.filter(part => part.partNumber == newValue)[0]);
this.$emit(
"update:modelValue",
this.partsForSelectedTint.filter(
(part) => part.partNumber == newValue
)[0]
);
},
},
partsForSelectedTint() {
const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(dataForlocationAndName =>
dataForlocationAndName.name == this.name &&
dataForlocationAndName.location == this.location);
const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
return matchingGlassParts.filter(part => part.color == this.selectedTint) ?? [];
const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(
(dataForGlassLocationAndName) =>
dataForGlassLocationAndName.name == this.name &&
dataForGlassLocationAndName.location ==
this.location
);
const matchingGlassParts =
matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
return (
matchingGlassParts.filter(
(part) => part.color == this.selectedTint
) ?? []
);
},
// Creates a map of the feature list data in the correct Name/Value
@ -153,7 +176,9 @@ export default {
},
PartDataFromApi() {
return this.$store.getters.pageData(this.$route.query.fmgPage) ?? {};
return (
this.$store.getters.pageData(this.$route.query.fmgPage) ?? {}
);
},
},
methods: {
@ -190,7 +215,8 @@ export default {
// Check if only a single part is present for the tint and set the v-model if it is.
AutoSelectIfSinglePart() {
if (this.partsForSelectedTint?.length == 1) {
this.selectedPartNumber = this.partsForSelectedTint[0].partNumber;
this.selectedPartNumber =
this.partsForSelectedTint[0].partNumber;
}
},
@ -199,7 +225,7 @@ export default {
this.$nextTick(() => {
if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX
this.selectedTint = this.alreadyPopulatedPartsData?.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color;
this.selectedTint = this.modelValue?.color
}
});
},
@ -207,8 +233,8 @@ export default {
watch: {
selectedTint() {
this.AutoSelectIfSinglePart();
}
}
},
},
};
</script>

13
src/layouts/vehicle-parts/vehicle-parts.spec.js
View file

@ -183,7 +183,16 @@ describe("vehicle-parts.vue", () => {
await nextTick();
//Assert
expect(wrapper.vm.selectedGlassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } });
expect(wrapper.vm.selectedGlassParts).toEqual({
"Rear-Stationary": {
partNumber: "DB12209YPYNOEM",
description: "heated glass, solar, 1 hole",
color: "Gray Tint Privacy",
requiresRecalibration: false,
requiresCapabilityQuestions: false,
childParts: null
}
});
});
test("User had part questions > BackButtonAction triggers a router.navigateWithoutSaving change with correct scenario", async () => {
@ -509,6 +518,8 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
wrapper.vm.$refs.loadingModal.showModal = jest.fn();
// wrapper.vm.$refs.onSubmit = jest.fn();
// wrapper.vm.$refs.onInvalidSubmit = jest.fn();
return { wrapper, apiPromise };
}

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

@ -1,52 +1,45 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts">
<loadingModal ref="loadingModal"/>
<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner
ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<funnelSubHeader
ref="funnelSubHeader"
cmsWidgetName="FunnelSubHeaderWidget"
/>
<div class="fade-on-route-transition sub-container make-tall">
<div class="prevent-squish my-5">
<div class="row">
<div class="col">
<alert
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false"
/>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts">
<loadingModal ref="loadingModal" />
<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner
ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="prevent-squish my-5">
<div class="row">
<div class="col">
<alert
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
</div>
</div>
</div>
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.location}-${item.name}`"
v-model="selectedGlassParts[item.location + '-' + item.name]"
:location="item.location"
:name="item.name"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="isForwardActionDisabled"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.location}-${item.name}`"
v-model="selectedGlassParts[item.location + '-' + item.name]"
:location="item.location"
:name="item.name"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData"
/>
</div>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="isForwardActionDisabled"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div>
</div>
</Form>
</Form>
</template>
<script>
@ -57,17 +50,14 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import alert from "@/ux-components/alert/alert";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
// Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import { Form } from "vee-validate";
import store from "@/store";
import { storeMutations } from "@/constants/store-mutations.js";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { assertParenthesizedExpression } from "@babel/types";
export default {
name: "vehicle-parts",
@ -77,25 +67,25 @@ export default {
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.setCmsContent(resultMap.cmsContent);
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
})
);
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
})
);
});
},
data() {
@ -111,11 +101,13 @@ export default {
this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
);
},
selectedGlassPartNumbers () {
selectedGlassPartNumbers() {
// Compile all selected parts from the page.
const numberArray = [];
for (let glassPart of Object.values(this.selectedGlassParts)) {
if (glassPart?.partNumber) { numberArray.push(glassPart.partNumber) }
if (glassPart?.partNumber) {
numberArray.push(glassPart.partNumber);
}
}
return numberArray;
},
@ -132,7 +124,8 @@ export default {
ColorAnswerText: p.color,
FeatureAnswers: [
{
FeatureAnswerText: p.description === "" ? p.color : p.description,
FeatureAnswerText:
p.description === "" ? p.color : p.description,
PartNumber: p.partNumber,
},
],
@ -156,16 +149,17 @@ export default {
methods: {
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
return store.getters.damage.isRepair != null && store.getters.pageData(fmgPageValues.VEHICLE_PARTS) &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0;
return (
store.getters.damage.isRepair != null &&
store.getters.pageData(fmgPageValues.VEHICLE_PARTS) &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0
);
},
async forwardButtonAction() {
const matchedParts = [];
// Match them to the parts from the API.
for (let [key, value] of Object.entries(
this.PartsFromApi.partsOrQuestions
)) {
for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
for (let [partKey, partValue] of Object.entries(value.parts)) {
const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
@ -177,7 +171,7 @@ export default {
matchedParts.push({
location: value.location,
name: value.name,
parts: [currentPart]
parts: [currentPart],
});
}
}
@ -188,7 +182,11 @@ export default {
throw new Error("Could not match any parts to the selected parts");
}
await this.dispatchStoreAction(this.storeActions.RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED, matchedParts, false);
await this.dispatchStoreAction(
this.storeActions.RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED,
matchedParts,
false
);
// Navigate to the next page
this.navigateForward(matchedParts);
@ -196,20 +194,18 @@ export default {
LoadInitialPartsData() {
const partsData = this.PartsFromApi;
const alreadyPopulatedPartsData =
this.alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts === null
? []
: this.$store.getters.lineItems.glassParts;
? []
: this.$store.getters.lineItems.glassParts;
partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model.
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber;
Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
this.selectedGlassParts[g.location + "-" + g.name] = {
[g.location]: [partNumber],
};
this.selectedGlassParts[g.location + "-" + g.name] = p;
}
});
});

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

@ -23,7 +23,7 @@ export default {
name: "style-question",
data() {
return {
styles: Array,
styles: [],
};
},
props: {

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

@ -21,7 +21,7 @@ export default {
name: "year-question",
data() {
return {
years: Array,
years: [],
};
},
props: {

3
src/mixins/analytics-mixin.js
View file

@ -48,6 +48,7 @@ export default {
pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
const currentPageName = getPageNameByQueryString();
const labelToLog = getValueToLog(label, valueToLogType);
const eventToBePushed = {
'event': GaEvents.GENERIC_EVENT,
'category': category,
@ -140,7 +141,7 @@ export default {
noSession() {
return getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000';
}
},
},
computed: {
analyticsPageEvents() {

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

@ -6,12 +6,11 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
data() {
return {
cmsContentByWidget: {}
cmsContentByWidget: {},
};
},
methods: {
@ -19,7 +18,9 @@ export default {
this.$root.cmsContentByWidget = cmsContent;
},
getCmsContent(widgetName, fieldName) {
return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : '';
return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName]
? this.$root.cmsContentByWidget[widgetName][fieldName]
: "";
},
dispatchStoreAction(type, payload, encodePayload = true) {
// Encode the payload if required
@ -32,7 +33,7 @@ export default {
savePageDataToStore(page, data) {
store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
},
onSubmit() { }, // DO NOT REMOVE; needed to prevent default form submit behavior
onSubmit() {}, // DO NOT REMOVE; needed to prevent default form submit behavior. Cannot use .prevent modifier for vee-validate Form
onInvalidSubmit({ values, errors, results }) {
// identify the first error field and put focus on it
// get error names array
@ -49,14 +50,17 @@ export default {
return footerInfoBox ? footerInfoBox.offsetHeight : 0;
},
async getZipCodeData(zipCode) {
const serviceZipValidationResponse = await this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: zipCode });
return {
isValid: serviceZipValidationResponse.data.isValid,
const serviceZipValidationResponse = await this.dispatchStoreAction(
storeActions.VALIDATE_ZIP,
{ zip: zipCode }
);
return {
isValid: serviceZipValidationResponse.data.isValid,
isServiceable: serviceZipValidationResponse.data.isServiceable,
state: serviceZipValidationResponse.data.state
state: serviceZipValidationResponse.data.state,
};
}
},
},
computed: {
storeActions() {
@ -74,13 +78,13 @@ export default {
routerParams() {
return routerParams;
},
queryStrings(){
queryStrings() {
return queryStrings;
},
dynamicStrings(){
dynamicStrings() {
return dynamicStrings;
},
cssClassNameForCmsWidget(){
cssClassNameForCmsWidget() {
return "widget-name-" + this.cmsWidgetName;
},
},

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

@ -0,0 +1,36 @@
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,
buttonImage: String,
buttonImageId: String,
altText: {
type: String,
default: "",
},
textPosition: String,
screenReaderOnlyText: String,
isWide: Boolean,
},
computed: {
selectedValue: {
get() {
return this.modelValue;
},
set(e) {
if (this.preHandleAnswerChange) {
this.preHandleAnswerChange(e);
}
this.$emit("update:modelValue", e);
},
},
},
};

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

@ -0,0 +1,317 @@
import { mount } from "@vue/test-utils";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import listButton from "@/ux-components/list-button/list-button";
import listCard from "@/ux-components/list-card/list-card";
import radio from "@/ux-components/radio/radio";
describe("input-button-wrapper-mixin", () => {
describe("mouse clicks", () => {
describe("checkbox", () => {
test("click on both => both are selected", async () => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: true,
},
});
// Act
const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper",
});
const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1);
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
expect(wrapper.vm.value).toEqual([]);
await inputButtonOne.find("input").trigger("click");
await inputButtonTwo.find("input").trigger("click");
// Assert
expect(wrapper.vm.value).toEqual(["value1", "value2"]);
});
test("click input 1, 2, 1 => only input 2 selected", async () => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: true,
},
});
// Act
const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper",
});
const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1);
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
expect(wrapper.vm.value).toEqual([]);
await inputButtonOne.find("input").trigger("click");
await inputButtonTwo.find("input").trigger("click");
await inputButtonOne.find("input").trigger("click");
// Assert
expect(wrapper.vm.value).toEqual(["value2"]);
});
});
describe("radio", () => {
test("click on both => last clicked is selected", async () => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: false,
},
});
// Act
const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper",
});
const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1);
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
expect(wrapper.vm.value).toEqual("");
await inputButtonOne.find("input").trigger("click");
await inputButtonTwo.find("input").trigger("click");
// Assert
expect(wrapper.vm.value).toEqual("value2");
});
test("click input 1, 2, 1 => input 1 is selected", async () => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: false,
},
});
// Act
const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper",
});
const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1);
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
expect(wrapper.vm.value).toEqual("");
await inputButtonOne.find("input").trigger("click");
await inputButtonTwo.find("input").trigger("click");
await inputButtonOne.find("input").trigger("click");
// Assert
expect(wrapper.vm.value).toEqual("value1");
});
});
});
describe("initial values", () => {
describe("checkbox", () => {
const defaultCheckedCases = [
[["value2"], false, true],
[["value1", "value2"], true, true],
[["value1"], true, false],
[[], false, false],
];
test.each(defaultCheckedCases)(
"initial value is %s => correct input buttons are selected",
async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: true,
initialValue: modelValue,
},
});
// Act
const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper",
});
const inputs = wrapper.findAll("input");
const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1);
// Assert
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
expect(wrapper.vm.value).toEqual(modelValue);
}
);
});
describe("radio", () => {
const defaultCheckedCases = [
["", false, false],
["value1", true, false],
["value2", false, true],
[[], false, false],
];
test.each(defaultCheckedCases)(
"initial value is %s => correct input buttons are selected",
async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: false,
initialValue: modelValue,
},
});
// Act
const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper",
});
const inputs = wrapper.findAll("input");
const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1);
// Assert
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
expect(wrapper.vm.value).toEqual(modelValue);
}
);
});
});
// shared checks between components that use input-button-wrapper-mixin
describe("shared checks", () => {
const inputButtonComponents = [listButtonHorizontal, listButton, listCard, radio];
test.each(inputButtonComponents.map((x) => [x.name, x]))(
"%s - should return input type checkbox if isMultiSelect is true",
async (name, inputButtonComponent) => {
// Act
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
component: inputButtonComponent,
mockData: {
propsData: {
isMultiSelect: true,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
}
);
test.each(inputButtonComponents.map((x) => [x.name, x]))(
"%s - return input type radio if isMultiSelect is false or not specified",
async (name, inputButtonComponent) => {
// Act
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
component: inputButtonComponent,
mockData: {
propsData: {
isMultiSelect: false,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
}
);
const selectedValues = ["something", ["test"]];
inputButtonComponents.forEach((inputButtonComponent) => {
test.each(selectedValues)(
`${inputButtonComponent.name} with selectedValue %s - should emit button value on click`,
async (selectedValue) => {
// Act
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
component: inputButtonComponent,
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",
},
},
});
// Act
wrapper.vm.selectedValue = selectedValue;
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue);
}
);
});
});
});
function setupMocksForComponentsUsingInputButtonWrapperMixin({ mockData, component }) {
const wrapper = mount(component, {
...mockData,
propsData: {
...mockData.propsData,
groupName: "my-group",
modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
value: "4",
},
mixins: [inputButtonWrapperMixin],
});
return { wrapper };
}
function setupBaseInputButtonWrapper({ mockData = {} }) {
baseInputButton.methods.pushClickEventToGA = jest.fn();
const baseInputButtonWrapper = {
name: "baseInputButtonWrapper",
components: { baseInputButton },
template: '<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
mixins: [inputButtonWrapperMixin],
};
let parentComponentTemplate = `<div>`;
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value1" />`;
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value2" />`;
parentComponentTemplate += `</div>`;
const wrapper = mount(
{
data() {
return {
value: mockData.initialValue ?? (mockData.isMultiSelect ? [] : ""),
$route: {
query: {
fmgPage: "myPage",
},
},
};
},
template: parentComponentTemplate,
components: { baseInputButtonWrapper },
},
{}
);
return { wrapper };
}

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

@ -177,7 +177,6 @@ export default {
// if single parts only
const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);
// save to store lineItems.glassParts
// TODO KO
self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
self.$refs.loadingModal.showModal();

2
src/router/index.js
View file

@ -238,7 +238,7 @@ function navigateToUrl(url, optionalQuery = {}) {
for (const queryKey in optionalQuery) {
externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
}
window.location.assign(externalUrl);
}

468
src/store/index.js
View file

@ -1,4 +1,4 @@
import { createStore } from "vuex";
import { createStore, Store } from "vuex";
import { endpoints } from "@/constants/endpoints.js";
import { storeMutations } from "@/constants/store-mutations";
import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/session-helper";
@ -50,22 +50,22 @@ const getDefaultState = () => {
glassToReplace: null,
partQuestionAnswers: null,
moldingQuestionAnswers: null,
capabilityQuestionAnswers: null
capabilityQuestionAnswers: null,
},
lineItems: {
glassParts: null
glassParts: null,
},
payment: {
isInsurance: null,
insuranceCoverage: {
isVerified: null
}
isVerified: null,
},
},
referralNumber: null,
referralDate: null,
referralCorrelationId: null,
accountNumber: 0,
eon: null
eon: null,
},
applicationUser: {
eventBus: [],
@ -76,9 +76,15 @@ const getDefaultState = () => {
crmCustomerId: null,
lastPageVisited: null,
experiments: [],
triggeredSiteEntry: false
triggeredSiteEntry: false,
},
}
// gaClickInformation: {
// currentlySelectedValues: {},
// firedGaClickEventValues: {},
// lastFocusedInputGroup: "",
// wasLastFocusedInputMultiselect: undefined,
// },
};
};
export const state = getDefaultState();
@ -195,7 +201,6 @@ export const mutations = {
state.order.customer.emailAddress = customerEmailAddress;
},
updateVehicle(state, vehicleInfo) {
state.order.vehicle.year = vehicleInfo.year;
state.order.vehicle.make = vehicleInfo.make;
state.order.vehicle.model = vehicleInfo.model;
@ -209,7 +214,8 @@ export const mutations = {
state.order.vehicle.imageColor = vehicleInfo.imageVifColor;
},
updateRegistration(state, registrationInfo) {
state.order.vehicle.registration.licensePlate = registrationInfo?.licensePlate;
state.order.vehicle.registration.licensePlate =
registrationInfo?.licensePlate;
state.order.vehicle.registration.address = registrationInfo?.address;
state.order.vehicle.registration.city = registrationInfo?.city;
state.order.vehicle.registration.state = registrationInfo?.state;
@ -235,7 +241,7 @@ export const mutations = {
state.applicationUser.crmCustomerId = crmCustomerId;
},
updateLastPageVisited(state, lastPageVisited) {
state.applicationUser.lastPageVisited = lastPageVisited
state.applicationUser.lastPageVisited = lastPageVisited;
},
// EVENT BUS MUTATIONS
addEventToBus(state, event) {
@ -244,8 +250,7 @@ export const mutations = {
removeEventFromBus(state, eventData) {
const matchedEvent = state.applicationUser.eventBus.find(
({ category, subCategory }) =>
category === eventData.category &&
subCategory === eventData.subCategory
category === eventData.category && subCategory === eventData.subCategory
);
const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);
@ -331,7 +336,7 @@ export const mutations = {
state: orderInformation.vehicle.registration.state,
zipCode: orderInformation.vehicle.registration.zipCode,
licensePlate: orderInformation.vehicle.registration.licensePlateNumber,
}
},
});
state.order.damage.glassToReplace = orderInformation.damage.glassToReplace;
@ -340,13 +345,18 @@ export const mutations = {
state.order.lineItems.glassParts = orderInformation.parts;
state.order.accountNumber = orderInformation.accountNumber;
state.order.serviceLocation.address = orderInformation.serviceLocation.streetAddress,
state.order.serviceLocation.city = orderInformation.serviceLocation.city,
state.order.serviceLocation.state = orderInformation.serviceLocation.state,
state.order.serviceLocation.zipCode = orderInformation.serviceLocation.zipCode;
(state.order.serviceLocation.address =
orderInformation.serviceLocation.streetAddress),
(state.order.serviceLocation.city =
orderInformation.serviceLocation.city),
(state.order.serviceLocation.state =
orderInformation.serviceLocation.state),
(state.order.serviceLocation.zipCode =
orderInformation.serviceLocation.zipCode);
state.order.payment.isInsurance = orderInformation.IsInsuranceOrder;
state.order.payment.insuranceCoverage.isVerified = orderInformation?.insuranceInfo.coverageVerified;
state.order.payment.insuranceCoverage.isVerified =
orderInformation?.insuranceInfo.coverageVerified;
state.order.customer.emailAddress = orderInformation.customer.emailAddress;
state.applicationUser.experiments = orderInformation.experiments;
@ -356,8 +366,23 @@ export const mutations = {
},
updateTriggeredSiteEntry(state, wasSiteEntryTriggered) {
state.applicationUser.triggeredSiteEntry = wasSiteEntryTriggered;
}
}
},
// START GA click event mutations
// updateCurrentlySelectedValues(state, groupName, value) {
// state.gaClickInformation.currentlySelectedValues[groupName] = value;
// },
// updateFiredGaClickEventValues(state, groupName, value) {
// state.gaClickInformation.firedGaClickEventValues[groupName] = value;
// },
// updateLastFocusedInputGroup(state, groupName) {
// state.gaClickInformation.lastFocusedInputGroup = groupName;
// },
// updateWasLastFocusedInputMultiselect(state, wasLastFocusedInputMultiselect) {
// state.gaClickInformation.wasLastFocusedInputMultiselect =
// wasLastFocusedInputMultiselect;
// },
// END GA click event mutations
};
// Export Getters
export const getters = {
@ -373,7 +398,9 @@ export const getters = {
eventBus: (state) => state.applicationUser.eventBus,
damage: (state) => state.order.damage,
lineItems: (state) => state.order.lineItems,
pageData: (state) => (page) => { return state.applicationUser.pageData[page]; },
pageData: (state) => (page) => {
return state.applicationUser.pageData[page];
},
applicationUser: (state) => state.applicationUser,
order: (state) => state.order,
payment: (state) => state.order.payment,
@ -390,7 +417,8 @@ export const getters = {
funnelServiceState: state.order.serviceLocation.state,
funnelServiceZipCode: state.order.serviceLocation.zipCode,
funnelParentAccountNumber: state.order.accountNumber,
funnelIsCoverageVerified: state.order.payment.insuranceCoverage.isVerified,
funnelIsCoverageVerified:
state.order.payment.insuranceCoverage.isVerified,
funnelHasRecalibrationPart: getHasRecalibrationPart(state),
funnelSelectedMultiGlass: state.order.damage.glassToReplace?.length > 1,
funnelSelectedWindshieldGlass: getNonFalseValuesOfPropertyInArrayOfObjects(state.order.damage.glassToReplace, "glassLocation").includes(damageLocationsSelected.WINDSHIELD),
@ -403,8 +431,12 @@ export const getters = {
funnelOrderPartTypes: [...getNonFalseValuesOfPropertyInArrayOfObjects(state.order.lineItems.glassParts, "recalibrationType"), ...getNonFalseValuesOfPropertyInArrayOfObjects(state.order.lineItems.otherParts, "recalibrationType")],
}
},
experimentSettings: (state) => state.applicationUser.experiments.map(x => x.settings).reduce((r, c) => Object.assign(r, c), {}) ?? {}
}
experimentSettings: (state) =>
state.applicationUser.experiments
.map((x) => x.settings)
.reduce((r, c) => Object.assign(r, c), {}) ?? {},
// gaClickInformation: (state) => state.gaClickInformation,
};
function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) {
return (array ?? []).map(x => x[propertyName]).filter(x => x);
@ -412,7 +444,6 @@ function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) {
// Export Actions
export const actions = {
// Vehicle API Actions
getVehicleYears(context) {
return globalMethods.callHttpClient({
@ -443,11 +474,14 @@ export const actions = {
endpoint: endpoints.LookupVinByPlate.url,
payload: {
licensePlate: licensePlate,
licenseState: licenseState
licenseState: licenseState,
},
});
},
lookupVinByAddress(context, { licenseLastName, licenseStreetAddress, licenseZip, licenseState }) {
lookupVinByAddress(
context,
{ licenseLastName, licenseStreetAddress, licenseZip, licenseState }
) {
return globalMethods.callHttpClient({
method: endpoints.LookupVinByAddress.method,
endpoint: endpoints.LookupVinByAddress.url,
@ -455,7 +489,7 @@ export const actions = {
licenseLastName: licenseLastName,
licenseStreetAddress: licenseStreetAddress,
licenseZip: licenseZip,
licenseState: licenseState
licenseState: licenseState,
},
});
},
@ -489,10 +523,22 @@ export const actions = {
})
.then((response) => {
context.commit(storeMutations.UPDATE_CAR_ID, response.data.carId);
context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, response.data.category);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, response.data.imageUrl);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, response.data.imageVifNumber);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, response.data.imageVifColor);
context.commit(
storeMutations.UPDATE_VEHICLE_CATEGORY,
response.data.category
);
context.commit(
storeMutations.UPDATE_VEHICLE_IMAGE_URL,
response.data.imageUrl
);
context.commit(
storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,
response.data.imageVifNumber
);
context.commit(
storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,
response.data.imageVifColor
);
return response;
});
},
@ -506,8 +552,8 @@ export const actions = {
validateZip(context, { zip }) {
return globalMethods.callHttpClient({
methods: endpoints.ValidateZip.method,
endpoint: `${endpoints.ValidateZip.url}/${zip}`
})
endpoint: `${endpoints.ValidateZip.url}/${zip}`,
});
},
// Dependency Actions
@ -522,7 +568,7 @@ export const actions = {
},
resetRegistrationAndDependencies(context) {
context.commit(storeMutations.RESET_REGISTRATION_STATE);
context.commit(storeMutations.RESET_GLASS_PARTS_STATE)
context.commit(storeMutations.RESET_GLASS_PARTS_STATE);
},
resetPartsAndDependencies(context) {
context.commit(storeMutations.RESET_GLASS_PARTS_STATE);
@ -578,8 +624,8 @@ export const actions = {
assignmentId: experiment.assignmentId,
sessionKey: sessionKey,
pageName: pageName,
}
}
},
},
});
},
@ -587,13 +633,28 @@ export const actions = {
updateStoreWithSaveSessionResponse(context, { referralNumber, referralDate, referralCorrelationId, eon, accountNumber, savedSessionId, crmCustomerId }) {
context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
context.commit(storeMutations.UPDATE_REFERRAL_DATE, referralDate);
context.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, referralCorrelationId);
context.commit(
storeMutations.UPDATE_REFERRAL_CORRELATION_ID,
referralCorrelationId
);
context.commit(storeMutations.UPDATE_EON, eon);
context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, accountNumber);
context.commit(storeMutations.UPDATE_SAVED_SESSION_ID, savedSessionId);
context.commit(storeMutations.UPDATE_CRM_CUSTOMER_ID, crmCustomerId);
},
logPageView(context, { userId, sessionKey, pageName, sessionId, action, event, shouldUseSessionId, experimentsForUser }) {
logPageView(
context,
{
userId,
sessionKey,
pageName,
sessionId,
action,
event,
shouldUseSessionId,
experimentsForUser,
}
) {
var payload = {
userId: userId,
sessionKey: sessionKey,
@ -603,17 +664,31 @@ export const actions = {
action: action,
event: event,
shouldUseSessionId: shouldUseSessionId,
experimentsForUser: experimentsForUser
experimentsForUser: experimentsForUser,
};
return globalMethods.callHttpClient({
method: endpoints.LogPageView.method,
endpoint: endpoints.LogPageView.url,
payload: payload,
logApiCall: false
logApiCall: false,
});
},
logCustomEvent(context, { userId, sessionKey, pageName, sessionId, category, action, label, value, shouldUseSessionId, experimentsForUser }) {
logCustomEvent(
context,
{
userId,
sessionKey,
pageName,
sessionId,
category,
action,
label,
value,
shouldUseSessionId,
experimentsForUser,
}
) {
var payload = {
userId: userId,
sessionKey: sessionKey,
@ -625,14 +700,14 @@ export const actions = {
label: label,
value: value,
shouldUseSessionId: shouldUseSessionId,
experimentsForUser: experimentsForUser
experimentsForUser: experimentsForUser,
};
return globalMethods.callHttpClient({
method: endpoints.LogCustomEvent.method,
endpoint: endpoints.LogCustomEvent.url,
payload: payload,
logApiCall: false
logApiCall: false,
});
},
initializeSession(context, { userId, sessionId, userAgent, referrer }) {
@ -644,22 +719,28 @@ export const actions = {
userAgent: userAgent,
operatorId: "WEB",
userName: "SafeliteConceptFunnel",
referrer: referrer
referrer: referrer,
};
return globalMethods.callHttpClient({
method: endpoints.InitializeSession.method,
endpoint: endpoints.InitializeSession.url,
payload: payload,
logApiCall: false
logApiCall: false,
});
},
// Misc Actions
setReferralInformation(context, { referralNumber, referralDate, referralCorrelationId, eon }) {
setReferralInformation(
context,
{ referralNumber, referralDate, referralCorrelationId, eon }
) {
context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
context.commit(storeMutations.UPDATE_REFERRAL_DATE, referralDate);
context.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, referralCorrelationId);
context.commit(
storeMutations.UPDATE_REFERRAL_CORRELATION_ID,
referralCorrelationId
);
context.commit(storeMutations.UPDATE_EON, eon);
},
@ -667,11 +748,14 @@ export const actions = {
return globalMethods.callHttpClient({
method: endpoints.GetExperimentsByUser.method,
endpoint: `${endpoints.GetExperimentsByUser.url}/${userId}`,
payload: {}
payload: {},
});
},
async runExperimentsForTrigger(context, { userId, triggerEvent, triggerValue }) {
async runExperimentsForTrigger(
context,
{ userId, triggerEvent, triggerValue }
) {
if (triggerEvent == experimentTriggers.SITE_ENTRY) {
context.commit(storeMutations.UPDATE_TRIGGERED_SITE_ENTRY, true);
}
@ -681,7 +765,7 @@ export const actions = {
userId: userId,
triggerEvent: triggerEvent,
triggerValue: triggerValue,
experimentOrder: context.getters.experimentOrder
experimentOrder: context.getters.experimentOrder,
};
const response = await globalMethods.callHttpClient({
@ -690,7 +774,10 @@ export const actions = {
payload: payload,
});
context.commit(storeMutations.UPDATE_EXPERIMENTS, response.data.experiments);
context.commit(
storeMutations.UPDATE_EXPERIMENTS,
response.data.experiments
);
},
getEvoxImage(context, { relativeUrl }) {
@ -719,7 +806,7 @@ export const actions = {
carId: carId,
glassPieces: glassArray ?? [],
zip: zipCode,
vin: vin
vin: vin,
},
});
@ -755,7 +842,7 @@ export const actions = {
glassPieces: glassArray,
answerResults: resultsArray,
zip: zipCode,
vin: vin
vin: vin,
},
});
@ -773,24 +860,31 @@ export const actions = {
return globalMethods.callHttpClient({
method: endpoints.GetCapabilityQuestions.method,
endpoint: `${endpoints.GetCapabilityQuestions.url}/${carId}/${partNumber}`,
})
});
},
getPartFromCapabilityQuestionAnswer(context, location) {
const pageData = context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
getPartFromCapabilityQuestionAnswer(context, glassLocation) {
const pageData = context.getters.pageData(
fmgPageValues.CAPABILITY_QUESTIONS
);
const part = pageData.partsOrQuestions.find(x => x.location === location).parts[0];
const capabilityQuestionAnswers = context.getters.damage.capabilityQuestionAnswers;
const capabilityQuestionAnswersForPart = capabilityQuestionAnswers.find(x => x.location === location);
const part = pageData.partsOrQuestions.find(
(x) => x.location === glassLocation
).parts[0];
const capabilityQuestionAnswers =
context.getters.damage.capabilityQuestionAnswers;
const capabilityQuestionAnswersForPart = capabilityQuestionAnswers.find(
(x) => x.location === glassLocation
);
return globalMethods.callHttpClient({
method: endpoints.GetPartFromCapabilityAnswer.method,
endpoint: endpoints.GetPartFromCapabilityAnswer.url,
payload: {
part,
capabilityAnswerResults: capabilityQuestionAnswersForPart
}
})
capabilityAnswerResults: capabilityQuestionAnswersForPart,
},
});
},
// Session API Actions
@ -825,21 +919,21 @@ export const actions = {
damage: {
numberOfChips: damage.numberOfChips,
glassToReplace: damage.glassToReplace,
isRepair: damage.isRepair
isRepair: damage.isRepair,
},
customer: {
emailAddress: order.customer.emailAddress,
},
lineItems: {
glassParts: lineItems.glassParts
glassParts: lineItems.glassParts,
},
serviceLocation: {
streetAddress: order.serviceLocation.address,
city: order.serviceLocation.city,
state: order.serviceLocation.state,
zipCode: order.serviceLocation.zipCode
zipCode: order.serviceLocation.zipCode,
},
referralNumber: order.referralNumber?.toString(), // TODO It'd be nice to save these as strings in the first place
referralNumber: order.referralNumber?.toString(), // TODO It'd be nice to save these as strings in the first place
referralDate: order.referralDate,
accountNumber: order.accountNumber?.toString(),
existingPromoCode: null,
@ -874,8 +968,7 @@ export const actions = {
// Vehicle
saveVehicleYear(context, year) {
//Reset dependent state when changing
//Reset dependent state when changing
if (context.state.order.vehicle.year !== year) {
context.commit(storeMutations.UPDATE_MAKE, null);
context.commit(storeMutations.UPDATE_MODEL, null);
@ -896,7 +989,6 @@ export const actions = {
}
},
saveVehicleMake(context, make) {
//Reset dependent state when changing
if (context.state.order.vehicle.make !== make) {
context.commit(storeMutations.UPDATE_MODEL, null);
@ -917,8 +1009,7 @@ export const actions = {
}
},
saveVehicleModel(context, model) {
//Reset dependent state when changing
//Reset dependent state when changing
if (context.state.order.vehicle.model !== model) {
context.commit(storeMutations.UPDATE_STYLE, null);
context.commit(storeMutations.UPDATE_CAR_ID, null);
@ -937,7 +1028,7 @@ export const actions = {
}
},
saveVehicleStyle(context, style) {
//Reset dependent state when changing
//Reset dependent state when changing
if (context.state.order.vehicle.style !== style) {
context.commit(storeMutations.UPDATE_CAR_ID, null);
context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
@ -954,20 +1045,32 @@ export const actions = {
context.commit(storeMutations.UPDATE_STYLE, style);
}
},
saveVehicleDamage(context, { isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount }) {
saveVehicleDamage(
context,
{ isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount }
) {
const selectedGlassPassedInSorted = selectedGlassToReplace.slice().sort();
const isGlassToReplaceTheSame = (context.state.order.damage.glassToReplace?.length === selectedGlassToReplace.length)
&& context.state.order.damage.glassToReplace
const isGlassToReplaceTheSame =
context.state.order.damage.glassToReplace?.length ===
selectedGlassToReplace.length &&
context.state.order.damage.glassToReplace
.slice()
.sort()
.every((obj, index) => obj.glassLocation === selectedGlassPassedInSorted[index].glassLocation && obj.glassName === selectedGlassPassedInSorted[index].glassName);
const isWindshieldRepairTheSame = isWindshieldRepair === context.state.order.damage.isRepair;
const isChipCountTheSame = Array.isArray(selectedWindshieldChipCount) //TODO: fix the underlying components so this is never an array
? selectedWindshieldChipCount[0] === context.state.order.damage.numberOfChips
: selectedWindshieldChipCount === context.state.order.damage.numberOfChips;
.every(
(obj, index) =>
obj.glassLocation ===
selectedGlassPassedInSorted[index].glassLocation &&
obj.glassName === selectedGlassPassedInSorted[index].glassName
);
const isWindshieldRepairTheSame =
isWindshieldRepair === context.state.order.damage.isRepair;
const isDamageChanging = !isGlassToReplaceTheSame || !isWindshieldRepairTheSame || (isWindshieldRepair && !isChipCountTheSame);
const isChipCountTheSame = selectedWindshieldChipCount === context.state.order.damage.numberOfChips;
const isDamageChanging =
!isGlassToReplaceTheSame ||
!isWindshieldRepairTheSame ||
(isWindshieldRepair && !isChipCountTheSame);
if (isDamageChanging) {
//Reset dependent state when changing
@ -975,14 +1078,23 @@ export const actions = {
// Save new values
context.commit(storeMutations.UPDATE_IS_REPAIR, isWindshieldRepair);
context.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, isWindshieldRepair ? parseInt(selectedWindshieldChipCount) : null);
context.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, selectedGlassToReplace);
context.commit(
storeMutations.UPDATE_NUMBER_OF_CHIPS,
isWindshieldRepair ? parseInt(selectedWindshieldChipCount) : null
);
context.commit(
storeMutations.UPDATE_GLASS_TO_REPLACE,
selectedGlassToReplace
);
}
},
// Vin lookup
saveVinLookup(context, { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
//Reset dependent state when changing
saveVinLookup(
context,
{ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }
) {
//Reset dependent state when changing
if (vehicleInfo.vin !== context.state.order.vehicle.vin) {
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
@ -996,10 +1108,15 @@ export const actions = {
context.commit(storeMutations.UPDATE_REGISTRATION, registrationInfo);
}
},
saveRegistrationLicensePlateLookup(context, { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
//Reset dependent state when changing
if (registrationInfo?.licensePlate !== context.state.order.vehicle.registration?.licensePlate) {
saveRegistrationLicensePlateLookup(
context,
{ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }
) {
//Reset dependent state when changing
if (
registrationInfo?.licensePlate !==
context.state.order.vehicle.registration?.licensePlate
) {
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
if (!isSelectedGlassAvailableForVehicle) {
@ -1012,10 +1129,25 @@ export const actions = {
context.commit(storeMutations.UPDATE_REGISTRATION, registrationInfo);
}
},
saveRegistrationAddressLookup(context, { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
//Reset dependent state when changing
if (registrationInfo?.address !== context.state.order.vehicle.registration?.address || registrationInfo?.city !== context.state.order.vehicle.registration?.city || registrationInfo?.state !== context.state.order.vehicle.registration?.state || registrationInfo?.zipCode !== context.state.order.vehicle.registration?.zipCode || registrationInfo?.firstName !== context.state.order.vehicle.registration?.firstName || registrationInfo?.lastName !== context.state.order.vehicle.registration?.lastName) {
saveRegistrationAddressLookup(
context,
{ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }
) {
//Reset dependent state when changing
if (
registrationInfo?.address !==
context.state.order.vehicle.registration?.address ||
registrationInfo?.city !==
context.state.order.vehicle.registration?.city ||
registrationInfo?.state !==
context.state.order.vehicle.registration?.state ||
registrationInfo?.zipCode !==
context.state.order.vehicle.registration?.zipCode ||
registrationInfo?.firstName !==
context.state.order.vehicle.registration?.firstName ||
registrationInfo?.lastName !==
context.state.order.vehicle.registration?.lastName
) {
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
if (!isSelectedGlassAvailableForVehicle) {
@ -1030,72 +1162,141 @@ export const actions = {
},
savePartQuestionAnswers(context, partQuestionAnswersArray) {
// if part question answers have changed, reset subsequent question answers
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(context.getters.damage.partQuestionAnswers, "result");
const sortedPartQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(partQuestionAnswersArray, "result")
const havePartQuestionAnswersChanged = sortedPreviousResultsArray?.length !== sortedPartQuestionAnswersArray.length ||
!sortedPreviousResultsArray?.every((x, i) => x.result === sortedPartQuestionAnswersArray[i].result);
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
context.getters.damage.partQuestionAnswers,
"result"
);
const sortedPartQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(
partQuestionAnswersArray,
"result"
);
const havePartQuestionAnswersChanged =
sortedPreviousResultsArray?.length !==
sortedPartQuestionAnswersArray.length ||
!sortedPreviousResultsArray?.every(
(x, i) => x.result === sortedPartQuestionAnswersArray[i].result
);
if (havePartQuestionAnswersChanged) {
context.commit(storeMutations.UPDATE_GLASS_PARTS, null);
context.commit(storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS, null);
context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, null);
context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.VEHICLE_PARTS, data: null });
context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.MOLDING_QUESTIONS, data: null });
context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.CAPABILITY_QUESTIONS, data: null });
context.commit(storeMutations.UPDATE_PAGE_DATA, {
page: fmgPageValues.VEHICLE_PARTS,
data: null,
});
context.commit(storeMutations.UPDATE_PAGE_DATA, {
page: fmgPageValues.MOLDING_QUESTIONS,
data: null,
});
context.commit(storeMutations.UPDATE_PAGE_DATA, {
page: fmgPageValues.CAPABILITY_QUESTIONS,
data: null,
});
}
//Save new values
context.commit(storeMutations.UPDATE_PART_QUESTION_ANSWERS, partQuestionAnswersArray);
context.commit(
storeMutations.UPDATE_PART_QUESTION_ANSWERS,
partQuestionAnswersArray
);
},
resetMoldingAndCapabilityQuestionAnswersIfNeeded(context, matchedParts) {
const partsOrQuestionsDataToCompareWith = context.getters.pageData(fmgPageValues.MOLDING_QUESTIONS)?.partsOrQuestions ?? context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS)?.partsOrQuestions ?? [];
const partsOrQuestionsDataToCompareWith =
context.getters.pageData(fmgPageValues.MOLDING_QUESTIONS)
?.partsOrQuestions ??
context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS)
?.partsOrQuestions ??
[];
function getAllPartNumbers(partsOrQuestions) {
return partsOrQuestions[0]?.parts
? [...partsOrQuestions].map(glass => glass.parts).flat().map(part => part.partNumber).filter(partNumber => !partNumber.toUpperCase().includes("FEE")).sort().join(",")
: []
? [...partsOrQuestions]
.map((glass) => glass.parts)
.flat()
.map((part) => part.partNumber)
.filter((partNumber) => !partNumber.toUpperCase().includes("FEE"))
.sort()
.join(",")
: [];
}
const previouslySelectedPartNumbers = getAllPartNumbers(partsOrQuestionsDataToCompareWith);
const previouslySelectedPartNumbers = getAllPartNumbers(
partsOrQuestionsDataToCompareWith
);
const currentlySelectedPartNumbers = getAllPartNumbers(matchedParts);
const haveSelectedVehiclePartsChanged = previouslySelectedPartNumbers !== currentlySelectedPartNumbers;
const haveSelectedVehiclePartsChanged =
previouslySelectedPartNumbers !== currentlySelectedPartNumbers;
if (haveSelectedVehiclePartsChanged) {
context.commit(storeMutations.UPDATE_GLASS_PARTS, null);
context.commit(storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS, null);
context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, null);
context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.MOLDING_QUESTIONS, data: null });
context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.CAPABILITY_QUESTIONS, data: null });
context.commit(storeMutations.UPDATE_PAGE_DATA, {
page: fmgPageValues.MOLDING_QUESTIONS,
data: null,
});
context.commit(storeMutations.UPDATE_PAGE_DATA, {
page: fmgPageValues.CAPABILITY_QUESTIONS,
data: null,
});
}
},
saveMoldingQuestionAnswers(context, moldingQuestionAnswers) {
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(context.getters.damage.moldingQuestionAnswers, "partNum");
const sortedMoldingQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(moldingQuestionAnswers, "partNum");
const haveMoldingQuestionAnswersChanged = sortedPreviousResultsArray?.length !== sortedMoldingQuestionAnswersArray.length ||
!sortedPreviousResultsArray?.every((x, i) => x.partNum === sortedMoldingQuestionAnswersArray[i].partNum);
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
context.getters.damage.moldingQuestionAnswers,
"partNum"
);
const sortedMoldingQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(
moldingQuestionAnswers,
"partNum"
);
const haveMoldingQuestionAnswersChanged =
sortedPreviousResultsArray?.length !==
sortedMoldingQuestionAnswersArray.length ||
!sortedPreviousResultsArray?.every(
(x, i) => x.partNum === sortedMoldingQuestionAnswersArray[i].partNum
);
if (haveMoldingQuestionAnswersChanged) {
context.commit(storeMutations.UPDATE_GLASS_PARTS, null);
context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, null);
context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.CAPABILITY_QUESTIONS, data: null });
context.commit(storeMutations.UPDATE_PAGE_DATA, {
page: fmgPageValues.CAPABILITY_QUESTIONS,
data: null,
});
}
//Save new values
context.commit(storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS, moldingQuestionAnswers);
context.commit(
storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS,
moldingQuestionAnswers
);
},
saveCapabilityQuestionAnswers(context, capabilityQuestionAnswers) {
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(context.getters.damage.capabilityQuestionAnswers, "result");
const sortedCapabilityQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(capabilityQuestionAnswers, "result");
const haveCapabilityQuestionAnswersChanged = sortedPreviousResultsArray?.length !== sortedCapabilityQuestionAnswersArray.length ||
!sortedPreviousResultsArray?.every((x, i) => x.result === sortedCapabilityQuestionAnswersArray[i].result);
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
context.getters.damage.capabilityQuestionAnswers,
"result"
);
const sortedCapabilityQuestionAnswersArray =
sortArrayOfObjectsByPropertyValue(capabilityQuestionAnswers, "result");
const haveCapabilityQuestionAnswersChanged =
sortedPreviousResultsArray?.length !==
sortedCapabilityQuestionAnswersArray.length ||
!sortedPreviousResultsArray?.every(
(x, i) => x.result === sortedCapabilityQuestionAnswersArray[i].result
);
if (haveCapabilityQuestionAnswersChanged) {
context.commit(storeMutations.UPDATE_GLASS_PARTS, null);
}
//Save new values
context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, capabilityQuestionAnswers);
context.commit(
storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS,
capabilityQuestionAnswers
);
},
// Misc order actions
saveServiceLocation(context, serviceLocationInfo) {
@ -1107,7 +1308,6 @@ export const actions = {
saveVin(context, { isSelectedGlassAvailableForVehicle, vehicleInfo }) {
//Reset dependent state when changing
if (vehicleInfo.vin !== context.state.order.vehicle.vin) {
if (!isSelectedGlassAvailableForVehicle) {
context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
@ -1122,12 +1322,11 @@ export const actions = {
},
clearVin(context) {
context.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
}
}
},
};
export default createStore({
plugins: [createPersistedState()],
// IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
// * The CMS can reference the fields by name
// * Return users may have a previous "version" of the model, and we don't want
@ -1150,21 +1349,18 @@ function getHasRecalibrationPart(state) {
} else { // Has 'requiresRecalibration' but no 'recalibrationType' at all
return true;
}
} else { // Does not have 'requiresRecalibration'
} else {
// Does not have 'requiresRecalibration'
return false;
}
}
function sortArrayOfObjectsByPropertyValue(arrayOfObjects, propertyName) {
if (!arrayOfObjects) return null;
return arrayOfObjects.sort((a, b) => {
if (a[propertyName] < b[propertyName])
return -1;
else if (a[propertyName] > b[propertyName])
return 1;
else
return 0;
})
}
if (a[propertyName] < b[propertyName]) return -1;
else if (a[propertyName] > b[propertyName]) return 1;
else return 0;
});
}

1
src/styles/common-error-styles.scss
View file

@ -3,7 +3,6 @@ html {
&.list-button,
&.list-card,
&.list-card.list-button {
border: none;
color: $red;
input[type=checkbox]:focus + label,
input[type=radio]:focus + label {

27
src/ux-components/button-main/button-main.vue
View file

@ -2,15 +2,17 @@
<button
:aria-disabled="isDisabled"
class="btn d-flex align-items-center py-3 px-4 delay"
:class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
@click="clicked()"
>
:class="[
isPrimary ? 'btn-primary' : 'btn-secondary',
isFloat ? 'float-end' : '',
isLoaderDisplayed ? 'has-loader' : '',
]"
@click="clicked">
<span class="m-0">{{ this.buttonText }}</span>
<loader
class="ms-2"
v-if="isLoaderDisplayed"
v-bind:class="[this.loaderColor, this.loaderPosition]"
/>
v-bind:class="[this.loaderColor, this.loaderPosition]" />
</button>
</template>
@ -33,11 +35,16 @@ export default {
};
},
methods: {
removeLoader(){
removeLoader() {
this.isLoaderDisplayed = false;
},
clicked() {
this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.buttonText, true);
this.pushEventToGA(
this.$route.query[this.queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
this.buttonText,
true
);
if (!this.isDisabled) {
this.isLoaderDisplayed = true;
this.$emit("click-event");
@ -98,7 +105,8 @@ export default {
background: $blue-700;
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&.delay {// fixes flicker while transitioning between states
&.delay {
// fixes flicker while transitioning between states
transition: background 0s 0s ease-in-out;
}
}
@ -137,7 +145,8 @@ export default {
color: $white;
@include blue-gradient;
}
&.delay {// fixes flicker while transitioning between states
&.delay {
// fixes flicker while transitioning between states
transition: background 0s 0s ease-in-out;
}
}

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

@ -1,271 +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 { GaActions } from "@/constants/analytics";
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 'radio-fancy' class", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isCashOrInsurance: true,
},
},
});
// Assert
const label = wrapper.find("label");
expect(label.classes()).toContain("radio-fancy");
});
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: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
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: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
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: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
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 };
}

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

@ -1,345 +1,222 @@
<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>
<baseInputButton
v-bind="$props"
:buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': isCashOrInsurance },
]"
v-model="selectedValue">
<div
class="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 { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
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: "",
name: "listButtonHorizontal",
mixins: [inputButtonWrapperMixin],
props: {
isCashOrInsurance: Boolean,
},
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];
components: {
baseInputButton,
},
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();
}
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
},
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"] {
position: absolute;
height: 0;
opacity: 0;
width: 0;
&:focus-visible+label {
box-shadow: 0 0 0 2.5px $blue;
z-index: 2;
}
&:focus+label {
box-shadow: 0 0 0 2.5px $blue;
z-index: 3;
}
&:checked+label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
outline: none;
z-index: 2;
}
&:checked:focus+label {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked+label p:first-child {
font-weight: 500;
}
}
label {
outline: none;
position: relative;
background: $white;
transition: all 150ms linear;
border: 1px solid $gray-500;
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;
}
}
// 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;
}
}
label:hover {
background-color: $blue-700;
color: $white;
box-shadow: none;
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
height: 0;
opacity: 0;
width: 0;
position: absolute;
height: 0;
opacity: 0;
width: 0;
&:focus-visible+label {
border-radius: 0.5rem;
z-index: 2;
}
.list-button-horizontal-content {
cursor: pointer;
}
&:focus+label {
z-index: 3;
}
&:focus-visible + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 2;
}
&:checked+label {
&:focus + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 3;
}
&:checked + .list-button-horizontal-content {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
outline: none;
z-index: 2;
}
&:checked:focus + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-horizontal-content p:first-child {
font-weight: 500;
}
}
.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;
}
position: relative;
background: $white;
transition: all 150ms linear;
border: 1px solid $gray-500;
border-radius: 0;
width: 100%;
color: $gray-600;
&:checked:focus+label {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 4 !important;
}
}
&:checked+label p:first-child {
font-weight: 500;
}
+ p {
display: none;
}
span {
font-size: 0.875rem;
}
}
}
&.list-button-horizontal {
height: 100%;
label {
height: 100%;
// Cash/Insurance option radio button styling
&.radio-fancy {
.list-button-horizontal-content {
border: 1px solid $blue-700;
z-index: 2;
color: $blue;
span {
font-size: 1rem;
font-weight: 500;
}
}
.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 + .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 {
height: 100%;
label {
height: 100%;
}
}
}
}
.col {
&:first-of-type {
.list-button-horizontal {
label {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
}
&:last-of-type {
.list-button-horizontal {
label {
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;
&:first-of-type {
.list-button-horizontal {
.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
&: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;
&:last-of-type {
.list-button-horizontal {
.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 + .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.radio-fancy {
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;
}
}
}
&:checked:focus+label {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
}
}
}
</style>

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

@ -1,263 +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: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
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: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
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: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
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 };
}

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

@ -1,242 +1,130 @@
<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>
<baseInputButton
v-bind="$props"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
v-model="selectedValue">
<div
:aria-label="buttonLabel"
class="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 { useField } from "vee-validate";
import { toRef } from "vue";
import loader from "@/ux-components/loader/loader";
import { queryStrings } from "@/constants/query-strings";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
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,
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];
name: "listButton",
mixins: [inputButtonWrapperMixin],
props: {
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: {
type: String,
default: "right",
},
},
displayLoader() {
this.isLoaderDisplayed = true;
data() {
return {
isLoaderDisplayed: false,
};
},
handleInputChange() {
if(!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
},
preHandleAnswerChange() {
if (this.selectingInitiatesLoad) {
this.displayLoader();
}
},
},
handleKeyupArrow() {
if (this.isMultiSelect) {
return; // Prevent arrow keys from doing anything if element is a checkbox
}
components: {
loader,
baseInputButton,
},
triggerButton() {
if(this.selectingInitiatesLoad) {
this.displayLoader();
this.handleCheckChange();
}
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
},
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: {
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" scoped>
.list-group {
&.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
height: 0;
opacity: 0;
.loader {
position: absolute;
}
&.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
&:focus-visible + label {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + label {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + label {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked:focus + label {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + label p,
&:checked + label span {
font-weight: 500;
}
&:checked + label span:nth-child(2) {
font-weight: 400;
&:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
}
}
.list-button-content {
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;
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;
}
}
span {
&.small {
font-size: 0.75rem;
color: $gray-550;
}
}
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
}
cursor: pointer;
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
}
cursor: pointer;
}
+ p {
display: none;
}
}
+ p {
display: none;
}
}
}
</style>

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

@ -1,12 +1,12 @@
import { shallowMount } from "@vue/test-utils";
import { mount } from "@vue/test-utils";
import listCard from "./list-card";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
describe("list-card.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
it("Should return input type checkbox if isMultiSelect is true", () => {
// Act
const wrapper = shallowMount(listCard, {
const wrapper = mount(listCard, {
propsData: {
isMultiSelect: true,
buttonLabel: "Windshield",
@ -14,6 +14,7 @@ describe("list-card.vue", () => {
groupID: "checkbox-demo-1",
groupName: "Checkbox 1",
buttonImage: "windshield-damage.svg",
value: "test value",
},
});
@ -22,9 +23,9 @@ describe("list-card.vue", () => {
expect(input.attributes().type).toEqual("checkbox");
});
it("Should return primary label text", async () => {
it("Should return primary label text", () => {
// Act
const wrapper = shallowMount(listCard, {
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
@ -32,6 +33,7 @@ describe("list-card.vue", () => {
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
value: "test value",
},
});
@ -40,9 +42,9 @@ describe("list-card.vue", () => {
expect(paragraph.text()).toEqual("Windshield");
});
it("Should return secondary (sub) label text", async () => {
it("Should return secondary (sub) label text", () => {
// Act
const wrapper = shallowMount(listCard, {
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
@ -51,6 +53,7 @@ describe("list-card.vue", () => {
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
value: "test value",
},
});
@ -59,28 +62,9 @@ describe("list-card.vue", () => {
expect(paragraph.text()).toEqual("Test");
});
it("Should return value used for various text settings including the label 'for' and input id", async () => {
it("Should return input group name used for radio or checkbox", () => {
// 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",
},
});
// Assert
const label = wrapper.find("label");
expect(label.attributes().for).toEqual("List Card Checkbox");
});
it("Should return input group name used for radio or checkbox", async () => {
// Act
const wrapper = shallowMount(listCard, {
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
@ -89,6 +73,7 @@ describe("list-card.vue", () => {
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
value: "test value",
},
});
@ -97,9 +82,9 @@ describe("list-card.vue", () => {
expect(input.attributes().name).toEqual("radio 1");
});
it("Should return aria-required state", async () => {
it("Should return aria-required state", () => {
// Act
const wrapper = shallowMount(listCard, {
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
@ -108,6 +93,7 @@ describe("list-card.vue", () => {
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
value: "test value",
},
});
@ -116,9 +102,9 @@ describe("list-card.vue", () => {
expect(input.attributes()["aria-required"]).toEqual("true");
});
it("Should return flex row classes if isWide is true", async () => {
it("Should return flex row classes if isWide is true", () => {
// Act
const wrapper = shallowMount(listCard, {
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
@ -129,17 +115,21 @@ describe("list-card.vue", () => {
isRequired: true,
isWide: true,
buttonLabelSubCopy: "",
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"]);
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 and checkboxTop if buttonLabelSubCopy is true", async () => {
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is provided", () => {
// Act
const wrapper = shallowMount(listCard, {
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
@ -150,17 +140,23 @@ describe("list-card.vue", () => {
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", "checkboxTop"]);
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 column classes if isWide is false", async () => {
it("Should return flex column classes if isWide is false", () => {
// Act
const wrapper = shallowMount(listCard, {
const wrapper = mount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
@ -170,165 +166,15 @@ describe("list-card.vue", () => {
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-column", "pt-4", "pb-3"]);
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 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: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
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: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
selectingInitiatesLoad: true,
},
});
// Assert
wrapper.vm.triggerButton();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
expect(wrapper.vm.displayLoader).toBeCalled;
});
});

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

@ -1,400 +1,252 @@
<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' : '',
]"
@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 }}
</p>
<baseInputButton
v-bind="$props"
:buttonWrapperClasses="[
'list-card w-100 rounded-3 d-flex align-items-center h-100',
{ horizontal: isWide },
]"
v-model="selectedValue">
<div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
: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>
<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>
</label>
</div>
</div>
</baseInputButton>
</template>
<script>
import { useField } from "vee-validate";
import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings";
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: "",
name: "listCard",
mixins: [inputButtonWrapperMixin],
components: {
baseInputButton,
},
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;
}
},
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";
}
computed: {
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();
}
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
},
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 {
border: 1px solid $gray-500;
border: 1px solid $gray-500;
&.invalid {
//Red border if invalid
border: 1px solid $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%;
}
&: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;
}
}
&.has-error {
//Red border if invalid
border: 1px solid $red;
}
&: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;
// 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"] {
+ label::before {
content: "";
position: relative;
margin: 0 0.5rem 0 0;
order: 1;
}
position: absolute;
&:checked + label::after {
content: "";
margin: -0.15rem 0 0 0;
left: 1.175rem;
}
+ .list-card-content {
outline: none;
display: block;
position: relative;
&:checked + label {
p {
color: $black;
font-weight: 500;
&:hover {
cursor: pointer;
}
p {
color: $gray-600;
text-align: center;
&.sub-copy {
color: $gray-550;
}
}
}
.sub-copy {
color: $gray-600;
font-weight: 400;
&:checked + .list-card-content {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem;
}
}
&:focus-visible + .list-card-content {
box-shadow: 0 0 0 2.5px $blue;
border-radius: 0.5rem;
}
&:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $blue;
border-radius: 0.5rem;
}
&:checked:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-card-content {
p {
color: $black;
font-weight: 500;
}
+ label {
outline: none;
min-height: 48px;
color: $gray-600;
img {
margin-bottom: 0;
.sub-copy {
color: $gray-600;
font-weight: 400;
}
}
p {
color: $gray-600;
text-align: left;
&.sub-copy {
color: $gray-550;
}
+ .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;
}
}
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>

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

@ -27,6 +27,7 @@ export default {
<style lang="scss">
.loader {
display: flex;
//Open an overlay to prevent page interaction
&:before {
content: "";
@ -56,16 +57,13 @@ export default {
}
//Spinner position
&.center {
position: absolute;
right: 50%;
transform: translateX(50%);
}
&.right {
position: absolute;
right: 1rem;
}
&.left {
position: absolute;
left: 1rem;
}
//Spinner color

157
src/ux-components/radio/radio.spec.js
View file

@ -1,117 +1,66 @@
import { shallowMount } from "@vue/test-utils";
import { mount } from "@vue/test-utils";
import radio from "./radio";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
describe("radio.vue", () => {
it("Should return group name", async () => {
// Act
const wrapper = shallowMount(radio, {
propsData: {
groupName: "radio-button-test",
},
it("Should have correct group name", async () => {
// Arrange
let { wrapper } = setupMocks({
mountOptionsMockData: {
propsData: {
groupName: "radio-button-test",
value: "test value",
},
},
});
// Act
const input = wrapper.find("input");
// Assert
expect(input.attributes().name).toEqual("radio-button-test");
});
// Assert
const input = wrapper.find("input");
it("Should have correct label text", async () => {
// Act
let { wrapper } = setupMocks({
mountOptionsMockData: {
propsData: {
buttonLabel: "label text",
value: "test value",
},
},
});
// Expect
expect(input.attributes().name).toEqual("radio-button-test");
});
// Arrange
const paragraph = wrapper.find("p");
it("Should return checkbox id", async () => {
// Act
const wrapper = shallowMount(radio, {
propsData: {
buttonID: "Radio ID",
},
// Assert
expect(paragraph.text()).toEqual("label text");
});
// Assert
const input = wrapper.find("input");
it("Should have correct screenreader-only text", async () => {
// Act
let { wrapper } = setupMocks({});
// Expect
expect(input.attributes().id).toEqual("Radio ID");
});
// Arrange
await wrapper.setProps({
screenReaderOnlyText: "screenreader text",
value: "test value",
});
const paragraph = wrapper.find(".sr-only");
it("Should return label text", async () => {
// Act
const wrapper = shallowMount(radio, {
propsData: {
buttonLabel: "label text",
},
// Assert
expect(paragraph.text()).toEqual("screenreader text");
});
// Assert
const paragraph = wrapper.find("p");
expect(paragraph.text()).toEqual("label text");
});
it("Should return label text", async () => {
// Act
const wrapper = shallowMount(radio, {
propsData: {
screenReaderOnlyText: "screenreader text",
},
});
// Assert
const paragraph = wrapper.find("span");
expect(paragraph.text()).toEqual("screenreader text");
});
it("Should emit button value on click", async () => {
// Act
const wrapper = shallowMount(radio, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
buttonLabel: "Windshield",
value: "List Card Checkbox",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);;
expect(wrapper.vm.pushEventToGA).toHaveBeenCalled();
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
// Act
const wrapper = shallowMount(radio, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
modelValue: ["List Card Checkbox"],
value: "Car-Front",
selectedValues: "Car-Front"
},
});
// Assert
expect(wrapper.componentVM.checkValue).toEqual(true);
});
});
function setupMocks({ mountOptionsMockData = {} }) {
const wrapper = mount(radio, {
...mountOptionsMockData,
mixins: [inputButtonWrapperMixin],
});
return { wrapper };
}

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

@ -1,140 +1,79 @@
<template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
<input
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChange"
:checked="checkValue"
:validationRules="validationRules"
/>
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText
}}</span>
</label>
</div>
<baseInputButton
v-bind="$props"
buttonWrapperClasses="ui-radio form-check"
inputClasses="form-check-input"
v-model="selectedValue">
<div class="d-flex align-items-start form-check-label">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText
}}</span>
</div>
</baseInputButton>
</template>
<script>
import { useField } from "vee-validate";
import { queryStrings } from "@/constants/query-strings";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "radio",
props: {
groupName: String,
buttonLabel: String,
buttonID: String,
isRequired: Boolean,
value: {
type: [String, Number],
default: "",
name: "radio",
mixins: [inputButtonWrapperMixin],
components: {
baseInputButton,
},
screenReaderOnlyText: String,
selectedValues: String,
hasError: Boolean,
validationRules: String,
valueToLogType: String,
},
data() {
return {
checkValue: Boolean,
};
},
created() {
if (this.selectedValues) {
this.checkValue = this.selectedValues === this.value;
this.handleCheckChange();
} else{
this.checkValue = false;
}
},
methods: {
handleCheckChange() {
this.handleChange(this.value);
const emitEvent = {
checkValue: this.checkValue,
value: this.value.toString(),
buttonID: this.buttonID && this.buttonID.toString(),
};
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
},
},
setup(props) {
const inputType = "radio";
const {
value: inputValue,
handleChange,
errors,
} = useField(props.groupName, props.validationRules,
{
type: inputType,
checkedValue: props.value,
});
return {
handleChange,
errors,
};
},
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.form-check {
position: relative;
position: relative;
.form-check-input {
border: 1px solid $gray-500;
border-radius: 50%;
margin-right: 0.5rem;
&:checked {
background-color: $white;
background-size: 71%;
background-position: center;
border: 1px solid $blue;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+ label {
p {
font-weight: 500;
font-size: .875rem;
color: $black;
}
}
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
}
&, & + label {
margin-top: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
&:hover {
.form-check-input {
box-shadow: 0 0 0 4px $blue-300;
border: 1px solid $gray-500;
border-radius: 50%;
margin-right: 0.5rem;
opacity: 1;
height: 1em;
width: 1em;
&:checked {
background-color: $white;
background-size: 71%;
background-position: center;
border: 1px solid $blue;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+ .form-check-label {
p {
font-weight: 500;
font-size: 0.875rem;
color: $black;
}
}
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
}
&,
& + .form-check-label {
margin-top: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
&:hover {
.form-check-input {
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
font-weight: 400;
font-size: 0.875rem;
color: $gray-600;
}
}
p {
font-weight: 400;
font-size: .875rem;
color: $gray-600;
}
}
</style>