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

Merge branch 'develop' into feature/digital/SSR-448

Browse source
This commit is contained in:
Katie Kroell 2023-05-12 14:31:05 -04:00
commit bac3c17dae
16 changed files with 679 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

169
azure-pipelines.yml
View file

@ -20,16 +20,17 @@ 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
repositories:
- repository: AzureDevOps
type: github
name: Safelite/AzureDevOps
endpoint: Safelite
ref: refs/tags/t5.5.19
ref: refs/tags/t5.5.40
variables:
- group: Digital-Infrastructure
- group: ISS-BuildBranches
stages:
# PR's
@ -44,11 +45,12 @@ stages:
testResultsFile: junit.xml
summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml
# Dev Build/Deploy
- ${{ else }}:
# Dev Build/Deploy
- stage: Dev
condition: eq(variables['Build.SourceBranch'], variables['dev-branch'] )
variables:
- group: ISS-dev
- group: ISS-Dev
jobs:
- deployment: devBuildDeployment
displayName: Build and Deploy ISS - Dev
@ -87,4 +89,163 @@ stages:
__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)
# Test Build/Deploy
- stage: Test
condition: eq(variables['Build.SourceBranch'], variables['test-branch'] )
variables:
- group: ISS-Test
jobs:
- deployment: testBuildDeployment
displayName: Build and Deploy ISS - Test
environment: NoApproval-All
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)
deployBuckets:
safelite-sys-iss-us-east-1:
clearFolder: true
deployFolder: ""
region: us-east-1
safelite-sys-iss-us-east-2:
clearFolder: true
deployFolder: ""
region: us-east-2
appDeployVariables:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
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__)
# QA Build/Deploy
- stage: QA
condition: eq(variables['Build.SourceBranch'], variables['qa-branch'] )
variables:
- group: ISS-QA
jobs:
- deployment: qaBuildDeployment
displayName: Build and Deploy ISS - QA
environment: NoApproval-All
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: Qa
- template: templates/digital/step-deploy-vue.yml@AzureDevOps
parameters:
artifactName: vueDistQa
awsProfile: $(qaDeploymentProfile)
deployBuckets:
safelite-qa-iss-us-east-1:
clearFolder: true
deployFolder: ""
region: us-east-1
safelite-qa-iss-us-east-2:
clearFolder: true
deployFolder: ""
region: us-east-2
appDeployVariables:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
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__)
- template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
parameters:
awsCliContainer: awscli
distributionId: $(apiCfDistributionId)
paths: /*
awsProfile: $(qaDeploymentProfile)
- template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
parameters:
awsCliContainer: awscli
distributionId: $(cfDistributionId)
paths: /iss/*
awsProfile: $(qaDeploymentProfile)
# Prod Build/Deploy
- stage: Prod
condition: succeeded('Qa')
variables:
- group: ISS-Prod
jobs:
- deployment: prodBuildDeployment
displayName: Build and Deploy ISS - Prod
environment: digitalCloud-prod
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: Prod
- template: templates/digital/step-deploy-vue.yml@AzureDevOps
parameters:
artifactName: vueDistProd
awsProfile: $(prodDeploymentProfile)
deployBuckets:
safelite-prod-iss-us-east-1:
clearFolder: true
deployFolder: ""
region: us-east-1
safelite-prod-iss-us-east-2:
clearFolder: true
deployFolder: ""
region: us-east-2
appDeployVariables:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
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__)
- template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
parameters:
awsCliContainer: awscli
distributionId: $(apiCfDistributionId)
paths: /*
awsProfile: $(prodDeploymentProfile)
- template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
parameters:
awsCliContainer: awscli
distributionId: $(cfDistributionId)
paths: /iss/*
awsProfile: $(prodDeploymentProfile)
- template: templates/digital/auto-tag.yml@AzureDevOps
parameters:
dependsOn: prodBuildDeployment
userName: SafeliteAzureDevops
userEmail: githubazuredevops@safelite.com

5
src/digital-components/modal/modal.vue
View file

@ -33,7 +33,7 @@
loaderColor="white"
:buttonText="footerButtonText"
@click-event="validateAndEmit"
:class="isFooterButtonDisabled && 'form-test-invalid'" />
:class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'" />
</div>
</div>
</div>
@ -57,6 +57,7 @@ export default {
onModalClosedCallback: {
type: Function,
},
isButtonDisabled: Boolean
},
setup(props) {
const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
@ -80,7 +81,7 @@ export default {
}
},
resetButtonStyle() {
this.$refs.modalButtonMain.resetButtonStyle();
this.$refs.modalButtonMain?.resetButtonStyle();
},
onModalOpened() {
this.onModalOpenedCallback?.();

1
src/layouts/entry-page/entry-page.vue
View file

@ -19,6 +19,7 @@
setup() {
const mainStore = useMainStore();
mainStore.resetISSConfigState();
mainStore.resetPageFields();
return { mainStore };
},
mounted() {

1
src/layouts/provider-preference/provider-preference.spec.js
View file

@ -6,7 +6,6 @@ import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-h
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { nextTick } from "vue";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({

27
src/layouts/provider-preference/provider-preference.vue
View file

@ -1,8 +1,5 @@
<template>
<Form @submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
@ -34,7 +31,12 @@
ref="ShopPreferenceDrawer"
@openSteering="openStateSteeringModal"
:showSteeringLink="showSteeringLink"/>
</Form>
<tpaRecalModal cmsWidgetName="TPARecalModal"
ref="TPARecalModal"
:ackError="ackError"
@buttonClick="navigateWithTPAAck"
/>
</Form>
</template>
<script>
@ -57,6 +59,7 @@ import providerPrefRadio from "./provider-pref-radio/provider-pref-radio";
import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal";
import steeringModal from "@/layouts/provider-preference/steering-modal/steering-modal";
import shopPreferenceModal from "@/layouts/provider-preference/shop-preference-modal/shop-preference-modal";
import tpaRecalModal from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue"
// DEFINE VALIDATION RULES
defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
@ -76,7 +79,8 @@ export default {
providerPrefRadio,
recalModal,
steeringModal,
shopPreferenceModal
shopPreferenceModal,
tpaRecalModal
},
data() {
return {
@ -124,6 +128,9 @@ export default {
}
));
return modifiedAnswers;
},
ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
}
},
methods: {
@ -146,6 +153,10 @@ export default {
navigateForward(scenario){
this.$router.navigate(scenario, this.$route);
},
navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({selectedProvider: this.selectedProvider, tpaAcknowledgement: this.tpaAcknowledgement});
this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
},
forwardButtonAction() {
if(this.selectedProvider) {
let scenario = null;
@ -158,8 +169,8 @@ export default {
{
if(this.mainStore.hasRecalibrationPart)
{
//open tpa adas modal here, else save selection and navigate forward
console.log('add tpa modal code');
this.$refs["TPARecalModal"].openModal();
this.$refs["siteFooter"].removeLoader();
return;
}
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;

3
src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js
View file

@ -4,9 +4,6 @@ import { shallowMount } from '@vue/test-utils';
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { nextTick } from "vue";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({

2
src/layouts/provider-preference/steering-modal/steering-modal.spec.js
View file

@ -5,8 +5,6 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { nextTick } from "vue";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({

58
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js Normal file
View file

@ -0,0 +1,58 @@
import tpaRecalModal from "./tpa-recal-modal.vue"
import { shallowMount } from '@vue/test-utils';
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
setupModalLinks: jest.fn(),
}));
describe('tpa-Recal-Modal.vue', () => {
test('should show error if not acknowledged', () => {
const { wrapper } = setupMocks();
wrapper.vm.acknowledged = false;
wrapper.vm.footerButtonClick();
expect(wrapper.vm.showError).toBeTruthy();
})
test('should not show error if acknowledged', () => {
const { wrapper } = setupMocks();
wrapper.vm.acknowledged = true;
wrapper.vm.footerButtonClick();
expect(wrapper.vm.showError).toBeFalsy();
})
});
function setupMocks(){
const mountOptions = getMountOptions({
router: {
navigate: jest.fn(),
},
});
const wrapper = shallowMount(
tpaRecalModal,
mountOptions
);
const apiResponses = {};
settleAllPromises.mockImplementation(() => apiResponses);
fetchCmsContentForPage.mockImplementation (() => {});
return { wrapper };
}

156
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue Normal file
View file

@ -0,0 +1,156 @@
<template>
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
@footer-button-event="footerButtonClick"
:isButtonDisabled="isButtonDisabled">
<div class="form-test-invalid">
<h5 class="text-center mb-4">{{ModalHeadline}}</h5>
<div>
<div class="mb-4" v-html="ModalBodyText"></div>
<tpaRecalToggle class="mb-5" cmsWidgetName="TPARecalModalToggle"/>
<checkBox
class="mb-2"
:class="showError && ' has-error'"
validationRules="option-required"
checkboxName="tpaAcknowledgement"
buttonID="tpaAcknowledgement"
:tabIndex="0"
:checkboxLabel="ModalSubBodyText"
:screenReaderOnlyText="ModalSubBodyText"
isRequired
ref="tpaAcknowledgement"
v-model="acknowledged"
/>
<div v-if="showError" class="row form-test-error mt-1">
<p>{{ackError}}</p>
</div>
</div>
</div>
</modal>
</template>
<script>
import modal from "@/digital-components/modal/modal";
import tpaRecalToggle from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue"
import checkBox from "@/ux-components/checkbox/checkbox.vue"
export default {
name: "content-group-modal",
props: {
cmsWidgetName: String,
ackError: String,
},
data() {
return {
acknowledged: false,
showError: false
};
},
emits: ["buttonClick"],
computed: {
ModalName() {
return this.cmsWidgetName;
},
ModalHeadline() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
},
ModalBodyText() {
return this.getCmsContent(this.cmsWidgetName, "BodyText");
},
ModalSubBodyText() {
return this.getCmsContent(this.cmsWidgetName, "BodyText2");
},
ModalCloseButtonText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
isButtonDisabled() {
return !this.acknowledged
}
},
methods: {
openModal() {
this.$refs[this.ModalName].openModal();
},
footerButtonClick() {
//check if acked, if not show error
if(this.acknowledged)
{
this.$refs[this.ModalName]?.closeModal();
this.$emit("buttonClick");
}
else
{
this.$refs[this.ModalName]?.resetButtonStyle();
this.showError = true;
}
},
},
watch: {
acknowledged(){
this.showError = false;
}
},
components: {
modal,
tpaRecalToggle,
checkBox,
},
};
</script>
<style lang="scss">
.modal {
&.modal-component {
.modal-dialog {
.modal-content {
.modal-body {
.modal-sub-body {
color: $gray-600;
}
ul {
margin-bottom: 0;
}
p {
&:last-child {
margin-bottom: 0;
}
margin-bottom: .5rem;
}
}
}
}
}
}
.form-check {
.form-check-input {
&:checked {
+ label {
p {
font-weight: 400 !important;
font-size: 1rem !important;
color: $gray-600 !important;
line-height: 1.5rem;
}
}
}
}
p {
font-weight: 400 !important;
font-size: 1rem !important;
color: $gray-600 !important;
line-height: 1.5rem;
}
}
.form-test-error {
p {
font-weight: 500;
}
}
</style>

85
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js Normal file
View file

@ -0,0 +1,85 @@
/* eslint-env jest */
import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import { issPageValues } from '@/router/router-constants/issPage-values';
import { queryStrings } from '@/constants/query-strings';
import { GaActions } from "@/constants/analytics";
import tpaRecalToggle from './tpa-recal-toggle.vue';
const mockText = Object.freeze({
HEADER: 'Mock Header',
BODY: 'Mock Body',
});
const mockRoute = {
query: {
issPage: issPageValues.PROVIDER_PREFERENCE,
},
};
const mockRouter = {
navigate: jest.fn(),
};
const mountOptions = {
global: {
propsData: {
cmsWidgetName: "MockWidgetName",
},
mixins: [
{
methods: {
getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
if (cmsWidgetName === 'MockWidgetName') {
if (fieldName === 'HeaderText') {
return mockText.HEADER;
}
if (fieldName === 'BodyText') {
return mockText.BODY;
}
}
return '';
}),
pushEventToGA: jest.fn()
},
computed: {
GaActions() {
return GaActions;
},
queryStrings() {
return queryStrings;
},
}
},
],
mocks: {
$route: mockRoute,
$router: mockRouter,
},
},
};
describe('more details section', () => {
test('should NOT be displayed on the screen as a default.', () => {
const { container } = render(tpaRecalToggle, mountOptions);
const moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
expect(moreDetailsSection).not.toBeVisible();
});
test('should toggle when arrow clicked', async () => {
const user = userEvent.setup();
const { container } = render(tpaRecalToggle, mountOptions);
const toggleLink = container.querySelector('#moreDetails');;
await user.click(toggleLink);
let moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
expect(moreDetailsSection).toBeVisible();
await user.click(toggleLink);
moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
expect(moreDetailsSection).not.toBeVisible();
});
});

