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

Merge remote-tracking branch 'origin/develop' into feature/CSR-731

Browse source
This commit is contained in:
Scott Kiener 2022-11-03 08:37:13 -04:00
commit 2ae16d3f01
27 changed files with 607 additions and 334 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitattributes vendored Normal file
View file

@ -0,0 +1,3 @@
*.js text eol=lf
*.vue text eol=lf
*.scss text eol=lf

112
azure-pipelines.yml
View file

@ -20,13 +20,15 @@ resources:
- container: node
image: packagerepository.sagaws.net:8082/safelite/node-build:15
- container: awscli
image: packagerepository.sagaws.net:8082/safelite/awscli-build:3.7
image: packagerepository.sagaws.net:8082/safelite/awscli2-build:3.9
- container: prettier-node
image: packagerepository.sagaws.net:8082/safelite/prettier-node-build:18
repositories:
- repository: AzureDevOps
type: github
name: Safelite/AzureDevOps
endpoint: Safelite
ref: refs/tags/t5.5.31
ref: refs/tags/t5.5.40
variables:
- group: Digital-Infrastructure
@ -35,17 +37,25 @@ variables:
stages:
# PR's
- ${{ if eq(variables['Build.Reason'], 'PullRequest') }}:
- stage: TestPr
displayName: Run Unit Tests For PullRequest
jobs:
- template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps
parameters:
nodeContainer: node
npmLocation: $(Build.SourcesDirectory)
testResultsFile: junit.xml
summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml
- stage: TestFormat
displayName: Test Code Format
jobs:
- job: checkFormatting
displayName: Check formatting
container: prettier-node
steps:
- bash: prettier --check "$(Build.SourcesDirectory)/src/**/*.(js|vue)"
displayName: Run Prettier check
- stage: TestPr
displayName: Run Unit Tests For PullRequest
jobs:
- template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps
parameters:
nodeContainer: node
npmLocation: $(Build.SourcesDirectory)
testResultsFile: junit.xml
summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml
- ${{ else }}:
# Dev Build/Deploy
- stage: Dev
@ -91,8 +101,66 @@ stages:
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
cfDistributionId: $(cfDistributionId)
cfDistributionId: $(vueCfDistributionId)
- template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
parameters:
awsCliContainer: awscli
distributionId: $(apiCfDistributionId)
paths: /fmg/*
awsProfile: $(devDeploymentProfile)
# Test Build/Deploy
- stage: Test
condition: eq(variables['Build.SourceBranch'], variables['test-branch'] )
variables:
- group: FixMyGlassTest
jobs:
- deployment: testBuildDeployment
displayName: Build and Deploy FMG - Test
environment: digitalCloud-sys
container: node
workspace:
clean: all
strategy:
runOnce:
deploy:
steps:
- checkout: self
clean: true
- template: templates/digital/step-build-vue.yml@AzureDevOps
parameters:
buildOutputDir: dist
environment: Test
- template: templates/digital/step-deploy-vue.yml@AzureDevOps
parameters:
artifactName: vueDistTest
awsProfile: $(sysDeploymentProfile)
outputPath: /fmg/
deployBuckets:
safelite-sys-fmg-us-east-1:
clearFolder: true
deployFolder: ""
region: us-east-1
safelite-sys-fmg-us-east-2:
clearFolder: true
deployFolder: ""
region: us-east-2
appDeployVariables:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
__VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
cfDistributionId: $(vueCfDistributionId)
- template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
parameters:
awsCliContainer: awscli
distributionId: $(apiCfDistributionId)
paths: /fmg/*
awsProfile: $(sysDeploymentProfile)
# QA Build/Deploy
- stage: Qa
condition: eq(variables['Build.SourceBranch'], variables['qa-branch'] )
@ -137,7 +205,13 @@ stages:
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
cfDistributionId: $(cfDistributionId)
cfDistributionId: $(vueCfDistributionId)
- template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
parameters:
awsCliContainer: awscli
distributionId: $(apiCfDistributionId)
paths: /fmg/*
awsProfile: $(qaDeploymentProfile)
# Prod Build/Deploy
- stage: Prod
@ -183,7 +257,13 @@ stages:
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
cfDistributionId: $(cfDistributionId)
cfDistributionId: $(apiCfDistributionId)
- template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
parameters:
awsCliContainer: awscli
distributionId: $(apiCfDistributionId)
paths: /fmg/*
awsProfile: $(prodDeploymentProfile)
- template: templates/digital/auto-tag.yml@AzureDevOps
parameters:
dependsOn: prodBuildDeployment

7
src/common-components/modal/modal.vue
View file

@ -16,7 +16,7 @@
aria-label="Close"></button>
</div>
<div class="modal-body ps-4 pe-4 pt-5 pb-4">
<img :src="this.ModalImage" alt="" />
<img :src="this.ModalImage" class="w-100 mb-4" alt="" />
<h5 class="mb-4" v-html="this.ModalHeadline"></h5>
<p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
<p class="mb-0" v-html="this.ModalBodyText"></p>
@ -91,11 +91,6 @@ export default {
margin-bottom: 0;
}
}
img {
display: flex;
margin: 0 auto 1.5rem auto;
max-width: 100%;
}
}
}
&.modal-dialog-centered {

10
src/helpers/damage-helper.js
View file

@ -19,7 +19,7 @@ export function getDamageString() {
if (damageLocations.length > 1) {
returnString = "match";
} else {
switch (damageLocations[0]?.location) {
switch (damageLocations[0]?.glassLocation) {
case "Windshield":
returnString = "windshield";
break;
@ -37,7 +37,7 @@ export function getDamageString() {
export function getIsWindshieldOnly() {
const damageLocations = store.getters.damage.glassToReplace;
const returnString =
damageLocations.length === 1 && damageLocations[0]?.location === "Windshield"
damageLocations.length === 1 && damageLocations[0]?.glassLocation === "Windshield"
? "windshield"
: "glass";
return returnString;
@ -60,9 +60,9 @@ export async function isGlassAvailableForCarId(carId) {
for (const option of currentGlassOptions) {
if (
!newGlassOptions.data[optionsMap[option.location]].availableReplacementOptions.includes(
option.name
)
!newGlassOptions.data[
optionsMap[option.glassLocation]
].availableReplacementOptions.includes(option.glassName)
) {
return false;
}

22
src/helpers/damage-helper.spec.js
View file

@ -18,8 +18,8 @@ describe("damage-helper.js", () => {
it("Should return match when multiple selected damage options are in the store", () => {
// Arrange / Act
store.getters.damage.glassToReplace = [
{ location: "Windshield", name: "windshield" },
{ location: "Passenger", name: "sideWindow" },
{ glassLocation: "Windshield", glassName: "windshield" },
{ glassLocation: "Passenger", glassName: "sideWindow" },
];
const damage = getDamageString();
@ -32,7 +32,9 @@ describe("damage-helper.js", () => {
describe("damage-helper.js", () => {
it("Should return windshield when Windshield is the only selected damage option in the store", () => {
// Arrange / Act
store.getters.damage.glassToReplace = [{ location: "Windshield", name: "windshield" }];
store.getters.damage.glassToReplace = [
{ glassLocation: "Windshield", glassName: "windshield" },
];
const damage = getDamageString();
@ -44,7 +46,9 @@ describe("damage-helper.js", () => {
describe("damage-helper.js", () => {
it("Should return side window when Driver or Passenger is the only selected damage option in the store", () => {
// Arrange / Act
store.getters.damage.glassToReplace = [{ location: "Passenger", name: "sideWindow" }];
store.getters.damage.glassToReplace = [
{ glassLocation: "Passenger", glassName: "sideWindow" },
];
const damage = getDamageString();
@ -56,7 +60,7 @@ describe("damage-helper.js", () => {
describe("damage-helper.js", () => {
it("Should return rear window when Rear is the only selected damage option in the store", () => {
// Arrange / Act
store.getters.damage.glassToReplace = [{ location: "Rear", name: "rear" }];
store.getters.damage.glassToReplace = [{ glassLocation: "Rear", glassName: "rear" }];
const damage = getDamageString();
@ -68,7 +72,9 @@ describe("damage-helper.js", () => {
describe("damage-helper.js", () => {
it("Should return true if no mismatches between each array exist", async () => {
// Arrange
store.getters.damage.glassToReplace = [{ location: "Windshield", name: "windshield" }];
store.getters.damage.glassToReplace = [
{ glassLocation: "Windshield", glassName: "windshield" },
];
// Act
const isGlassAvailable = await isGlassAvailableForCarId();
@ -81,7 +87,9 @@ describe("damage-helper.js", () => {
describe("damage-helper.js", () => {
it("Should return false if any mismatches between each array exist", async () => {
// Arrange
store.getters.damage.glassToReplace = [{ location: "Windshield", name: "sideWindow" }];
store.getters.damage.glassToReplace = [
{ glassLocation: "Windshield", glassName: "sideWindow" },
];
const isGlassAvailable = await isGlassAvailableForCarId();

1
src/helpers/unit-test-helper.js
View file

@ -92,6 +92,7 @@ export const cookies = {
skey: "12345",
};
// Removes test cookies for testing cookie-helper and order-helper
export function removeAllTestCookies() {
Object.keys(cookies).forEach((key) => {
document.cookie = `${key}=;Max-Age=0;`;

20
src/layouts/capability-questions/capability-questions.vue
View file

@ -18,7 +18,7 @@
<div v-for="(glass, i) in capabilityQuestionsData" :key="glass.key">
<questionChain
ref="questionChain"
v-model="selectedAnswers[glass.location + '-' + glass.name]"
v-model="selectedAnswers[glass.glassLocation + '-' + glass.glassName]"
:questionData="glass.capabilityQuestions"
:glassIndex="i"
v-if="showThisQuestionChain(glass, i)"
@ -99,7 +99,7 @@ export default {
},
windshieldPart() {
return this.pageData.partsOrQuestions.find(
(x) => x.location === damageLocationsSelected.WINDSHIELD
(x) => x.glassLocation === damageLocationsSelected.WINDSHIELD
);
},
windshieldPartInfo() {
@ -152,8 +152,8 @@ export default {
);
return {
location: glass.location,
name: glass.name,
glassLocation: glass.glassLocation,
glassName: glass.glassName,
result: glass.answerData.answerResult,
result1: glass.answerData.answerResult,
result2: selectedAnswerResult2,
@ -178,12 +178,12 @@ export default {
let partsOrQuestions = this.pageData.partsOrQuestions;
for (let answer of capabilityQuestionsAnswersArray) {
const correspondingPart = partsOrQuestions.find(
(partOrQuestion) => partOrQuestion.location === answer.location
(partOrQuestion) => partOrQuestion.glassLocation === answer.glassLocation
);
const partFromCapabilityQuestionAnswer = (
await this.dispatchStoreAction(
storeActions.GET_PART_FROM_CAPABILITY_QUESTION_ANSWER,
answer.location,
answer.glassLocation,
false
)
).data;
@ -280,8 +280,8 @@ export default {
// Update the key to re-render this part's question-chain component
this.capabilityQuestionsData[gpIndex].key =
this.capabilityQuestionsData[gpIndex].location +
this.capabilityQuestionsData[gpIndex].name +
this.capabilityQuestionsData[gpIndex].glassLocation +
this.capabilityQuestionsData[gpIndex].glassName +
Date.now().toString();
// handle suppressing downstream in this question chain
@ -392,8 +392,8 @@ export default {
// Update the key to re-render this part's question-chain component
this.capabilityQuestionsData[gpIndex].key =
this.capabilityQuestionsData[gpIndex].location +
this.capabilityQuestionsData[gpIndex].name +
this.capabilityQuestionsData[gpIndex].glassLocation +
this.capabilityQuestionsData[gpIndex].glassName +
Date.now().toString();
}
});

1
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -51,7 +51,6 @@
<alert
v-if="displayNonServiceableZipAlert"
class="my-3"
cmsWidgetName="AlertNonServiceableZipWidget"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
alertClass="alert-danger"

18
src/layouts/molding-questions/molding-questions.vue
View file

@ -19,7 +19,7 @@
<div v-for="(glass, i) in moldingQuestionsData" :key="glass.key">
<questionChain
ref="questionChain"
v-model="selectedAnswers[glass.location + '-' + glass.name]"
v-model="selectedAnswers[glass.glassLocation + '-' + glass.glassName]"
:questionData="glass.questions"
:glassIndex="i"
v-if="showThisQuestionChain(glass, i)"
@ -135,8 +135,8 @@ export default {
async forwardButtonAction() {
const questionAnswersArray = this.moldingQuestionsData.map((glass) => {
return {
location: glass.location,
name: glass.name,
glassLocation: glass.glassLocation,
glassName: glass.glassName,
partNum: glass.answerData.answerResult,
answeredQuestions: glass.answerData.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart,
@ -160,8 +160,8 @@ export default {
for (let answer of questionAnswersArray) {
partsOrQuestions.find((partOrQuestion) => {
return (
partOrQuestion.location === answer.location &&
partOrQuestion.name === answer.name
partOrQuestion.glassLocation === answer.glassLocation &&
partOrQuestion.glassName === answer.glassName
);
}).parts[0].childParts = [
{
@ -256,8 +256,8 @@ export default {
// Update the key to re-render this part's question-chain component
this.moldingQuestionsData[gpIndex].key =
this.moldingQuestionsData[gpIndex].location +
this.moldingQuestionsData[gpIndex].name +
this.moldingQuestionsData[gpIndex].glassLocation +
this.moldingQuestionsData[gpIndex].glassName +
Date.now().toString();
// handle suppressing downstream in this question chain
@ -368,8 +368,8 @@ export default {
// Update the key to re-render this part's question-chain component
this.moldingQuestionsData[gpIndex].key =
this.moldingQuestionsData[gpIndex].location +
this.moldingQuestionsData[gpIndex].name +
this.moldingQuestionsData[gpIndex].glassLocation +
this.moldingQuestionsData[gpIndex].glassName +
Date.now().toString();
}
});

14
src/layouts/part-questions/part-questions.vue
View file

@ -19,7 +19,7 @@
<div v-for="(glass, i) in partsQuestionsData" :key="glass.key">
<questionChain
ref="questionChain"
v-model="selectedAnswers[glass.location + '-' + glass.name]"
v-model="selectedAnswers[glass.glassLocation + '-' + glass.glassName]"
:questionData="glass.questions"
:glassIndex="i"
v-if="showThisQuestionChain(glass, i)"
@ -130,8 +130,8 @@ export default {
async forwardButtonAction() {
const questionAnswersArray = this.partsQuestionsData.map((glass) => {
return {
location: glass.location,
name: glass.name,
glassLocation: glass.glassLocation,
glassName: glass.glassName,
result: glass.answerData.answerResult,
answeredQuestions: glass.answerData.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart,
@ -243,8 +243,8 @@ export default {
// Update the key to re-render this part's question-chain component
this.partsQuestionsData[gpIndex].key =
this.partsQuestionsData[gpIndex].location +
this.partsQuestionsData[gpIndex].name +
this.partsQuestionsData[gpIndex].glassLocation +
this.partsQuestionsData[gpIndex].glassName +
Date.now().toString();
// handle suppressing downstream in this question chain
@ -355,8 +355,8 @@ export default {
// Update the key to re-render this part's question-chain component
this.partsQuestionsData[gpIndex].key =
this.partsQuestionsData[gpIndex].location +
this.partsQuestionsData[gpIndex].name +
this.partsQuestionsData[gpIndex].glassLocation +
this.partsQuestionsData[gpIndex].glassName +
Date.now().toString();
}
});

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

@ -80,8 +80,8 @@ describe("vehicle-damage.vue", () => {
const partsData = {
partsOrQuestions: [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: null,
partQuestions: [
{
@ -154,10 +154,10 @@ describe("vehicle-damage.vue", () => {
});
const expectedGlassToReplace = [
{ location: "Windshield", name: "Single" },
{ location: "Driver", name: "Back" },
{ location: "Passenger", name: "Quarter" },
{ location: "Rear", name: "Stationary" },
{ glassLocation: "Windshield", glassName: "Single" },
{ glassLocation: "Driver", glassName: "Back" },
{ glassLocation: "Passenger", glassName: "Quarter" },
{ glassLocation: "Rear", glassName: "Stationary" },
];
//Act
@ -184,8 +184,8 @@ describe("vehicle-damage.vue", () => {
const partsData = {
partsOrQuestions: [
{
location: "Windshield",
name: "Single",
glassLocation: "Windshield",
glassName: "Single",
partQuestions: null,
parts: [
{
@ -205,8 +205,8 @@ describe("vehicle-damage.vue", () => {
],
},
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "DB09626GTYN",
@ -253,7 +253,7 @@ describe("vehicle-damage.vue", () => {
selectedWindshieldDamageType: "Replace",
};
const expectedGlassToReplace = [{ location: "Windshield", name: "Single" }];
const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" }];
//Act
vehicleDamage.beforeRouteEnter.call(
@ -526,7 +526,7 @@ describe("vehicle-damage.vue", () => {
store.getters = {
vehicle: { carId: "C0000000" },
eventBusItem: jest.fn(),
damage: { glassToReplace: [{ location: damageLocation }] },
damage: { glassToReplace: [{ glassLocation: damageLocation }] },
isRepair: true,
};
@ -601,7 +601,7 @@ describe("vehicle-damage.vue", () => {
vehicle: { carId: "C0000000" },
eventBusItem: jest.fn(),
damage: {
glassToReplace: [{ location: damageLocation, name: damageName }],
glassToReplace: [{ glassLocation: damageLocation, glassName: damageName }],
isRepair: isRepair,
numberOfChips: 2,
},
@ -637,7 +637,9 @@ describe("vehicle-damage.vue", () => {
store.getters = {
vehicle: { carId: "C0000000" },
eventBusItem: jest.fn(),
damage: { glassToReplace: [{ location: damageLocation, name: damageName }] },
damage: {
glassToReplace: [{ glassLocation: damageLocation, glassName: damageName }],
},
isRepair: true,
};
@ -671,7 +673,9 @@ describe("vehicle-damage.vue", () => {
store.getters = {
vehicle: { carId: "C0000000" },
eventBusItem: jest.fn(),
damage: { glassToReplace: [{ location: damageLocation, name: damageName }] },
damage: {
glassToReplace: [{ glassLocation: damageLocation, glassName: damageName }],
},
isRepair: true,
};
@ -703,7 +707,9 @@ describe("vehicle-damage.vue", () => {
store.getters = {
vehicle: { carId: "C0000000" },
eventBusItem: jest.fn(),
damage: { glassToReplace: [{ location: damageLocation, name: damageName }] },
damage: {
glassToReplace: [{ glassLocation: damageLocation, glassName: damageName }],
},
isRepair: true,
};

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

@ -169,7 +169,7 @@ export default {
if (
store.getters.damage.glassToReplace?.some((glass) => {
return glass.location === damageLocationsSelected.WINDSHIELD;
return glass.glassLocation === damageLocationsSelected.WINDSHIELD;
}) ||
store.getters.damage.isRepair
) {
@ -178,8 +178,8 @@ export default {
if (
store.getters.damage.glassToReplace?.some((glass) => {
return (
glass.location === damageLocationsSelected.DRIVER ||
glass.location === damageLocationsSelected.PASSENGER
glass.glassLocation === damageLocationsSelected.DRIVER ||
glass.glassLocation === damageLocationsSelected.PASSENGER
);
})
) {
@ -188,7 +188,7 @@ export default {
if (
store.getters.damage.glassToReplace?.some((glass) => {
return glass.location === damageLocationsSelected.REAR;
return glass.glassLocation === damageLocationsSelected.REAR;
})
) {
glassSelections.push(damageLocationsSelected.REARWINDOW);
@ -213,8 +213,8 @@ export default {
if (
store.getters.damage.glassToReplace?.some((glass) => {
return (
glass.location === damageLocationsSelected.WINDSHIELD &&
glass.name === damageLocationsSelected.SINGLE
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.SINGLE
);
})
) {
@ -228,8 +228,8 @@ export default {
if (
store.getters.damage.glassToReplace?.some((glass) => {
return (
glass.location === damageLocationsSelected.WINDSHIELD &&
glass.name === damageLocationsSelected.DRIVER
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.DRIVER
);
})
) {
@ -243,8 +243,8 @@ export default {
if (
store.getters.damage.glassToReplace?.some((glass) => {
return (
glass.location === damageLocationsSelected.WINDSHIELD &&
glass.name === damageLocationsSelected.PASSENGER
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.PASSENGER
);
})
) {
@ -263,7 +263,7 @@ export default {
var doorSides = [];
if (
store.getters.damage.glassToReplace?.some((glass) => {
return glass.location === damageLocationsSelected.DRIVER;
return glass.glassLocation === damageLocationsSelected.DRIVER;
})
) {
doorSides.push(damageLocationsSelected.DRIVERSIDE);
@ -271,7 +271,7 @@ export default {
if (
store.getters.damage.glassToReplace?.some((glass) => {
return glass.location === damageLocationsSelected.PASSENGER;
return glass.glassLocation === damageLocationsSelected.PASSENGER;
})
) {
doorSides.push(damageLocationsSelected.PASSENGERSIDE);
@ -284,8 +284,8 @@ export default {
var driverSideReplaceOptions = [];
store.getters.damage.glassToReplace?.forEach((glass) => {
if (glass.location === damageLocationsSelected.DRIVER) {
driverSideReplaceOptions.push(glass.name);
if (glass.glassLocation === damageLocationsSelected.DRIVER) {
driverSideReplaceOptions.push(glass.glassName);
}
});
@ -296,8 +296,8 @@ export default {
var passengerSideReplaceOptions = [];
store.getters.damage.glassToReplace?.forEach((glass) => {
if (glass.location === damageLocationsSelected.PASSENGER) {
passengerSideReplaceOptions.push(glass.name);
if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
passengerSideReplaceOptions.push(glass.glassName);
}
});
@ -306,8 +306,8 @@ export default {
getRearReplaceOptionsFromStore() {
var rearReplaceOptions = store.getters.damage.glassToReplace?.filter(
(glass) => glass.location === damageLocationsSelected.REAR
)[0]?.name;
(glass) => glass.glassLocation === damageLocationsSelected.REAR
)[0]?.glassName;
return rearReplaceOptions;
},
@ -348,8 +348,8 @@ export default {
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
(wsItem) => {
selectedGlassToReplace.push({
location: damageLocationsSelected.WINDSHIELD,
name: wsItem,
glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem,
});
}
);
@ -358,8 +358,8 @@ export default {
if (this.isDriverSideReplace) {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
selectedGlassToReplace.push({
location: damageLocationsSelected.DRIVER,
name: driverItem,
glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem,
});
});
}
@ -368,8 +368,8 @@ export default {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
(passengerItem) => {
selectedGlassToReplace.push({
location: damageLocationsSelected.PASSENGER,
name: passengerItem,
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem,
});
}
);
@ -377,8 +377,8 @@ export default {
if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({
location: damageLocationsSelected.REAR,
name: this.selectedRearReplaceOptions,
glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions,
});
}

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

@ -29,8 +29,8 @@ const featureListData = {
],
},
],
locationProp: "Rear",
nameProp: "Stationary",
glassLocationProp: "Rear",
glassNameProp: "Stationary",
modelValueProp: {},
};
@ -54,7 +54,7 @@ describe("glass-part-question.vue", () => {
expect(wrapper.vm.featureListData["Gray Tint Privacy"][0].Name).toBe("DB12209YPYN");
});
test("Tint mapper, should get tint image by location and tintColor", async () => {
test("Tint mapper, should get tint image by glassLocation and tintColor", async () => {
//Arrange
const { wrapper } = setupMocks(featureListData);
@ -87,8 +87,8 @@ describe("glass-part-question.vue", () => {
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [{ partNumber: "DB12209GTYN", color: "Green Tint" }],
},
],
@ -135,8 +135,8 @@ describe("glass-part-question.vue", () => {
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [{ partNumber: "DB12209GTYN", color: "Green Tint" }],
},
],
@ -161,8 +161,8 @@ describe("glass-part-question.vue", () => {
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{ partNumber: "DB12209GTYN", color: "Green Tint" },
{ partNumber: "DB12209GTYNXXX", color: "Green Tint" },
@ -218,14 +218,14 @@ describe("glass-part-question.vue", () => {
];
test.each(partsForSelectedTintTestCases)(
"partsForSelectedTint returns correct parts",
async (location, name, selectedTint, expectedResults) => {
async (glassLocation, glassName, selectedTint, expectedResults) => {
// Arrange
store.getters.pageData.mockReset();
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{ partNumber: "Glass1", color: "Green Tint" },
{ partNumber: "Glass2", color: "Blue Tint" },
@ -237,8 +237,8 @@ describe("glass-part-question.vue", () => {
],
},
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: [
{ partNumber: "Windshield1", color: "Green Tint" },
{ partNumber: "Windshield2", color: "Green Tint" },
@ -247,8 +247,8 @@ describe("glass-part-question.vue", () => {
],
});
const { wrapper } = setupMocks({
locationProp: location,
nameProp: name,
glassLocationProp: glassLocation,
glassNameProp: glassName,
colorAnswersProp: [],
});
@ -261,10 +261,10 @@ describe("glass-part-question.vue", () => {
);
});
function setupMocks({ nameProp, locationProp, colorAnswersProp, modelValueProp }) {
function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
//Mock store
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [{ name: "Stationary", location: "Rear", parts: [] }],
partsOrQuestions: [{ glassName: "Stationary", glassLocation: "Rear", parts: [] }],
});
store.getters.lineItems = { glassParts: {} };
@ -280,8 +280,8 @@ function setupMocks({ nameProp, locationProp, colorAnswersProp, modelValueProp }
});
mountOptions.propsData = {
name: nameProp,
location: locationProp,
glassName: glassNameProp,
glassLocation: glassLocationProp,
colorAnswers: colorAnswersProp,
modelValue: modelValueProp,
};

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

@ -12,7 +12,7 @@
:isWide="true"
altText=""
isRequired
:groupName="`${location}-${name}`"
:groupName="`${glassLocation}-${glassName}`"
:validationRules="tintValidationRules">
<div class="row my-2" aria-live="polite">
<div class="col">
@ -25,7 +25,7 @@
textPosition="text-start"
:loaderEnabled="false"
isRequired
:groupName="`${location}-${name}-${selectedTint}`"
:groupName="`${glassLocation}-${glassName}-${selectedTint}`"
:validationRules="partValidationRules" />
</div>
</div>
@ -57,8 +57,8 @@ export default {
};
},
props: {
name: String,
location: String,
glassName: String,
glassLocation: String,
colorAnswers: Array,
modelValue: Object,
alreadyPopulatedPartsData: {
@ -74,14 +74,14 @@ export default {
},
computed: {
tintValidationRules() {
const validationRuleName = `${this.location}-${this.name}-tint-required`;
const validationRuleName = `${this.glassLocation}-${this.glassName}-tint-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
return validationRuleName;
},
partValidationRules() {
const validationRuleName = `${this.location}-${this.name}-part-required`;
const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
return validationRuleName;
@ -89,7 +89,7 @@ export default {
colorQuestionText() {
return getCustomTransformValue(
this.glassColorQuestion,
`${this.location} ${this.name}`
`${this.glassLocation} ${this.glassName}`
);
},
@ -101,7 +101,7 @@ export default {
value: tintOption,
buttonLabel: tintOption,
buttonImage: require(`@/assets/img/tints/${this.getTintSourceImage(
this.location,
this.glassLocation,
tintOption
)}`),
});
@ -125,8 +125,8 @@ export default {
partsForSelectedTint() {
const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(
(dataForGlassLocationAndName) =>
dataForGlassLocationAndName.name == this.name &&
dataForGlassLocationAndName.location == this.location
dataForGlassLocationAndName.glassName == this.glassName &&
dataForGlassLocationAndName.glassLocation == this.glassLocation
);
const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
return matchingGlassParts.filter((part) => part.color == this.selectedTint) ?? [];
@ -170,8 +170,8 @@ export default {
// Gets tint images based on the glass type, and tint name.
// Returns an empty string if the src or object is undefined.
getTintSourceImage(location, tintColor) {
const tintSourceObject = getTintImage(location, tintColor);
getTintSourceImage(glassLocation, tintColor) {
const tintSourceObject = getTintImage(glassLocation, tintColor);
if (tintSourceObject === undefined || tintSourceObject.src == undefined) {
return "";

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

@ -47,8 +47,8 @@ store.getters = {
const basePartResponse = {
partsOrQuestions: [
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "DB12209GTYN",
@ -217,8 +217,8 @@ describe("vehicle-parts.vue", () => {
return {
partsOrQuestions: [
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: null,
partQuestions: [
{
@ -302,8 +302,8 @@ describe("vehicle-parts.vue", () => {
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: [
{
partNumber: "FW03861GTYN",
@ -383,8 +383,8 @@ describe("vehicle-parts.vue", () => {
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: [
{
partNumber: "DB12209GTYN",

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

@ -24,10 +24,10 @@
<!-- 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"
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div>
@ -117,8 +117,8 @@ export default {
// Map API result data, to vehicle-parts data structure
const mappedData = partsData.partsOrQuestions.map((g) => {
return {
name: g.name,
location: g.location,
glassName: g.glassName,
glassLocation: g.glassLocation,
colorAnswers: g.parts?.reduce((arr, p) => {
arr.push({
ColorAnswerText: p.color,
@ -169,8 +169,8 @@ export default {
if (isMatched) {
matchedParts.push({
location: value.location,
name: value.name,
glassLocation: value.glassLocation,
glassName: value.glassName,
parts: [currentPart],
});
}
@ -205,7 +205,7 @@ export default {
const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
this.selectedGlassParts[g.location + "-" + g.name] = p;
this.selectedGlassParts[g.glassLocation + "-" + g.glassName] = p;
}
});
});

26
src/layouts/vin-lookup/vin-lookup.spec.js
View file

@ -220,6 +220,28 @@ describe("vin-lookup.vue", () => {
expect(wrapper.vm.displayInvalidZipAlert).toEqual(true);
expect(wrapper.findComponent({ ref: "alertInvalidZip" }).exists()).toBe(true);
});
test("alerts are displayed and continue button is clicked with issues fixed => alerts are reset", async () => {
// Arrange
const { wrapper } = setupMocks({});
mockOutPromises({ isZipValid: true, isZipServiceable: true, carId: "CARID" });
await wrapper.setData({
displayInvalidZipAlert: true,
displayMatchedDifferentVehicleAlert: true,
displayNonServiceableZipAlert: true,
displayVinNotFoundAlert: true,
});
// sanity check that there are alerts
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(4);
// Act
wrapper.vm.forwardButtonAction();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(0);
});
});
});
@ -244,8 +266,8 @@ function mockOutPromises({ carId, isZipValid = true, isZipServiceable = true })
carId: carId,
},
zipCodeData: {
isValid: true,
isServiceable: true,
isValid: isZipValid,
isServiceable: isZipServiceable,
state: "OH",
},
};

8
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -226,6 +226,8 @@ export default {
}
},
async forwardButtonAction() {
this.resetAlerts();
// If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
if (!this.vinPopulatedOnPageLoad) {
const vehicleLookupResponse = this.dispatchStoreAction(
@ -372,6 +374,12 @@ export default {
await this.navigateForwardWithSingleCarMatch();
}
},
resetAlerts() {
this.displayMatchedDifferentVehicleAlert = false;
this.displayNonServiceableZipAlert = false;
this.displayInvalidZipAlert = false;
this.displayVinNotFoundAlert = false;
},
},
mounted() {
this.attachCustomEvents();

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

@ -68,7 +68,7 @@ export default {
return this.comparePageIndices(currentPage, fmgPage) > 0;
},
setupInitialData(glass, i, alreadyAnsweredQuestions, vm) {
glass.key = glass.location + "-" + glass.name;
glass.key = glass.glassLocation + "-" + glass.glassName;
const self = vm ?? this;
// clear answerData if no questions are already answered
if (!alreadyAnsweredQuestions) {
@ -78,8 +78,8 @@ export default {
alreadyAnsweredQuestions?.forEach((answeredGlass) => {
// if answeredGlass lacks any of these properties then exit
if (
!answeredGlass.location ||
!answeredGlass.name ||
!answeredGlass.glassLocation ||
!answeredGlass.glassName ||
!answeredGlass.answeredQuestions ||
(!answeredGlass.result && !answeredGlass.partNum)
) {
@ -88,8 +88,8 @@ export default {
// test if glass parts match
if (
glass.location === answeredGlass.location &&
glass.name === answeredGlass.name
glass.glassLocation === answeredGlass.glassLocation &&
glass.glassName === answeredGlass.glassName
) {
let answerString = "";
@ -138,7 +138,7 @@ export default {
// Set up watch for each set of glass questions
// (updated when all questions for a glass have been answered in question-chain)
self.$watch(
"selectedAnswers." + glass.location + "-" + glass.name,
"selectedAnswers." + glass.glassLocation + "-" + glass.glassName,
(newValue) => {
if (newValue) {
self.handleAnswerUpdates(newValue);

184
src/mixins/vehicle-questions-mixin.spec.js
View file

@ -73,8 +73,8 @@ describe("vehicle-questions-mixin", () => {
// Act
const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
{
name: "Something",
location: "somewhere",
glassName: "Something",
glassLocation: "somewhere",
parts: [
{
partNumber: "1234567",
@ -94,8 +94,8 @@ describe("vehicle-questions-mixin", () => {
// Act
const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
{
name: "Something",
location: "somewhere",
glassName: "Something",
glassLocation: "somewhere",
parts: [
{
partNumber: "1234567",
@ -103,8 +103,8 @@ describe("vehicle-questions-mixin", () => {
],
},
{
name: "Another glass",
location: "somewhere else",
glassName: "Another glass",
glassLocation: "somewhere else",
parts: [
{
partNumber: "1234568",
@ -112,8 +112,8 @@ describe("vehicle-questions-mixin", () => {
],
},
{
name: "Special glass",
location: "Another where",
glassName: "Special glass",
glassLocation: "Another where",
parts: [
{
partNumber: "1234569",
@ -133,8 +133,8 @@ describe("vehicle-questions-mixin", () => {
// Act
const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
{
name: "Something",
location: "somewhere",
glassName: "Something",
glassLocation: "somewhere",
parts: [
{
partNumber: "1234567",
@ -142,8 +142,8 @@ describe("vehicle-questions-mixin", () => {
],
},
{
name: "Another glass",
location: "somewhere else",
glassName: "Another glass",
glassLocation: "somewhere else",
parts: [
{
partNumber: "1234568",
@ -151,8 +151,8 @@ describe("vehicle-questions-mixin", () => {
],
},
{
name: "Special glass",
location: "Another where",
glassName: "Special glass",
glassLocation: "Another where",
parts: [
{
partNumber: "1234569",
@ -342,8 +342,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const { wrapper } = setupMocks({});
const glass = {
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
};
const i = 0;
@ -359,8 +359,8 @@ describe("vehicle-questions-mixin", () => {
test("should return glass with answerData of null", async () => {
// Arrange
const glass = {
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
};
const i = 0;
const { wrapper } = setupMocks({});
@ -377,8 +377,8 @@ describe("vehicle-questions-mixin", () => {
test("should return glass with answerResult within answerData", async () => {
// Arrange
const glass = {
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
questions: [
{
questionSequence: 1,
@ -402,8 +402,8 @@ describe("vehicle-questions-mixin", () => {
const i = 0;
const alreadyAnsweredQuestions = [
{
location: "Windshield",
name: "Single",
glassLocation: "Windshield",
glassName: "Single",
partNum: "WKT D1106 C",
answeredQuestions: [
{
@ -436,8 +436,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: null,
partQuestions: [
{
@ -483,8 +483,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: null,
partQuestions: [
{
@ -507,8 +507,8 @@ describe("vehicle-questions-mixin", () => {
],
},
{
name: "Front",
location: "Driver",
glassName: "Front",
glassLocation: "Driver",
parts: [
{
partNumber: "DD08158GTYN",
@ -522,8 +522,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Quarter",
location: "Driver",
glassName: "Quarter",
glassLocation: "Driver",
parts: [
{
partNumber: "DQ08162GTYN",
@ -537,8 +537,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "SideDoor",
location: "Driver",
glassName: "SideDoor",
glassLocation: "Driver",
parts: null,
partQuestions: [
{
@ -560,8 +560,8 @@ describe("vehicle-questions-mixin", () => {
],
},
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "DB08165GTNN",
@ -598,8 +598,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: null,
partQuestions: [
{
@ -622,8 +622,8 @@ describe("vehicle-questions-mixin", () => {
],
},
{
name: "Front",
location: "Driver",
glassName: "Front",
glassLocation: "Driver",
parts: [
{
partNumber: "DD08158GTYN",
@ -637,8 +637,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Quarter",
location: "Driver",
glassName: "Quarter",
glassLocation: "Driver",
parts: [
{
partNumber: "DQ08162GTYN",
@ -652,8 +652,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "SideDoor",
location: "Driver",
glassName: "SideDoor",
glassLocation: "Driver",
parts: [
{
partNumber: "DD08160GTYN",
@ -667,8 +667,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "DB08165GTNN",
@ -705,8 +705,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: null,
partQuestions: [
{
@ -729,8 +729,8 @@ describe("vehicle-questions-mixin", () => {
],
},
{
name: "Front",
location: "Driver",
glassName: "Front",
glassLocation: "Driver",
parts: [
{
partNumber: "DD08158GTYN",
@ -744,8 +744,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Quarter",
location: "Driver",
glassName: "Quarter",
glassLocation: "Driver",
parts: [
{
partNumber: "DQ08162GTYN",
@ -767,8 +767,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "SideDoor",
location: "Driver",
glassName: "SideDoor",
glassLocation: "Driver",
parts: [
{
partNumber: "DD08160GTYN",
@ -790,8 +790,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "DB08165GTNN",
@ -862,8 +862,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "FB25724GTYN",
@ -908,8 +908,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: [
{
partNumber: "FW03647GTNN",
@ -929,8 +929,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Back",
location: "Driver",
glassName: "Back",
glassLocation: "Driver",
parts: [
{
partNumber: "FD25747GTYN",
@ -944,8 +944,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Front",
location: "Driver",
glassName: "Front",
glassLocation: "Driver",
parts: [
{
partNumber: "FD25719GTYN",
@ -959,8 +959,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Vent",
location: "Driver",
glassName: "Vent",
glassLocation: "Driver",
parts: [
{
partNumber: "FV25749GTNN",
@ -974,8 +974,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "FB25724GTYN",
@ -1020,8 +1020,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: [
{
partNumber: "DW02101GTYN",
@ -1035,8 +1035,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Back",
location: "Driver",
glassName: "Back",
glassLocation: "Driver",
parts: [
{
partNumber: "DD12202GTYN",
@ -1058,8 +1058,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Front",
location: "Driver",
glassName: "Front",
glassLocation: "Driver",
parts: [
{
partNumber: "DD12198GTYN",
@ -1081,8 +1081,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Quarter",
location: "Driver",
glassName: "Quarter",
glassLocation: "Driver",
parts: [
{
partNumber: "DQ12204GTYNOEM",
@ -1152,8 +1152,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "DB12209GTYN",
@ -1200,8 +1200,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "FB25724GTYN",
@ -1259,8 +1259,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: [
{
partNumber: "FB25724GTYN",
@ -1301,8 +1301,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: [
{
partNumber: "FW04186GTYN",
@ -1338,8 +1338,8 @@ describe("vehicle-questions-mixin", () => {
// Arrange
const partsOrQuestions = [
{
name: "Single",
location: "Windshield",
glassName: "Single",
glassLocation: "Windshield",
parts: [
{
partNumber: "FW04186GTYN",
@ -1359,8 +1359,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Back",
location: "Driver",
glassName: "Back",
glassLocation: "Driver",
parts: [
{
partNumber: "FD25457GTYN",
@ -1374,8 +1374,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Front",
location: "Driver",
glassName: "Front",
glassLocation: "Driver",
parts: [
{
partNumber: "FD27090GTYN",
@ -1389,8 +1389,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Vent",
location: "Driver",
glassName: "Vent",
glassLocation: "Driver",
parts: [
{
partNumber: "FV25459GTNN",
@ -1404,8 +1404,8 @@ describe("vehicle-questions-mixin", () => {
partQuestions: null,
},
{
name: "Stationary",
location: "Rear",
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "FB25460GTYN",

5
src/router/index.js
View file

@ -33,11 +33,6 @@ import quote from "@/layouts/quote/quote.vue";
import datePicker from "@/common-components/date-picker/date-picker.vue";
const routes = [
{
path: "/quote", // This is a temporary route for testing.
name: "quote",
component: quote,
},
{
path: "/date-picker", // This is a temporary route for testing.
name: "date-picker",

225
src/store/index.js
View file

@ -405,6 +405,49 @@ export const getters = {
applicationUser: (state) => state.applicationUser,
order: (state) => state.order,
payment: (state) => state.order.payment,
experimentOrder: (state) => {
return {
funnelVehicleYear: state.order.vehicle.year,
funnelVehicleMake: state.order.vehicle.make,
funnelVehicleModel: state.order.vehicle.model,
funnelVehicleStyle: state.order.vehicle.style,
funnelIsRepair: state.order.damage.isRepair,
funnelNumberOfChips: state.order.damage.numberOfChips,
funnelCarId: state.order.vehicle.carId,
funnelServiceCity: state.order.serviceLocation.city,
funnelServiceState: state.order.serviceLocation.state,
funnelServiceZipCode: state.order.serviceLocation.zipCode,
funnelParentAccountNumber: state.order.accountNumber,
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),
funnelSelectedBackGlass: getNonFalseValuesOfPropertyInArrayOfObjects(
state.order.damage.glassToReplace,
"glassLocation"
).includes(damageLocationsSelected.REAR),
funnelSelectedDriverSideGlass: getNonFalseValuesOfPropertyInArrayOfObjects(
state.order.damage.glassToReplace,
"glassLocation"
).includes(damageLocationsSelected.DRIVER),
funnelSelectedPassengerSideGlass: getNonFalseValuesOfPropertyInArrayOfObjects(
state.order.damage.glassToReplace,
"glassLocation"
).includes(damageLocationsSelected.PASSENGER),
return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
},
eventBus: (state) => state.applicationUser.eventBus,
damage: (state) => state.order.damage,
lineItems: (state) => state.order.lineItems,
pageData: (state) => (page) => {
return state.applicationUser.pageData[page];
},
applicationUser: (state) => state.applicationUser,
order: (state) => state.order,
payment: (state) => state.order.payment,
experimentOrder: (state) => {
return {
funnelVehicleYear: state.order.vehicle.year,
@ -822,24 +865,24 @@ export const actions = {
const zipCode = order.serviceLocation.zipCode;
const vin = vehicle.vin;
// create a new array to avoid mutating state
const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
const response = await globalMethods.callHttpClient({
method: endpoints.GetPartsOrQuestions.method,
endpoint: endpoints.GetPartsOrQuestions.url,
payload: {
carId: carId,
glassPieces: glassArray ?? [],
glassPieces: glassArrayForPayload,
zip: zipCode,
vin: vin,
},
});
// Flatten location and name properties
response.data.partsOrQuestions.map((glass) => {
glass.location = glass.glassPiece.location;
glass.name = glass.glassPiece.name;
delete glass.glassPiece;
return glass;
});
response.data.partsOrQuestions = convertGlassPieceNamingFromApi(
response.data.partsOrQuestions
);
return response;
},
@ -856,25 +899,26 @@ export const actions = {
const zipCode = order.serviceLocation.zipCode;
const vin = vehicle.vin;
// Flatten location and name properties
// create a new array to avoid mutating state
const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
const resultsArrayForPayload = convertResultsForApi(resultsArray);
const response = await globalMethods.callHttpClient({
method: endpoints.GetParts.method,
endpoint: endpoints.GetParts.url,
payload: {
carId: carId,
glassPieces: glassArray,
answerResults: resultsArray,
glassPieces: glassArrayForPayload,
answerResults: resultsArrayForPayload,
zip: zipCode,
vin: vin,
},
});
response.data.glassPieceParts.map((glass) => {
glass.location = glass.glassPiece.location;
glass.name = glass.glassPiece.name;
delete glass.glassPiece;
return glass;
});
// Flatten location and name properties
response.data.glassPieceParts = convertGlassPieceNamingFromApi(
response.data.glassPieceParts
);
return response;
},
@ -889,10 +933,11 @@ export const actions = {
getPartFromCapabilityQuestionAnswer(context, glassLocation) {
const pageData = context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
const part = pageData.partsOrQuestions.find((x) => x.location === glassLocation).parts[0];
const part = pageData.partsOrQuestions.find((x) => x.glassLocation === glassLocation)
.parts[0];
const capabilityQuestionAnswers = context.getters.damage.capabilityQuestionAnswers;
const capabilityQuestionAnswersForPart = capabilityQuestionAnswers.find(
(x) => x.location === glassLocation
(x) => x.glassLocation === glassLocation
);
return globalMethods.callHttpClient({
@ -913,52 +958,72 @@ export const actions = {
const applicationUser = context.getters.applicationUser;
const lineItems = context.state.order.lineItems;
// create a new array to avoid mutating state
const newGlassToReplace = convertGlassPieceNamingForApi(damage.glassToReplace);
return globalMethods.callHttpClient({
method: endpoints.SaveSession.method,
endpoint: endpoints.SaveSession.url,
payload: {
vehicle: {
carId: vehicle.carId,
year: vehicle.year,
make: vehicle.make,
model: vehicle.model,
style: vehicle.style,
vin: vehicle.vin,
registration: {
firstName: vehicle.registration.firstName,
lastName: vehicle.registration.lastName,
streetAddress: vehicle.registration.address,
city: vehicle.registration.city,
state: vehicle.registration.state,
zipCode: vehicle.registration.zipCode,
licensePlateNumber: vehicle.registration.licensePlate,
applicationUser: {
crmCustomerId: applicationUser.crmCustomerId,
experiments: applicationUser.experiments,
lastPage: applicationUser.lastPageVisited,
pageData: applicationUser.pageData,
savedSessionId: applicationUser.savedSessionId,
},
order: {
vehicle: {
carId: vehicle.carId,
year: vehicle.year,
make: vehicle.make,
model: vehicle.model,
style: vehicle.style,
vin: vehicle.vin,
registration: {
firstName: vehicle.registration.firstName,
lastName: vehicle.registration.lastName,
streetAddress: vehicle.registration.address,
city: vehicle.registration.city,
state: vehicle.registration.state,
zipCode: vehicle.registration.zipCode,
licensePlateNumber: vehicle.registration.licensePlate,
},
},
customer: {
emailAddress: order.customer.emailAddress,
},
damage: {
numberOfChips: damage.numberOfChips,
glassToReplace: newGlassToReplace,
isRepair: damage.isRepair,
partQuestionAnswers: order.damage.partQuestionAnswers,
moldingQuestionAnswers: order.damage.moldingQuestionAnswers,
capabilityQuestionAnswers: order.damage.capabilityQuestionAnswers,
},
lineItems: {
glassParts: lineItems.glassParts,
},
payment: {
InsuranceCoverage: {
isVerified: order.payment.insuranceCoverage.isVerified ?? false,
},
isInsurance: order.payment.isInsurance ?? false,
},
accountNumber: order.accountNumber?.toString(),
providerNumber: "",
serviceLocation: {
streetAddress: order.serviceLocation.address,
city: order.serviceLocation.city,
state: order.serviceLocation.state,
zipCode: order.serviceLocation.zipCode,
},
existingPromoCode: null,
referralCorrelationId: order.referralCorrelationId,
referralDate: order.referralDate,
referralNumber: order.referralNumber?.toString(), // TODO It'd be nice to save these as strings in the first place
referralSequenceNumber: order.referralNumber?.toString(), // TODO Pass the referralSequence number once insurance flow creates it
},
damage: {
numberOfChips: damage.numberOfChips,
glassToReplace: damage.glassToReplace,
isRepair: damage.isRepair,
},
customer: {
emailAddress: order.customer.emailAddress,
},
lineItems: {
glassParts: lineItems.glassParts,
},
serviceLocation: {
streetAddress: order.serviceLocation.address,
city: order.serviceLocation.city,
state: order.serviceLocation.state,
zipCode: order.serviceLocation.zipCode,
},
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,
lastPage: applicationUser.lastPageVisited,
crmCustomerId: applicationUser.crmCustomerId,
savedSessionId: applicationUser.savedSessionId,
experiments: applicationUser.experiments,
},
});
},
@ -975,6 +1040,15 @@ export const actions = {
},
})
.then((response) => {
// Flatten location and name properties
response.data.damage?.glassToReplace?.map((glass) => {
glass.glassLocation = glass.location;
glass.glassName = glass.name;
delete glass.location;
delete glass.name;
return glass;
});
// clear the state if the existing EON does not equal what is returned from loadSession
if (context.state.order.eon && context.state.order.eon != response.data.eon) {
context.commit(storeMutations.RESET_STATE);
@ -1375,3 +1449,38 @@ function sortArrayOfObjectsByPropertyValue(arrayOfObjects, propertyName) {
else return 0;
});
}
function convertGlassPieceNamingForApi(glassArray) {
if (!glassArray) return [];
const converted = [];
glassArray.forEach((glass) => {
converted.push({
location: glass.glassLocation,
name: glass.glassName,
});
});
return converted;
}
function convertResultsForApi(resultsArray) {
if (!resultsArray) return [];
const converted = [];
resultsArray.forEach((answer) => {
converted.push({
location: answer.glassLocation,
name: answer.glassName,
result: answer.result,
});
});
return converted;
}
function convertGlassPieceNamingFromApi(glassArray) {
glassArray.forEach((glass) => {
glass.glassLocation = glass.glassPiece.location;
glass.glassName = glass.glassPiece.name;
delete glass.glassPiece;
return glass;
});
return glassArray;
}

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

@ -580,6 +580,14 @@ describe("Actions", () => {
vehicle: {
registration: {},
},
order: {
damage: {
numberOfChips: "2",
partQuestionAnswers: {},
moldingQuestionAnswers: {},
capabilityQuestionAnswers: {},
},
},
damage: {},
applicationUser: {
lastPageVisited: "test-page",
@ -589,6 +597,18 @@ describe("Actions", () => {
};
context.state = {
order: {
damage: {
numberOfChips: "2",
partQuestionAnswers: {},
moldingQuestionAnswers: {},
capabilityQuestionAnswers: {},
},
payment: {
insuranceCoverage: {
isVerified: false,
},
isInsurance: false,
},
serviceLocation: {},
customer: {},
lineItems: {},

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

@ -2,8 +2,18 @@ html {
.has-error {
&.list-button,
&.list-card,
&.list-card.list-button {
&.list-button-horizontal {
border: 1px solid $red;
.button-content {
border: none;
}
}
&.list-button,
&.list-card {
color: $red;
input[type="checkbox"]:focus + label,
input[type="radio"]:focus + label {
box-shadow: 0 0 0 2.5px $red;
@ -38,6 +48,7 @@ html {
box-shadow: 0 0 1px $red;
}
}
&.grid-item {
input[type="radio"] {
+ label {

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

@ -6,7 +6,8 @@
{ strong: isStrongStyling },
]"
v-model="selectedValue">
<div class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
<div
class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-3">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
@ -165,9 +166,15 @@ export default {
}
}
.col {
.col,
.list-group {
border-radius: 0;
&:first-of-type {
.list-button-horizontal {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
@ -177,6 +184,9 @@ export default {
&:last-of-type {
.list-button-horizontal {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
.list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;

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

@ -5,7 +5,7 @@
v-model="selectedValue">
<div
:aria-label="buttonLabel"
class="list-button-content d-flex flex-column justify-content-center py-3 px-4">
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
@ -31,7 +31,6 @@ export default {
name: "listButton",
mixins: [inputButtonWrapperMixin],
props: {
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: {
type: String,

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

@ -7,7 +7,7 @@
]"
v-model="selectedValue">
<div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
class="d-flex w-100 align-items-center px-2 h-100 list-card-content button-content rounded-3"
:class="labelClasses">
<img
:id="buttonImageId"
@ -57,12 +57,27 @@ export default {
</script>
<style lang="scss">
@mixin list-card-focus($box-shadow-color) {
&:focus-visible + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
border-radius: 0.5rem;
}
&:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
border-radius: 0.5rem;
}
&:checked:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
}
}
.list-card {
border: 1px solid $gray-500;
&.has-error {
//Red border if invalid
border: 1px solid $red;
input[type="checkbox"],
input[type="radio"] {
@include list-card-focus($red);
}
}
img {
@ -108,17 +123,9 @@ export default {
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;
}
@include list-card-focus($blue);
&:checked + .list-card-content {
p {
color: $black;