From f087ffa983755526fcc3b3676031e8469c06c66f Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Thu, 12 Feb 2026 16:06:54 -0500 Subject: [PATCH 1/4] INSR-7775: vehicle-part Parity --- src/assets/img/tints/GlassTint.png | Bin 0 -> 8968 bytes src/constants/tint-mapper.js | 91 ------ src/helpers/text-helper.js | 2 +- .../glass-part-question.spec.js | 75 ++--- .../glass-part-question.vue | 292 +++++++++--------- src/layouts/vehicle-parts/vehicle-parts.vue | 74 +++-- src/router/router-constants/routing-table.js | 4 + 7 files changed, 218 insertions(+), 320 deletions(-) create mode 100644 src/assets/img/tints/GlassTint.png delete mode 100644 src/constants/tint-mapper.js diff --git a/src/assets/img/tints/GlassTint.png b/src/assets/img/tints/GlassTint.png new file mode 100644 index 0000000000000000000000000000000000000000..b3cf01ba276b864eac9de3d5259cdd2fc711e763 GIT binary patch literal 8968 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 literal 0 HcmV?d00001 diff --git a/src/constants/tint-mapper.js b/src/constants/tint-mapper.js deleted file mode 100644 index 91fbd57b..00000000 --- a/src/constants/tint-mapper.js +++ /dev/null @@ -1,91 +0,0 @@ -// TintMap with array keys by location, lowercase to avoid as much string mismatching as possible. -// Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup. -// See vehicle-parts for implementation example. -const tintMap = Object.freeze({ - other: [ - // Blue Shade - { name: 'blue tint, blue shade', src: 'Glass-BlueShade-BlueTint.svg' }, - { name: 'brown tint, blue shade', src: 'Glass-BlueShade-BrownTint.svg' }, - { name: 'gray tint, blue shade', src: 'Glass-BlueShade-GrayTint.svg' }, - { name: 'green tint, blue shade', src: 'Glass-BlueShade-GreenTint.svg' }, - { name: 'clear, blue shade', src: 'Glass-BlueShade-NoTint.svg' }, - - // Brown Shade - { name: 'brown tint, brown shade', src: 'Glass-BrownShade-BrownTint.svg' }, - - // Gray Shade - { name: 'blue tint, gray shade', src: 'Glass-GrayShade-BlueTint.svg' }, - { name: 'brown tint, gray shade', src: 'Glass-GrayShade-BrownTint.svg' }, - { name: 'gray tint, gray shade', src: 'Glass-GrayShade-GrayTint.svg' }, - { name: 'green tint, gray shade', src: 'Glass-GrayShade-GreenTint.svg' }, - - // Green Shade - { name: 'blue tint, green shade', src: 'Glass-GreenShade-BlueTint.svg' }, - { name: 'brown tint, green shade', src: 'Glass-GreenShade-BrownTint.svg' }, - { name: 'green tint, green shade', src: 'Glass-GreenShade-GreenTint.svg' }, - - // Tints Only - { name: 'blue tint privacy', src: 'Glass-NoShade-BlueTint.svg' }, - { name: 'bronze tint', src: 'Glass-NoShade-BrownTint.svg' }, - { name: 'dark brown tint', src: 'Glass-NoShade-DarkBrownTint.svg' }, - { name: 'privacy, black frame', src: 'Glass-NoShade-Privacy.svg' }, - { name: 'gray tint', src: 'Glass-NoShade-GrayTint.svg' }, - { name: 'green tint', src: 'Glass-NoShade-GreenTint.svg' }, - { name: 'gray tint privacy', src: 'Glass-NoShade-GrayTint.svg' }, - { name: 'blue tint', src: 'Glass-NoShade-BlueTint.svg' }, - { name: 'green tint privacy', src: 'Glass-NoShade-GreenTint.svg' }, - - // No shade or tint - { name: 'clear', src: 'Glass-NoShade-NoTint.svg' } - ], - - windshield: [ - // Blue Shade - { name: 'blue tint, blue shade', src: 'Windshield-BlueShade-BlueTint.svg' }, - { name: 'bronze tint, blue shade', src: 'Windshield-BlueShade-BrownTint.svg' }, - { name: 'gray tint, blue shade', src: 'Windshield-BlueShade-GrayTint.svg' }, - { name: 'green tint, blue shade', src: 'Windshield-BlueShade-GreenTint.svg' }, - { name: 'clear, blue shade', src: 'Windshield-BlueShade-NoTint.svg' }, - - // Brown Shade - { name: 'bronze tint, bronze shade', src: 'Windshield-BrownShade-BrownTint.svg' }, - - // Gray Shade - { name: 'blue tint, gray shade', src: 'Windshield-GrayShade-BlueTint.svg' }, - { name: 'brown tint, gray shade', src: 'Windshield-GrayShade-BrownTint.svg' }, - { name: 'gray tint, gray shade', src: 'Windshield-GrayShade-GrayTint.svg' }, - { name: 'green tint, gray shade', src: 'Windshield-GrayShade-GreenTint.svg' }, - - // Green Shade - { name: 'blue tint, green shade', src: 'Windshield-GreenShade-BlueTint.svg' }, - { name: 'brown tint, green shade', src: 'Windshield-GreenShade-BrownTint.svg' }, - { name: 'green tint, green shade', src: 'Windshield-GreenShade-GreenTint.svg' }, - - // Tints Only - { name: 'blue tint', src: 'Windshield-NoShade-BlueTint.svg' }, - { name: 'bronze tint', src: 'Windshield-NoShade-BrownTint.svg' }, - { name: 'dark brown tint', src: 'Windshield-NoShade-DarkBrownTint.svg' }, - { name: 'privacy, black frame', src: 'Windshield-NoShade-Privacy.svg' }, - { name: 'gray tint', src: 'Windshield-NoShade-GrayTint.svg' }, - { name: 'green tint', src: 'Windshield-NoShade-GreenTint.svg' }, - { name: 'gray tint privacy', src: 'Windshield-NoShade-GrayTint.svg' }, - - // No shade or tint - { name: 'clear', src: 'Windshield-NoShade-NoTint.svg' } - ] -}); - -// Gets the tint image source string given the glass location, and the tint description (like 'Green Tint') -// Use lowered strings here to try to avoid mismatch. Returns an empty string if array key doesn't exist. -// Returns undefined if no items are found. -const getTintImage = (glassLocation, colorString) => { - // Windshield glass has special images, all other glass uses the same though. - const glassLoc = (glassLocation.toLowerCase() !== 'windshield') ? 'other' : 'windshield'; - if (tintMap[glassLoc] === undefined) { - return ''; - } - - return tintMap[glassLoc].find((item) => item.name.toLowerCase() === colorString.toLowerCase()); -}; - -export default getTintImage; diff --git a/src/helpers/text-helper.js b/src/helpers/text-helper.js index b6fc5184..c05b870a 100644 --- a/src/helpers/text-helper.js +++ b/src/helpers/text-helper.js @@ -46,7 +46,7 @@ export function createUnorderedListFromStringOfParagraphs(stringOfParagraphs) { */ export function toTitleCase(text) { let temp = text?.toLowerCase() ?? ''; - return temp.replace(/(^|\s|-)\S/g, (letter) => letter.toUpperCase()); + return temp.replace(/(^|\s|-|\/)\S/g, (letter) => letter.toUpperCase()); } /** diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js index 41a935b8..b446332d 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js @@ -41,13 +41,14 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV }; - const wrapper = shallowMount(glassPartQuestion, mountOptions); - - // Mock store const partsOrQuestions = pageData ?? { partsOrQuestions: [{ glassName: 'Stationary', glassLocation: 'Rear', parts: [] }] }; useMainStore().pageData = jest.fn(); useMainStore().pageData.mockReturnValue(partsOrQuestions); document.querySelector = jest.fn().mockReturnValue({ clicked: false, click: jest.fn() }); + + const wrapper = shallowMount(glassPartQuestion, mountOptions); + + // Mock store return { wrapper }; } @@ -62,36 +63,23 @@ describe('glass-part-question.vue', () => { window.console.log(wrapper.vm.featureListData['Green Tint'][0].Text); // Assert expect(Object.keys(wrapper.vm.featureListData).length).toBe(2); - expect(wrapper.vm.featureListData['Green Tint'][0].Text).toBe('heated glass, solar, 1 hole'); + expect(wrapper.vm.featureListData['Green Tint'][0].Text).toBe('Heated glass, Solar, 1 Hole'); expect(wrapper.vm.featureListData['Green Tint'][0].Name).toBe('DB12209GTYN'); - expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Text).toBe('heated glass, solar, 1 hole'); + expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Text).toBe('Heated glass, Solar, 1 Hole'); expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Name).toBe('DB12209YPYN'); }); - test('Tint mapper, should get tint image by glassLocation and tintColor', async () => { + test('Tint mapper, should get return css class based on tint color', async () => { // Arrange const { wrapper } = setupMocks(featureListData); // Act await wrapper.vm.$nextTick(); - const tintSourceImage = wrapper.vm.getTintSourceImage('Rear', 'Green Tint'); + const tintClass = wrapper.vm.convertTintToCSSClass('Green Tint'); // Assert - expect(tintSourceImage).toBe('Glass-NoShade-GreenTint.svg'); - }); - - test('Tint mapper, should return empty string if no tint map found', async () => { - // Arrange - - const { wrapper } = setupMocks(featureListData); - - // Act - await wrapper.vm.$nextTick(); - const tintSourceImage = wrapper.vm.getTintSourceImage('Rear', 'Crazy Rainbow Tint'); - - // Assert - expect(tintSourceImage).toBe(''); + expect(tintClass).toBe('green-tint'); }); test('Should emit updateModelValue, and have correct attributes', async () => { @@ -122,7 +110,7 @@ describe('glass-part-question.vue', () => { { partNumber: 'DB12209GTYN', color: 'Green Tint' } ]); expect(listCard.attributes('groupname')).toBe('Rear-Stationary'); - expect(listCard.attributes('validationrules')).toBe('Rear-Stationary-tint-required'); + expect(listCard.attributes('validationrules')).toBe('Rear-Stationary-part-required'); }); test('default is selected if only one option', async () => { @@ -136,58 +124,42 @@ describe('glass-part-question.vue', () => { } ] }; + const updateSpy = jest.spyOn(glassPartQuestion.methods, 'updateSelectedPartNumber'); const { wrapper } = setupMocks(featureListData); - - // Act - await wrapper.vm.$nextTick(); - await wrapper.setData({ selectedTint: 'Green Tint' }); - // take emitted value, pass down as modelValue - // yes, yes, it's not ideal - await wrapper.setProps({ modelValue: wrapper.emitted()['update:modelValue'][0][0] }); await wrapper.vm.$nextTick(); // Assert - expect(wrapper.vm.selectedPartNumber).toBe('DB12209GTYN'); + expect(updateSpy).toHaveBeenCalledWith('DB12209GTYN'); }); - const partsForSelectedTintTestCases = [ + const partsForLocationTestCases = [ [ 'Rear', 'Stationary', - 'Green Tint', [ { partNumber: 'Glass1', color: 'Green Tint' }, + { partNumber: 'Glass2', color: 'Blue Tint' }, { partNumber: 'Glass3', color: 'Green Tint' }, { partNumber: 'Glass4', color: 'Green Tint' }, - { partNumber: 'Glass6', color: 'Green Tint' } + { partNumber: 'Glass5', color: 'Blue Tint' }, + { partNumber: 'Glass6', color: 'Green Tint' }, + { partNumber: 'Glass7', color: 'Red Tint' } ] ], - [ - 'Rear', - 'Stationary', - 'Blue Tint', - [ - { partNumber: 'Glass2', color: 'Blue Tint' }, - { partNumber: 'Glass5', color: 'Blue Tint' } - ] - ], - ['Rear', 'Stationary', 'Red Tint', [{ partNumber: 'Glass7', color: 'Red Tint' }]], [ 'Windshield', 'Single', - 'Green Tint', [ { partNumber: 'Windshield1', color: 'Green Tint' }, { partNumber: 'Windshield2', color: 'Green Tint' } ] ], - ['Windshield', 'Single', 'Blue Tint', []], - ['Driver', 'Quarter', 'Green Tint', []] + ['Driver', 'Quarter', []] ]; - test.each(partsForSelectedTintTestCases)( - 'partsForSelectedTint returns correct parts', - async (glassLocation, glassName, selectedTint, expectedResults) => { + test.each(partsForLocationTestCases)( + 'partsForLocation returns correct parts', + async (glassLocation, glassName, expectedResults) => { // Arrange const pageData = { partsOrQuestions: [ { @@ -219,11 +191,8 @@ describe('glass-part-question.vue', () => { pageData }); - // Act - await wrapper.setData({ selectedTint }); - // Assert - expect(expectedResults).toEqual(wrapper.vm.partsForSelectedTint); + expect(wrapper.vm.partsForLocation).toEqual(expectedResults); } ); }); diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 0fe2bec3..f29a6af4 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -1,44 +1,27 @@ diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 5ceefd0d..6715e8f1 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -11,19 +11,12 @@
-
- -
+ :key="i" + class="glass-question-container"> +
+ +
@@ -51,7 +52,7 @@ import glassPartQuestion from '@/layouts/vehicle-parts/glass-part-question/glass import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue'; -import alert from '@/ux-components/alert/alert.vue'; +import textLink from '@/ux-components/text-link/text-link.vue'; // Supporting Files import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; @@ -61,6 +62,7 @@ import { Form } from 'vee-validate'; import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin'; import BaseFormMixin from '@/mixins/base-form-mixin.js'; import { useMainStore } from '@/store'; +import widgetFields from '@/constants/cms-widget-fields'; export default { name: 'vehicle-parts', @@ -71,7 +73,7 @@ export default { siteHeader, siteSubHeader, siteFooter, - alert + textLink }, mixins: [BaseFormMixin, vehicleQuestionsMixin], async beforeRouteEnter(to, from, next) { @@ -88,17 +90,6 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { 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 - })); }); }, data() { @@ -156,6 +147,9 @@ export default { RefPrefix() { return 'partQuestion'; + }, + needHelpLinkText() { + return this.getCmsContent('NeedHelpLinkWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT); } }, mounted() { @@ -220,23 +214,47 @@ export default { }); }); }); + }, + requestCallbackBailout() { + this.mainStore.setBailout(bailoutMessage.RequestCallback()); + this.$router.navigate(navigationScenarios.CLICKED_NEED_HELP_WITH_BAILOUT, this.$route); } } }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 2698360f..c3075d3f 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -248,6 +248,10 @@ const routingTable = () => [ { scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS, destinationIssPageValue: issPageValues.COVERAGE_STATEMENT + }, + { + scenario: navigationScenarios.CLICKED_NEED_HELP_WITH_BAILOUT, + destinationIssPageValue: issPageValues.BAILOUT_PAGE } ] }, From 4a97b0bc131433747234bc66c63984bd9561223a Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Thu, 12 Feb 2026 16:09:32 -0500 Subject: [PATCH 2/4] Fix bad copy-paste for comment --- .../glass-part-question/glass-part-question.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js index b446332d..fd7afa32 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js @@ -41,6 +41,7 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV }; + // Mock store const partsOrQuestions = pageData ?? { partsOrQuestions: [{ glassName: 'Stationary', glassLocation: 'Rear', parts: [] }] }; useMainStore().pageData = jest.fn(); useMainStore().pageData.mockReturnValue(partsOrQuestions); @@ -48,7 +49,6 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV const wrapper = shallowMount(glassPartQuestion, mountOptions); - // Mock store return { wrapper }; } From 99aa82875399e9153cf1ceaff486253d31256c58 Mon Sep 17 00:00:00 2001 From: AHumphriesSL Date: Thu, 12 Feb 2026 16:18:35 -0500 Subject: [PATCH 3/4] double quotes -> single quotes Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../vehicle-parts/glass-part-question/glass-part-question.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index f29a6af4..1d5c2115 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -158,7 +158,7 @@ export default { const exceptions = ['side', 'glass', 'dimming']; let temp = toTitleCase(text); exceptions.forEach((exception) => { - const regEx = new RegExp(exception, "ig"); + const regEx = new RegExp(exception, 'ig'); temp = temp.replace(regEx, exception); }); return temp; From ac0721d47013bf490878c425e0c8091e83acbb1c Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Thu, 12 Feb 2026 16:38:36 -0500 Subject: [PATCH 4/4] Margin tweak --- src/layouts/vehicle-parts/vehicle-parts.vue | 31 +++++++++++---------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 6715e8f1..4e75e55f 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -13,21 +13,22 @@ ref="siteSubHeader" class="mt-4 subheader" cmsWidgetName="SiteSubHeaderWidget" /> -
- +
+
+ +