111
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue Normal file
View file

@ -0,0 +1,111 @@
<template>
<div class="tpa-recal-toggle mt-2 mb-3">
<div
class="tpa-toggle"
:class="[isDetailVisible ? 'active' : '']"
@click="handleClickToggle"
>
<textLink
linkType="text"
href="#!"
:text="textForToggle"
id="moreDetails"
/>
</div>
<Transition>
<div
v-show="isDetailVisible"
id="tpa-recal-detail-wrapper"
class="mt-2"
>
<div
v-html="detailContent"
id="tpa-recal-detail-content"
class="mb-2"
/>
</div>
</Transition>
</div>
</template>
<script>
import textLink from '@/ux-components/text-link/text-link.vue';
export default {
name: 'tpa-recal-toggle',
props: {
cmsWidgetName: String,
},
components: {
textLink,
},
data() {
return {
isDetailVisible: false,
};
},
computed: {
textForToggle() {
return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
},
detailContent() {
return this.getCmsContent(this.cmsWidgetName, 'BodyText');
},
},
methods: {
handleClickToggle() {
this.isDetailVisible = !this.isDetailVisible;
},
},
};
</script>
<style lang="scss">
.tpa-recal-toggle {
.tpa-toggle {
&::after {
content: "";
transition: all 0.5s ease;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
margin-left: 0.5rem;
width: 16px;
height: 9px;
display: inline-block;
}
&.active::after {
transform: rotate(180deg);
}
a {
font-size: 0.875rem;
}
}
}
#tpa-recal-detail-wrapper {
// START - Vue Transition
&.v-enter-active,
&.v-leave-active {
transition: opacity 250ms ease-in;
}
&.v-enter-from,
&.v-leave-to {
opacity: 0;
}
// END - Vue Transition
img {
width: 100%;
}
}
#tpa-recal-detail-content {
font-size: 1rem;
p {
font-size: 1rem;
margin-bottom: 0;
}
ol {
margin-top: 0.5rem;
margin-bottom: 0;
}
}
</style>

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

