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

Merge pull request #527 from Safelite/feature/richardson/SSR-780

Browse source 
Spinner modal on navigation where no spinner on button
This commit is contained in:
brich1212safe 2024-01-09 12:52:55 -05:00 committed by GitHub
commit e60ce4d70e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 235 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/App.vue
View file

@ -1,12 +1,42 @@
<template>
<router-view v-slot="{ Component }">
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
<transition
:duration="{ enter: 200, leave: 200 }"
name="route-fade"
mode="out-in">
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<component :is="Component" />
</transition>
</router-view>
<loadingModal
:showLoader="shouldShowLoader"
:showTextCarousel="shouldShowTextCarousel" />
</template>
<script>
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
export default {
name: 'app',
components: {
loadingModal
},
setup() {
const { globalNonpersistedState } = showIssLoadingModal();
return { globalNonpersistedState };
},
computed: {
shouldShowLoader() {
return this.globalNonpersistedState.showLoadingModal;
},
shouldShowTextCarousel() {
return this.globalNonpersistedState.showTextCarousel;
}
}
};
</script>
<style lang="scss">
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";

20
src/helpers/loading-modal-helper.js Normal file
View file

@ -0,0 +1,20 @@
import { reactive } from 'vue';
// state encapsulated and managed by the composable
const globalNonpersistedState = reactive({
showLoadingModal: true,
showTextCarousel: false
});
const showIssLoadingModal = (newValue, showTextCarousel = false) => {
if (newValue !== undefined) {
globalNonpersistedState.showLoadingModal = newValue;
}
if (showTextCarousel !== undefined) {
globalNonpersistedState.showTextCarousel = showTextCarousel;
}
return { globalNonpersistedState };
};
export default showIssLoadingModal;

34
src/iss-components/loading-modal/loading-modal.vue
View file

