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

Merge pull request #1046 from Safelite/feature/humphries/INSR-7774

Browse source 
INSR-7774: Added no vin option to vehicle lookup, and some style changes
This commit is contained in:
AHumphriesSL 2026-02-05 14:17:03 -05:00 committed by GitHub
commit 55ae3d5507
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 119 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/constants/vin-lookup-methods.js
View file

@ -1,7 +1,8 @@
const vinLookupMethodSelections = Object.freeze({
MANUALVIN: 'ManualVin',
LICENSEPLATE: 'LicensePlate',
HOMEADDRESS: 'HomeAddress'
HOMEADDRESS: 'HomeAddress',
NOVIN: 'NoVin'
});
export default vinLookupMethodSelections;

34
src/layouts/vehicle-lookup/vehicle-lookup.spec.js
View file

@ -13,6 +13,7 @@ import errorMessages from '@/constants/error-messages';
import globalRules from '@/constants/global-rules';
import { required } from '@/helpers/validation-rules';
import VehicleLookup from '@/layouts/vehicle-lookup/vehicle-lookup.vue';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
const pinia = createTestingPinia();
useMainStore(pinia);
@ -40,6 +41,13 @@ const vinLookupMethodsMockData = {
SubText: 'Most convenient VIN match',
ImageId: '',
SubWidgetName: ''
},
{
Name: 'NoVin',
Text: 'I\'d prefer not to share my VIN',
SubText: '',
ImageId: '',
SubWidgetName: ''
}
]
};
@ -118,7 +126,8 @@ function setupMocks() {
},
stubs: {
SiteHeader: true,
SiteSubHeader: true
SiteSubHeader: true,
TextBlock: true
}
}
});
@ -264,6 +273,29 @@ describe('vehicle-lookup.vue', () => {
* Currently just trust that our custom navigate() method does its job properly.
*/
});
test('Select "I\'d prefer not to share my VIN" then click "Continue". Calls navigateForward from vehicleQuestionsMixin', async () => {
useMainStore().getPartsOrQuestions = () => ({ data: { partsOrQuestions: [] } });
navigateSpy = jest.spyOn(vehicleQuestionsMixin.methods, 'navigateForward').mockImplementation(async () => {});
const { wrapper } = setupMocks();
const vinLookupMethodsWrapper = wrapper.findComponent({ name: 'vin-lookup-methods' });
// Not using initializeComponent() because it doesn't trigger reactivity in test.
await vinLookupMethodsWrapper.setData({
questionTextFromCms: vinLookupMethodsMockData.QuestionText,
answersFromCms: vinLookupMethodsMockData.Answers
});
const noVinOptionLabel = wrapper
.find('[data-test-id="vin-lookup-methods-button-question"] label[for="VinLookupMethods-NoVin"]');
await noVinOptionLabel.trigger('mousedown');
const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]');
await continueButton.trigger('click');
// Assert
expect(navigateSpy).toHaveBeenCalled();
});
/**
* To Do: Error message is not displayed when running test

54
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -10,8 +10,8 @@
<div class="vehicle-lookup-container iss-heritage-content-container-width">
<SiteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4"
subHeaderMarginClasses="mt-1" />
class="subheader mt-4"
subHeaderMarginClasses="mt-4" />
<VinLookupMethods
ref="VinLookupMethods"
v-model="selectedVinLookupMethod"
@ -23,6 +23,9 @@
class="mt-5"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
<TextBlock
cmsWidgetName="SecurityTextWidget"
class="security-text" />
</div>
</div>
</div>
@ -35,6 +38,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
// Import Component
@ -42,6 +46,7 @@ import SiteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue';
import TextBlock from '@/digital-components/text-block/text-block.vue';
export default {
name: 'vehicle-lookup',
@ -51,9 +56,10 @@ export default {
SiteFooter,
siteHeader,
SiteSubHeader,
VinLookupMethods
VinLookupMethods,
TextBlock
},
mixins: [BaseFormMixin],
mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@ -86,7 +92,7 @@ export default {
arePagePrerequisiteValid() {
return true;
},
forwardButtonAction() {
async forwardButtonAction() {
switch (this.selectedVinLookupMethod) {
case vinLookupMethodSelections.MANUALVIN:
this.$router.navigate(
@ -106,6 +112,24 @@ export default {
this.$route
);
break;
case vinLookupMethodSelections.NOVIN:
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) {
this.mainStore.setBailout(bailoutMessage.PartsServiceError(partsOrQuestionsResponse.error.data));
window.console.error('Error on retrieving PartsOrQuestions');
this.hasBailedOut = true;
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
}
else {
await this.navigateForward(
partsOrQuestionsResponse.data.partsOrQuestions,
this
);
}
break;
default:
break;
}
@ -124,5 +148,23 @@ export default {
padding-right: .9375rem;
}
}
.subheader {
:deep(.all-caps) {
text-transform: uppercase;
}
:deep(.subheader-secondary>p) {
margin-bottom: 0;
}
}
.security-text {
text-align: center;
margin-bottom: 1.5rem;
:deep(a) {
font-weight: $font-weight-normal;
color: $heritage-blue-primary;
&:hover {
color: #125b7e;
}
}
}
</style>

17
src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue
View file

@ -1,11 +1,11 @@
<template>
<ButtonQuestion
class="vin-lookup-methods-question"
v-model="selectedValue"
:answers="answersFromCms"
groupName="VinLookupMethodsOption"
buttonTypeString="listButton"
:questionText="questionTextFromCms"
:questionTextClasses="['text-center']"
isRequired
:validationRules="rules.optionRequired"
data-test-id="vin-lookup-methods-button-question" />
@ -83,3 +83,18 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.vin-lookup-methods-question {
:deep(.question-text) {
font-weight: 600;
margin-bottom: 0.5rem;
}
:deep(.list-button) {
.list-button-content,
input[type="radio"]:checked + .list-button-content {
color: $black;
font-weight: $font-weight-semibold;
}
}
}
</style>

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

@ -80,6 +80,26 @@ const routingTable = () => [
{
scenario: navigationScenarios.SELECTED_HOME_ADDRESS,
destinationIssPageValue: issPageValues.ADDRESS_LOOKUP
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_PART_QUESTIONS,
destinationIssPageValue: issPageValues.PART_QUESTIONS
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
destinationIssPageValue: issPageValues.VEHICLE_PARTS
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
destinationIssPageValue: issPageValues.MOLDING_QUESTIONS
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.COVERAGE_STATEMENT
}
]
},