@ -26,6 +26,14 @@ const lookupVehicleByVin = {
},
},
};
const lookupVehicleByVinError = {
methodName: 'lookupVehicleByVin',
mockResponse: {
data: {
error: true,
},
},
};
const getPartsOrQuestions = {
methodName: 'getPartsOrQuestions',
mockResponse: null,
@ -457,6 +465,34 @@ describe('vin-lookup.vue', () => {
);
});
});
test("Selected vehicle VIN do not match vehicles (CarIDs) in our system then navigate forward to bailout page.", async () => {
//Arrange
const user = userEvent.setup();
lookupVehicleByVin.mockResponse.data.error = true;
jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
.mockResolvedValue(lookupVehicleByVinError.mockResponse);
mountOptions.data = () => ({
needToLookupVehicle: true,
bailout: true,
vin: mockValidVin,
});
const { container } = render(VinLookupComponent, mountOptions);
const continueButton = container.querySelector(continueButtonQuerySelector);
await user.click(continueButton);
await flushPromises();
await waitFor(() => {
expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
expect(mockRouter.navigate).toHaveBeenCalledWith(
navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
mockRoute
);
});
});
});
});
});

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

@ -71,6 +71,7 @@ export default {
vin: this.getVinFromStore(),
forwardButtonCarStyle:"",
vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
bailout: false,
};
},
provide() {
@ -147,10 +148,15 @@ export default {
// Temp solution to turn on 'disabled' style on the Continue button
// because the form itself actually passes its client-side validation.
// SSR-189 Scenario #4.
this.$refs.siteFooter.disableForwardButton();
return;
this.$refs.siteFooter.enableForwardAction();
this.bailout=true
}
if(this.bailout){
return this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route);
}
// Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
}

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