@ -1,6 +1,6 @@
<template>
<div
v-if="isModalVisible"
v-if="showModalContent"
class="container-fluid modal-loader">
<div class="row g-2 h-100 d-flex align-items-center">
<div class="container-fluid overflow-hidden">
@ -13,7 +13,9 @@
</div>
</div>
</div>
<div class="row">
<div
v-if="showTextCarouselContent"
class="row">
<div class="col">
<div class="text-container slide">
<p
@ -36,16 +38,34 @@
export default {
name: 'loading-modal',
props: {
textSlides: Array
textSlides: Array,
showLoader: {
type: Boolean,
default: false
},
showTextCarousel: {
type: Boolean,
default: false
}
},
data() {
return {
isModalVisible: false
isModalVisible: false,
isModalTextCarouselVisible: false
};
},
computed: {
showModalContent() {
return this.isModalVisible || this.showLoader;
},
showTextCarouselContent() {
return this.isModalTextCarouselVisible || this.showTextCarousel;
}
},
methods: {
showModal() {
showModal(showTextCarousel = true) {
// Display modal
this.isModalTextCarouselVisible = showTextCarousel;
this.isModalVisible = true;
// Force page reload on back button
window.addEventListener(
@ -68,6 +88,8 @@ export default {
</script>
<style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss";
.modal-loader {
position: fixed;
top: 0;
@ -83,7 +105,7 @@ export default {
background: $gray-100;
.tagbg {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
background-image: url($svg-loading-modal-image);
background-repeat: no-repeat;
background-position: center center;
background-size: 96px;

16
src/layouts/address-lookup/address-lookup.spec.js
View file

@ -2,6 +2,7 @@
import addressLookup from '@/layouts/address-lookup/address-lookup.vue';
// Supporting Files
import baseMixin from '@/mixins/base-mixin';
import settleAllPromises from '@/helpers/layout-helper.js';
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
@ -84,6 +85,8 @@ function setupMocks({
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
wrapper.vm.setCmsContent = jest.fn();
wrapper.vm.$router.navigateWithSpinner = jest.fn();
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@ -164,7 +167,8 @@ describe('address-lookup.vue', () => {
});
// eslint-disable-next-line max-len
test('if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert',
test(
'if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert',
async () => {
// Arrange
const mockRegistrationAddress = {
@ -208,7 +212,8 @@ describe('address-lookup.vue', () => {
// Assert
expect(wrapper.findComponent({ ref: 'alertVinLookupsByHomeAddressNotAllowed' }).isVisible()).toBe(true);
});
}
);
test('if no vehicles found, display Vin Not Found alert', async () => {
// Arrange
@ -251,10 +256,10 @@ describe('address-lookup.vue', () => {
});
// Act
await wrapper.vm.backButtonAction();
await wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
});
test('if the car entered matches one of the vehicles found navigate forward', async () => {
@ -358,7 +363,8 @@ describe('address-lookup.vue', () => {
});
// eslint-disable-next-line max-len
test('if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
test(
'if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
async () => {
// Arrange
const mockRegistrationAddress = {

7
src/layouts/address-lookup/address-lookup.vue
View file

@ -62,7 +62,7 @@
:isDisabled="!meta.valid"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -205,11 +205,6 @@ export default {
arePagePrerequisitesValid() {
return useMainStore().order.vehicle.carId !== null;
},
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
attachCustomEvents() {
this.prependActionToMethod(this, this.forwardButtonAction, () => {
this.pushEventToGA(

10
src/layouts/address-vehicles/address-vehicles.spec.js
View file

@ -1,4 +1,5 @@
import addressVehicles from '@/layouts/address-vehicles/address-vehicles.vue';
import baseMixin from '@/mixins/base-mixin';
import settleAllPromises from '@/helpers/layout-helper.js';
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
@ -115,6 +116,8 @@ function setupMocks({
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
wrapper.vm.setCmsContent = jest.fn();
wrapper.vm.$router.navigateWithSpinner = jest.fn();
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
@ -127,10 +130,10 @@ describe('address-vehicles.vue', () => {
const { wrapper } = setupMocks({});
// Act
await wrapper.vm.backButtonAction();
await wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toBeCalled();
expect(wrapper.vm.$router.navigateWithSpinner).toBeCalled();
});
test('navigateForward should be called if forwardButtonAction is run', async () => {
@ -190,7 +193,8 @@ describe('address-vehicles.vue', () => {
});
// eslint-disable-next-line max-len
test('Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward',
test(
'Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward',
async () => {
// Arrange
const { wrapper } = setupMocks({});

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

@ -56,7 +56,7 @@
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
@ -231,9 +231,6 @@ export default {
}
return false;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
const vinLookup = await useMainStore()
.lookupVehicleByVin(this.selectedVehicle.vin)

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

@ -15,7 +15,7 @@
:validationRules="rules.optionRequired"
:index="currentGlassIndex"
@forwardButtonAction="forwardButtonAction"
@backClick="navigateBack" />
@backClick="navigateBackByVehicleQuestions" />
</Form>
</template>
<script>

10
src/layouts/contact-details/contact-details.spec.js
View file

@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
import contactDetails from '@/layouts/contact-details/contact-details.vue';
// Supporting Files
import baseMixin from '@/mixins/base-mixin';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import { getRandomString, getRandomInt, getRandomBoolean } from '@/helpers/data-generation.js';
import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
@ -234,16 +235,17 @@ describe('contactDetails.vue', () => {
// Arrange
const wrapper = shallowMount(contactDetails, getMountOptions({
router: {
navigate: jest.fn()
navigateWithSpinner: jest.fn()
}
}));
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
// Act
wrapper.vm.backButtonAction();
wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigate)
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
expect(wrapper.vm.$router.navigateWithSpinner)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
});
test('Forward button clicked triggers navigation', () => {

13
src/layouts/contact-details/contact-details.vue
View file

@ -55,7 +55,6 @@
checkboxName="requestTextUpdates"
buttonID="requestTextUpdates"
:checkboxLabel="requestTextUpdatesCheckboxText" />
<textareaQuestion
ref="notesQuestion"
v-model="notesForTechnician"
@ -66,11 +65,10 @@
:cmsWidgetName="widget.notesQuestion"
maxLength="250"
:inputRows="4" />
<p
ref="disclaimerText"
class="caption dark-gray mt-6">
{{ textUpdateDisclaimerText }} I also agree to Safelite's
{{ textUpdateDisclaimerText }} I also agree to Safelite's
<textLink
ref="privacyPolicyLink"
class="normal-line-height"
@ -85,14 +83,13 @@
text="Terms of Use"
href="//www.safelite.com/terms-of-use" />.
</p>
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -186,12 +183,6 @@ export default {
},
methods:
{
/**
* @summary Steps to perform when back button clicked.
*/
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
/**
* @summary Steps to perform when forward button clicked.
*/

2
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -87,7 +87,7 @@
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="forwardButtonAction" />
</div>
</div>

10
src/layouts/duplicate-check/duplicate-check.spec.js
View file

@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
import duplicateCheck from '@/layouts/duplicate-check/duplicate-check.vue';
// Supporting Files
import baseMixin from '@/mixins/base-mixin';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
import { getRandomString } from '@/helpers/data-generation.js';
@ -333,16 +334,17 @@ describe('duplicateCheck.vue', () => {
// Arrange
const wrapper = shallowMount(duplicateCheck, getMountOptions({
router: {
navigate: jest.fn()
navigateWithSpinner: jest.fn()
}
}));
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
// Act
wrapper.vm.backButtonAction();
wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigate)
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
expect(wrapper.vm.$router.navigateWithSpinner)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
});

8
src/layouts/duplicate-check/duplicate-check.vue
View file

@ -33,7 +33,7 @@
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -122,12 +122,6 @@ export default {
}
},
methods: {
/**
* @summary Steps to perform when back button clicked.
*/
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
/**
* @summary Steps to perform when forward button clicked.
*/

9
src/layouts/license-plate-lookup/license-plate-lookup.spec.js
View file

@ -2,6 +2,7 @@
import licensePlateLookup from '@/layouts/license-plate-lookup/license-plate-lookup.vue';
// Supporting Files
import baseMixin from '@/mixins/base-mixin';
import settleAllPromises from '@/helpers/layout-helper.js';
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
@ -93,6 +94,8 @@ function setupMocks({
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
wrapper.vm.setCmsContent = jest.fn();
wrapper.vm.$router.navigateWithSpinner = jest.fn();
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@ -189,10 +192,10 @@ describe('license-plate-lookup.vue', () => {
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.backButtonAction();
await wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
});
test('License plate found and matches entered vehicle => navigateForwardWithSingleCarMatch', async () => {
@ -213,7 +216,7 @@ describe('license-plate-lookup.vue', () => {
expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
});
// eslint-disable-next-line max-len
// eslint-disable-next-line max-len, function-paren-newline
test('if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
async () => {
// Arrange

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

@ -64,7 +64,7 @@
class="mt-5"
:isForwardActionDisabled="!meta.valid"
cmsWidgetName="SiteFooterWidget"
@backClicked="backButtonAction"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
@ -223,10 +223,6 @@ export default {
loadDefaultsFromStore() {
this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
},
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
attachCustomEvents() {
this.prependActionToMethod(this, this.forwardButtonAction, () => {
this.pushEventToGA(

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

@ -16,7 +16,7 @@
:validationRules="rules.optionRequired"
:index="currentGlassIndex"
@forwardButtonAction="forwardButtonAction"
@backClick="navigateBack" />
@backClick="navigateBackByVehicleQuestions" />
</Form>
</template>
<script>

5
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -14,7 +14,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -56,9 +56,6 @@ export default {
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
return this.navigateForward();
},

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

@ -14,7 +14,7 @@
:validationRules="rules.optionRequired"
:index="currentGlassIndex"
@forwardButtonAction="forwardButtonAction"
@backClick="navigateBack" />
@backClick="navigateBackByVehicleQuestions" />
</Form>
</template>

7
src/layouts/payment-page/payment-page.vue
View file

@ -14,7 +14,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -68,14 +68,9 @@ export default {
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
},
navigateForward() {
}
}

12
src/layouts/policy-endorsements/policy-endorsements.spec.js
View file

@ -2,6 +2,7 @@
import policyEndorsements from '@/layouts/policy-endorsements/policy-endorsements.vue';
// Supporting Files
import baseMixin from '@/mixins/base-mixin';
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
@ -128,16 +129,17 @@ describe('policyEndorsements.vue', () => {
// Arrange
const wrapper = shallowMount(policyEndorsements, getMountOptions({
router: {
navigate: jest.fn()
navigateWithSpinner: jest.fn()
}
}));
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
// Act
wrapper.vm.backButtonAction();
wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigate)
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
expect(wrapper.vm.$router.navigateWithSpinner)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
});
test('Forward button clicked with valid car id triggers navigation', () => {
@ -170,7 +172,7 @@ describe('policyEndorsements.vue', () => {
}));
wrapper.setData({
hasValidCarId: false,
hasValidCarId: false
});
// Act

5
src/layouts/policy-endorsements/policy-endorsements.vue
View file

@ -48,7 +48,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -136,9 +136,6 @@ export default {
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
// TO DO: remove hard coding and update data format once service returns endorsement questions
if (this.educatorEndorsement) {

8
src/layouts/policy-holder-details/policy-holder-details.spec.js
View file

@ -1,7 +1,7 @@
import policyHolderDetails from '@/layouts/policy-holder-details/policy-holder-details.vue';
// Supporting files
// Supporting files
import baseMixin from '@/mixins/base-mixin';
import { shallowMount } from '@vue/test-utils';
import settleAllPromises from '@/helpers/layout-helper.js';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
@ -60,6 +60,8 @@ function setupMocks() {
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
wrapper.vm.setCmsContent = jest.fn();
wrapper.vm.$router.navigateWithSpinner = jest.fn();
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@ -91,10 +93,10 @@ describe('navigation', () => {
});
// Act
await wrapper.vm.backButtonAction();
await wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
});
test('if the car entered matches one of the vehicles found navigate forward', async () => {

6
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -43,7 +43,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -120,10 +120,6 @@ export default {
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
return this.navigateForward();

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

@ -26,7 +26,7 @@
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="backButtonAction"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
@ -166,9 +166,6 @@ export default {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
navigateForward(scenario) {
this.$router.navigate(scenario, this.$route);
},

5
src/layouts/review-page/review-page.vue
View file

@ -83,7 +83,7 @@
class="mt-5"
cmsWidgetName="SiteFooterWidget"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</Form>
@ -253,9 +253,6 @@ export default {
&& customerReqs
);
},
backButtonAction() {
this.$router.navigate(navigationScenarios.CLICKED_BACK, this.$route);
},
editVehicle() {
this.$router.navigateWithoutSaving(
navigationScenarios.CLICKED_VEHICLE_EDIT,

5
src/layouts/schedule-page/schedule-page.vue
View file

@ -53,7 +53,7 @@
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
@ -456,9 +456,6 @@ export default {
}
}
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
this.updateSupportingItems();
this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);

8
src/layouts/service-location/service-location.spec.js
View file

@ -1,3 +1,4 @@
import baseMixin from '@/mixins/base-mixin';
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import serviceLocation from '@/layouts/service-location/service-location.vue';
@ -18,6 +19,9 @@ function setupMocks() {
})
);
wrapper.vm.$router.navigateWithSpinner = jest.fn();
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
return { wrapper };
}
@ -92,10 +96,10 @@ describe('navigation', () => {
});
// Act
await wrapper.vm.backButtonAction();
await wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
});
});

8
src/layouts/service-location/service-location.vue
View file

@ -86,7 +86,7 @@
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
@backClicked="backButtonAction"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
@ -329,12 +329,6 @@ export default {
&& useMainStore().order.serviceLocation.zipCode !== null
);
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async reloadShopData(zipCode) {
await this.$refs.shopQuestion.reloadShopData(zipCode);
},

5
src/layouts/service-packages/service-packages.vue
View file

@ -27,7 +27,7 @@
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@backClicked="navigateBack"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
@ -167,9 +167,6 @@ export default {
vapsItemsSelectedAction(vapsItemsSelected) {
this.selectedVaps = vapsItemsSelected;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
if (!allGlassPartsAndItemsHavePrices(parts)) {

5
src/layouts/tpa-confirmation/tpa-confirmation.vue
View file

@ -14,7 +14,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -63,9 +63,6 @@ export default {
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
return this.navigateForward();
},

12
src/layouts/tpa-search/tpa-search.spec.js
View file

@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
import tpaSearch from '@/layouts/tpa-search/tpa-search.vue';
// Supporting Files
import baseMixin from '@/mixins/base-mixin';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import { useMainStore } from '@/store';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
@ -47,6 +48,9 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
const wrapper = shallowMount(tpaSearch, mountOptions);
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
wrapper.vm.setCmsContent = jest.fn();
wrapper.vm.$router.navigateWithSpinner = jest.fn();
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
return { wrapper };
}
@ -345,7 +349,7 @@ describe('TPA search page', () => {
mountOptions.mixins = [{
methods: {
getCmsContent: jest.fn().mockImplementation((widget, field) =>
(widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
(widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
? cmsContent
: ''))
}
@ -366,7 +370,7 @@ describe('TPA search page', () => {
mountOptions.mixins = [{
methods: {
getCmsContent: jest.fn().mockImplementation((widget, field) =>
(widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
(widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
? cmsContent
: ''))
}
@ -957,10 +961,10 @@ describe('TPA search page', () => {
const { wrapper } = getMountedComponent();
// Act
wrapper.vm.backButtonAction();
wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
});
describe('forwardButtonAction', () => {
test('invokes navigate method with safelite shop scenario when selectedProviderIsSafeliteShop true', async () => {

5
src/layouts/tpa-search/tpa-search.vue
View file

@ -105,7 +105,7 @@
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</Form>
</div>
@ -337,9 +337,6 @@ export default {
this.providers = await this.getProviderButtonData();
this.mapZipCode = this.zipCode;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
const scenario = this.selectedProviderIsSafeliteShop
? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP

7
src/layouts/tpa-submit/tpa-submit.vue
View file

@ -14,7 +14,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -68,14 +68,9 @@ export default {
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
return this.navigateForward();
},
navigateForward() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,

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

@ -60,7 +60,7 @@
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
@ -236,12 +236,6 @@ export default {
}
return false;
},
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
getDamageLocationsFromStore() {
const glassSelections = [];
@ -268,7 +262,6 @@ export default {
return glassSelections;
},
getWindshieldOptionsFromStore() {
const windShieldOptions = {
selectedWindshieldDamageType: '',
@ -315,7 +308,6 @@ export default {
return windShieldOptions;
},
getDoorSidesFromStore() {
const doorSides = [];
if (
@ -332,7 +324,6 @@ export default {
return doorSides;
},
getDriverSideReplaceOptionsFromStore() {
const driverSideReplaceOptions = [];
@ -344,7 +335,6 @@ export default {
return driverSideReplaceOptions;
},
getPassengerSideReplaceOptionsFromStore() {
const passengerSideReplaceOptions = [];
@ -356,14 +346,12 @@ export default {
return passengerSideReplaceOptions;
},
getRearReplaceOptionsFromStore() {
const rearReplaceOptions = this.mainStore.order.damage
.glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
return rearReplaceOptions;
},
async forwardButtonAction() {
this.mainStore.saveVehicleDamage(
this.isWindshieldRepair,
@ -403,7 +391,6 @@ export default {
return null;
},
selectedGlassToReplace() {
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {

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

@ -1,5 +1,6 @@
/* eslint-env jest */
import { mount } from '@vue/test-utils';
import baseMixin from '@/mixins/base-mixin';
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
import queryStrings from '@/constants/query-strings';
import { GaActions } from '@/constants/analytics';
@ -56,7 +57,8 @@ function setupMocks() {
};
const mockRouter = {
navigate: jest.fn()
navigate: jest.fn(),
navigateWithSpinner: jest.fn()
};
const mockIsVinbyAddressPermissibleToBeFalse = {
@ -105,7 +107,8 @@ function setupMocks() {
}),
getFooterInfoBoxHeight: jest.fn(() => 80),
getPageNameByQueryString: jest.fn(() => 'vehicle-lookup'),
pushEventToGA: jest.fn()
pushEventToGA: jest.fn(),
navigateBack: baseMixin.methods.navigateBack
}
}
],
@ -121,6 +124,8 @@ function setupMocks() {
}
});
// wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
return { mockRoute, mockRouter, wrapper, mockIsVinbyAddressPermissibleToBeFalse };
}
@ -178,8 +183,8 @@ describe('vehicle-lookup.vue', () => {
const { mockRoute, mockRouter, wrapper } = setupMocks();
await wrapper.get('[data-test-id="site-footer-back-button"]').trigger('click');
expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
expect(mockRouter.navigate)
expect(mockRouter.navigateWithSpinner).toHaveBeenCalledTimes(1);
expect(mockRouter.navigateWithSpinner)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
});
@ -264,10 +269,10 @@ describe('vehicle-lookup.vue', () => {
});
/**
* To Do: Error message is not displayed when running test
* but in reality it shows up. Need to find out
* how to write a test that verifies the error message is displayed.
*/
* To Do: Error message is not displayed when running test
* but in reality it shows up. Need to find out
* how to write a test that verifies the error message is displayed.
*/
// test.only('Error message is diplayed when no selection is made
// and "Continue" button clicked.', async () => {
// const { wrapper } = setupMocks();

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

@ -26,7 +26,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
class="mt-5"
@backClicked="backButtonAction"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
@ -96,12 +96,6 @@ export default {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
switch (this.selectedVinLookupMethod) {
case vinLookupMethodSelections.MANUALVIN:

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

@ -220,7 +220,7 @@ describe('vehicle-parts.vue', () => {
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigate: jest.fn()
navigateWithSpinner: jest.fn()
},
route: {
query: {
@ -238,10 +238,10 @@ describe('vehicle-parts.vue', () => {
(c) => c(wrapper.vm)
);
wrapper.vm.navigateBack();
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
wrapper.vm.$route
);
@ -252,7 +252,7 @@ describe('vehicle-parts.vue', () => {
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigate: jest.fn()
navigateWithSpinner: jest.fn()
},
route: {
query: {
@ -270,10 +270,10 @@ describe('vehicle-parts.vue', () => {
(c) => c(wrapper.vm)
);
wrapper.vm.navigateBack();
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
wrapper.vm.$route
);

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

@ -49,7 +49,7 @@
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBack"
@backClicked="navigateBackByVehicleQuestions"
@ForwardClicked="forwardButtonAction" />
</div>
</div>

5
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -63,7 +63,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
@backClicked="navigateBack" />
</div>
</div>
</div>
@ -181,9 +181,6 @@ export default {
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
return this.navigateForward();
},

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

@ -2,6 +2,7 @@
import '@testing-library/jest-dom';
import { flushPromises } from '@vue/test-utils';
import { render, waitFor } from '@testing-library/vue';
import baseMixin from '@/mixins/base-mixin';
import { createTestingPinia } from '@pinia/testing';
import userEvent from '@testing-library/user-event';
import errorMessages from '@/constants/error-messages';
@ -132,7 +133,8 @@ const mockRoute = {
}
};
const mockRouter = {
navigate: jest.fn()
navigate: jest.fn(),
navigateWithSpinner: jest.fn()
};
const maska = jest.fn();
jest.mock('@/helpers/damage-helper', () => ({
@ -147,6 +149,7 @@ const mountOptions = {
{
methods: {
getCmsContent: jest.fn(() => ''),
navigateBack: baseMixin.methods.navigateBack,
getFooterInfoBoxHeight: jest.fn(() => 80),
cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
getPageNameByQueryString: jest.fn(() => ''),
@ -275,8 +278,8 @@ describe('vin-lookup.vue', () => {
await user.click(backButton);
expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
expect(mockRouter.navigate).toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
expect(mockRouter.navigateWithSpinner).toHaveBeenCalledTimes(1);
expect(mockRouter.navigateWithSpinner).toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
});
// eslint-disable-next-line max-len

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

@ -31,7 +31,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
class="mt-5"
@backClicked="backButtonAction"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
@ -166,12 +166,6 @@ export default {
hasValidCarId() {
return this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0';
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
async forwardButtonAction() {
this.resetActiveAlert();

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

@ -23,6 +23,11 @@ export default {
const footerInfoBox = document.querySelector('.footer#infoBox');
return footerInfoBox ? footerInfoBox.offsetHeight : 0;
},
navigateBack(vm) {
const self = vm ?? this;
self.$router.navigateWithSpinner(this.navigationScenarios.CLICKED_BACK, self.$route);
},
savePageDataToStore(page, data) {
useMainStore().updatePageData({ page, data });
},

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

@ -432,7 +432,7 @@ export default {
}
},
navigateBack(vm) {
navigateBackByVehicleQuestions(vm) {
const self = vm ?? this;
const partsOrQuestions = (
self.mainStore.pageData(issPageValues.CAPABILITY_QUESTIONS)
@ -476,7 +476,7 @@ export default {
backNavigationScenario = navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS;
}
self.$router.navigate(backNavigationScenario, self.$route);
self.$router.navigateWithSpinner(backNavigationScenario, self.$route);
}
}
};

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

@ -26,7 +26,8 @@ function setupMocks({ issPage = issPageValues.VIN_LOOKUP }) {
const mocks = getMountOptions({
router: {
navigate: jest.fn()
navigate: jest.fn(),
navigateWithSpinner: jest.fn()
},
route: {
query: {
@ -2110,17 +2111,17 @@ describe('vehicle-questions-mixin', () => {
});
});
describe('navigateBack', () => {
describe('navigateBackByVehicleQuestions', () => {
test('current page is coverage-statement and damage is repair => go to vehicle-damage', () => {
// Arrange
const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
useMainStore().order.damage.isRepair = true;
// Act
wrapper.vm.navigateBack();
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_REPAIR,
{ query: { issPage: issPageValues.COVERAGE_STATEMENT } }
);
@ -2138,10 +2139,10 @@ describe('vehicle-questions-mixin', () => {
wrapper.vm.hasCapabilityQuestions = jest.fn().mockReturnValue(true);
// Act
wrapper.vm.navigateBack();
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE,
{ query: { issPage: issPageValues.MOLDING_QUESTIONS } }
);
@ -2157,10 +2158,10 @@ describe('vehicle-questions-mixin', () => {
wrapper.vm.hasCapabilityQuestions = jest.fn().mockReturnValue(true);
// Act
wrapper.vm.navigateBack();
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
{ query: { issPage: issPageValues.MOLDING_QUESTIONS } }
);

26
src/router/index.js
View file

@ -11,6 +11,7 @@ import { isSavedSessionStillActive } from '@/helpers/session-helper';
import { getDeviceIdValue, getISSCookie, updateOrCreateISSCookie, updateSessionIdCookie } from '@/helpers/cookie-helper';
import { experimentTriggers } from '@/constants/experiments';
import applicationConfig from '@/constants/application-config';
import showIssLoadingModal from '@/helpers/loading-modal-helper';
import analyticsMixin from '@/mixins/analytics-mixin';
import { saveSession } from '@/helpers/order-helper.js';
@ -118,6 +119,15 @@ const router = createRouter({
}
});
router.beforeEach(async (to, from, next) => {
const fromQueryPage = from.query?.issPage;
if (fromQueryPage === undefined) {
showIssLoadingModal(true);
}
next();
});
router.afterEach(async (to, from) => {
/*eslint-disable-line*/
const store = useMainStore();
@ -128,6 +138,8 @@ router.afterEach(async (to, from) => {
store.clearSaveSessionPromise();
}
showIssLoadingModal(false);
const saveSessionSynchronous = !!from.params[routerParams.SAVE_SESSION_SYNCHRONOUS];
await saveSession({ shouldAwaitSaveSessionQueue: saveSessionSynchronous }).catch((error) => {
if (from.name === issPageValues.WELCOME_PAGE) {
@ -209,13 +221,21 @@ router.navigate = (
navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
};
router.navigateWithSpinner = (
scenario,
currentRoute
) => {
navigate(scenario, currentRoute, undefined, undefined, undefined, true);
};
// Navigate to the next route, depending on the scenario.
function navigate(
scenario,
currentRoute,
optionalQuery = {},
optionalParams = {},
optionalPageData = {}
optionalPageData = {},
forceSpinner = false
) {
if (!scenario) {
window.console.error('No scenario provided. Please review the routing table.');
@ -230,6 +250,10 @@ function navigate(
return;
}
if (forceSpinner) {
showIssLoadingModal(true);
}
if (scenario === navigationScenarios.CLICKED_BACK_PREVIOUS) {
// Update page to the prevous page in the router.
// If we need to worry about typing this in from outside of the app,

1
src/styles/ux-variables-svg-strings.scss
View file

@ -1,6 +1,7 @@
$svg-date-picker-nav-back-button: "data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
$svg-date-picker-forward-button: "data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
$svg-drop-off-alert: "data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A";
$svg-loading-modal-image: "data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
$svg-shop-list-button-green-availability: "data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A";
$svg-shop-list-button-orange-availability: "data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 0C9.81368 0 12.5 2.68632 12.5 6C12.5 9.31368 9.81368 12 6.5 12C3.18632 12 0.5 9.31368 0.5 6C0.5 2.68632 3.18632 0 6.5 0ZM6.5 0.84C3.6548 0.84 1.34 3.1548 1.34 6C1.34 8.8452 3.6548 11.16 6.5 11.16C9.3452 11.16 11.66 8.8452 11.66 6C11.66 3.1548 9.3452 0.84 6.5 0.84ZM7.90018 4.00596C8.06422 3.84204 8.33002 3.84192 8.49406 4.00596C8.6581 4.17 8.6581 4.43592 8.49406 4.59996L7.0939 6L8.49406 7.40004C8.6581 7.56408 8.6581 7.83 8.49406 7.99404C8.4121 8.076 8.30458 8.11704 8.19706 8.11704C8.08966 8.11704 7.98214 8.076 7.90018 7.99404L6.50002 6.594L5.09986 7.99404C5.01778 8.076 4.91038 8.11704 4.80286 8.11704C4.69546 8.11704 4.58794 8.076 4.50598 7.99404C4.34182 7.83 4.34182 7.56408 4.50598 7.40004L5.90614 6L4.50598 4.59996C4.34182 4.43592 4.34182 4.17 4.50598 4.00596C4.66978 3.84192 4.93582 3.84204 5.09986 4.00596L6.50002 5.406L7.90018 4.00596Z' fill='%23E86421'/%3E%3C/svg%3E%0A";
$svg-update-zip-text-link: "data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A";