@ -74,7 +74,7 @@ const routingTable = function(store) {
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.VEHICLE_STYLE
destinationIssPageValue: issPageValues.VEHICLE_SELECTION
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
@ -141,6 +141,10 @@ const routingTable = function(store) {
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.COVERAGE_STATEMENT
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
destinationIssPageValue: issPageValues.BAILOUT_PAGE
}
]
},

22
src/store/index.js
View file

@ -1223,7 +1223,29 @@ export const useMainStore = defineStore({
this.resetGlassPartsState();
this.resetSupportingItemsState();
this.resetVapsState();
},
resetPageFields()
{
this.order.policy.policyNumber = null;
this.order.policy.dateOfLoss = null;
this.order.policy.damageCause = null;
this.order.policy.damageCity = null;
this.order.policy.damageState = null;
this.order.customer.phoneNumber = null;
this.order.customer.emailAddress = null;
this.order.customer.firstName = null;
this.order.customer.lastName = null;
this.order.customer.address.city = null;
this.order.customer.address.state = null;
this.order.customer.address.zipCode = null;
this.order.customer.address.streetAddress = null;
this.order.customer.address.streetAddress2 = null;
this.resetVehicleState();
this.resetDamageState();
}
},
persist: true
});

12
src/ux-components/checkbox/checkbox.vue
View file

@ -8,9 +8,12 @@
:name="checkboxName"
:id="buttonID"
:tabindex="tabIndex"
:aria-required="isRequired" />
:aria-required="isRequired"
@change="handleCheckChange"
:ref="checkboxName"
/>
<label class="d-flex align-items-start" :for="buttonID">
<p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
<p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
</label>
</div>
@ -28,6 +31,11 @@ export default {
isRequired: Boolean,
hasError: Boolean,
},
methods: {
handleCheckChange() {
this.$emit("update:modelValue", this.$refs[this.checkboxName].checked);
},
},
};
</script>