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

Merge branch 'develop' into feature/CSR-638

Browse source
This commit is contained in:
Leah Schumann 2022-05-24 16:31:40 -04:00
commit 7d885d4184
24 changed files with 378 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.vue
View file

@ -1,6 +1,7 @@
<template>
<router-view v-slot="{ Component }">
<transition :duration="{ enter: 800, leave: 300 }" 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>

3
src/common-components/button-question/button-question.vue
View file

@ -52,7 +52,6 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
import listCard from "@/ux-components/list-card/list-card";
import { ErrorMessage } from 'vee-validate';
import radio from "@/ux-components/radio/radio";
import { queryStrings } from "@/constants/query-strings";
export default {
name: "buttonQuestion",
@ -135,8 +134,6 @@ export default {
},
handleCheckedChanged(val) {
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, val.value, true);
if(this.isMultiSelect && this.selectedValues) {
// Add or remove item to array of data to emit
const newSelectedValues = this.selectedValues;

276
src/common-components/loading-modal/loading-modal.vue
View file

@ -1,91 +1,237 @@
<template>
<div v-if="isModalVisible" class="loading-modal-backdrop">
<div class="loading-modal">
<section class="loading-modal-body">
<div class="modal-icon-container text-center">
<object type="image/svg+xml" :data="fmgAnimatedTransition"/>
<div v-if="isModalVisible" class="container-fluid modal-loader">
<div class="row g-2 h-100 d-flex align-items-center">
<div class="container-fluid overflow-hidden">
<div class="row h-100">
<div class="col text-center tagbg mb-2">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col">
<div class="text-container slide">
<p>Finishing up
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
<p>Nearly there
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
<p>Generating your quote
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
<p>Finding your glass
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
<p>Assessing your damage
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// load the path like this - <object> data attribute doesn't load the relative path correctly
const FMGAnimatedTransition = require("@/assets/img/FMGTransitionAnimation.svg");
export default {
name: 'Modal',
data() {
return {
isModalVisible: false,
fmgAnimatedTransition: FMGAnimatedTransition,
};
},
methods: {
showModal() {
//Display modal
this.isModalVisible = true;
//Force page reload on back button
window.addEventListener("pageshow", function(evt) {
if(evt.persisted){
export default {
name: 'Modal',
data() {
return {
isModalVisible: false,
};
},
methods: {
showModal() {
//Display modal
this.isModalVisible = true;
//Force page reload on back button
window.addEventListener("pageshow", function(evt) {
if(evt.persisted){
setTimeout(function(){
window.location.reload();
}, 10);
}
}, false);
},
window.location.reload();
}, 10);
}
}, false);
},
};
},
};
</script>
<style lang="scss">
.loading-modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #e5e5e5;
.modal-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1055;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
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-repeat: no-repeat;
background-position: center center;
background-size: 96px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1050;
width: 100vw;
height: 100vh;
}
.loading-modal {
.spinner-border {
width: 6.5rem;
height: 6.5rem;
border: 0.45em solid currentColor;
border-right-color: transparent;
}
.text-container {
display: flex;
width: 350px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
position: relative;
&:after {
content: '';
background: rgb(245,245,245);
background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
position: absolute;
background: #ffffff;
padding: 0 0 32px 0;
box-shadow: 2px 2px 20px 1px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
top: 48px;
height: 186px;
width: 327px;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.loading-modal-text {
padding: 0 24px 0 24px;
&.slide p {
animation: slide-in 20s ease-in-out 1s forwards 1;
}
.modal-icon-container {
margin: 15px auto;
padding-bottom: 26px;
p {
margin: 0 175px;
transform: translateX(-2346px);
}
.modal-icon-container img {
position: absolute;
vertical-align: middle;
border: 0;
width: 327px;
height: 186px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@keyframes slide-in {
0% {
transform: translateX(-2346px)
}
11% {
transform: translateX(-2010px)
}
22% {
transform: translateX(-2010px)
}
33% {
transform: translateX(-1490px)
}
44% {
transform: translateX(-1490px)
}
55% {
transform: translateX(-985px)
}
66% {
transform: translateX(-985px)
}
77% {
transform: translateX(-490px)
}
88% {
transform: translateX(-490px)
}
100% {
transform: translateX(-40px)
}
}
.dot-1 {
animation: blinking-elipsis .75s linear infinite;
@keyframes blinking-elipsis {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
.dot-2 {
animation: blinking-elipsis-2 .75s linear infinite;
@keyframes blinking-elipsis-2 {
0% {
opacity: 0;
}
21% {
opacity: 0;
}
22% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
.dot-3 {
animation: blinking-elipsis-3 .75s linear infinite;
@keyframes blinking-elipsis-3 {
0% {
opacity: 0;
}
43% {
opacity: 0;
}
44% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
}
}
</style>

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

@ -3,17 +3,18 @@ import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
export function getDamageString() {
const damageLocations = store.getters.damage.glassToReplace;
// If it's a repair it's always a windshield.
const isRepair = store.getters.damage.isRepair;
if(isRepair){
return "windshield"
}
const damageLocations = store.getters.damage.glassToReplace;
let returnString;
if (!damageLocations) {
return;
}
// If it's a repair it's always a windshield.
if(isRepair){
return "windshield"
}
if (damageLocations.length > 1) {
returnString = "match"

3
src/helpers/heritage-integration/cookie-helper.js
View file

@ -6,6 +6,8 @@ import { applicationConfig } from "@/constants/application-config";
Will update the cookie if present, or create a new one if not.
*/
export function updateOrCreateFunnelCookie() {
const wasClaimRegistrationDelayed = getFunnelCookie()?.HasDelayedClaimRegistration;
// Create the cookie
document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}={}; path=${applicationConfig.COOKIE_PATH}; ${getCookieDomainValue()};`;
@ -19,6 +21,7 @@ export function updateOrCreateFunnelCookie() {
ReferralDate: store.getters.order.referralDate,
ReferralCorrelationId: store.getters.order.referralCorrelationId,
ReferralParentAccountNumber: store.getters.order.accountNumber,
HasDelayedClaimRegistration: wasClaimRegistrationDelayed
});
}

4
src/helpers/heritage-integration/navigation-helper.spec.js
View file

@ -305,7 +305,7 @@ describe("getPageToRouteExistingOrderTo", () => {
describe("navigateToHeritageFunnel", () => {
test("should save order", async () => {
// Arrange
const mockReferralNumber = 2;
const mockReferralNumber = "2";
const mockCorrelationId = "55";
const mockReferralDate = "2022";
@ -337,7 +337,7 @@ describe("navigateToHeritageFunnel", () => {
test("should go to heritage funnel", async () => {
// Arrange
const mockReferralNumber = 2;
const mockReferralNumber = "2";
const mockCorrelationId = "55";
const mockReferralDate = "2022";

4
src/helpers/heritage-integration/order-helper.js
View file

@ -38,10 +38,10 @@ export async function saveOrder() {
// Save the referral information back from the store.
await baseMixin.methods.dispatchStoreAction(storeActions.SET_REFERRAL_INFORMATION, {
referralNumber: savedOrderInfo.data.referralNumber,
referralNumber: savedOrderInfo.data.referralNumber.toString(),
referralCorrelationId: savedOrderInfo.data.referralCorrelationId,
referralDate: savedOrderInfo.data.referralDate,
accountNumber: savedOrderInfo.data.accountNumber
accountNumber: savedOrderInfo.data.accountNumber.toString()
}, false);
// Update the cookie with the referral information when saved.

8
src/helpers/heritage-integration/order-helper.spec.js
View file

@ -103,11 +103,12 @@ describe("saveOrder", () => {
test("saveOrder => should set state order values", async () => {
// Arrange
const mockReferralNumber = 2;
const mockReferralNumber = "2";
const mockCorrelationId = "55";
const mockReferralDate = "2022";
const mockAccountNumber = "5";
const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate);
const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, mockAccountNumber);
const mockData = {
actionList: [
@ -131,7 +132,8 @@ describe("saveOrder", () => {
expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
referralNumber: mockReferralNumber,
referralDate: mockReferralDate,
referralCorrelationId: mockCorrelationId
referralCorrelationId: mockCorrelationId,
accountNumber: mockAccountNumber
}, false);
});

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

@ -89,11 +89,12 @@ export function removeAllTestCookies() {
});
}
export function getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate) {
export function getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, accountNumber = "0") {
return {
referralNumber: mockReferralNumber,
referralCorrelationId: mockCorrelationId,
referralDate: mockReferralDate
referralDate: mockReferralDate,
accountNumber: accountNumber
}
}

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

@ -18,6 +18,7 @@ import store from "@/store";
import { validate } from "vee-validate";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
import { routerParams } from "@/router/router-constants/router-params";
import * as cookieHelper from "@/helpers/heritage-integration/cookie-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
@ -29,6 +30,11 @@ jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
// Mock getFunnelCookie
jest.mock("@/helpers/heritage-integration/cookie-helper", () => ({
getFunnelCookie: jest.fn(),
}));
// Mock Store
jest.mock("@/store", () => ({
commit: jest.fn(),
@ -653,6 +659,10 @@ describe("vehicle-damage.vue", () => {
})
});
describe("vehicle-damage.vue wasDelayedClaimRegistration", () => {
test.todo("if wasDelayedClaimRegistration, should hide back button")
});
// THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
// BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
//
@ -741,6 +751,7 @@ function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) {
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValue({});
//Mock damage initialize methods
damageLocationQuestion.methods = {

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

@ -32,7 +32,7 @@
:selectedDamageLocations="selectedDamageLocations"
/>
<alert
class="my-3"
class="my-5"
cmsWidgetName="HasReplacementConflict"
v-show="hasRepairReplaceConflict"
alertClass="alert-danger"
@ -87,6 +87,7 @@ import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
@ -296,12 +297,12 @@ export default {
this.navigateForward();
},
navigateForward(){
navigateForward(){
// If vin already exists, navigate directly to vin-lookup
if(store.getters.vehicle.vin) {
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
return;
return;
}
else {
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, this.$route);
@ -405,7 +406,7 @@ export default {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
},
shouldHideBackButton(){
return this.$store.getters.payment.insuranceCoverage.isVerified;
return this.$store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration;
}
},

20
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -14,7 +14,7 @@
alertClass="alert-danger"
:isDismissible="false"
/>
<windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
<windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
:isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
@ -30,7 +30,7 @@
isRequired
/>
<alert
class="my-3"
class="mt-5"
cmsWidgetName="SplitSingleConflict"
v-if="hasSplitSingleConflict"
alertClass="alert-danger"
@ -56,10 +56,10 @@ defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_C
defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => {
if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
Array.isArray(otherFieldValue) &&
otherFieldValue.length > 1)
if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
Array.isArray(otherFieldValue) &&
otherFieldValue.length > 1)
{
return false;
}
@ -72,8 +72,8 @@ defineRule("repair-only", (value) => {
return false;
});
defineRule("prevent-split-and-single-together", (value) => {
if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) &&
(value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) ||
if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) &&
(value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) ||
value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase())))
{
return false;
@ -145,7 +145,7 @@ export default ({
}
},
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some(selectedDamages =>
return this.selectedDamageLocations.some(selectedDamages =>
{
return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
});
@ -193,4 +193,4 @@ export default ({
alert,
},
})
</script>
</script>

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

@ -71,7 +71,7 @@
:manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
:manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
v-model="customAlertData"
v-if="isVinFieldReadOnly"
v-if="isVinFieldReadOnly"
alertClass="alert-success"
/>
<alert
@ -102,7 +102,7 @@
:manualHeadline="PerfectMatchNewVinAlertHeader"
:manualCopy="PerfectMatchNewVinAlertBody"
v-model="customAlertData"
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid"
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
alertClass="alert-success"
/>
<funnelFooter
@ -140,6 +140,7 @@ import { getDamageString, getIsWindshieldOnly, isGlassAvailableForCarId } from "
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
// DEFINE VALIDATION RULES
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@ -189,6 +190,7 @@ export default {
},
watch: {
vin() {
this.vinNotFound = false;
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
@ -236,7 +238,7 @@ export default {
getIsWindshieldOnly())
},
isVinFieldReadOnly(){
return this.$store.getters.payment.insuranceCoverage.isVerified;
return this.$store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration;
},
},
methods: {

16
src/mixins/analytics-mixin.js
View file

@ -9,12 +9,18 @@ import baseMixin from "@/mixins/base-mixin";
export default {
methods: {
logPageView(pageEvent) {
// if the user does not have a session id from the content site, do not log.
const sid = getSessionIdValue();
if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
return;
}
const currentPageName = getPageNameByQueryString();
var payload = {
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),
pageName: currentPageName,
sessionId: getSessionIdValue(),
sessionId: sid,
action: '',
event: pageEvent,
shouldUseSessionId: true,
@ -24,12 +30,18 @@ export default {
},
logCustomEvent(category, action, label, value) {
// if the user does not have a session id from the content site, do not log.
const sid = getSessionIdValue();
if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
return;
}
const currentPageName = getPageNameByQueryString();
var payload = {
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),
pageName: currentPageName,
sessionId: getSessionIdValue(),
sessionId: sid,
category: category,
action: action,
label: label,

8
src/mixins/analytics-mixin.spec.js
View file

@ -1,5 +1,5 @@
import analyticsMixin from "@/mixins/analytics-mixin";
import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js";
import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
import { storeActions } from "@/constants/store-actions";
describe("analyticsMixin.js", () => {
@ -14,6 +14,12 @@ describe("analyticsMixin.js", () => {
}
const mocks = setupMocksForJsFiles(mockData);
const testCookieValue = {
sid: '10000000-0000-0000-0000-000000000001'
}
setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
analyticsMixin.methods.logPageView(type, payload);
expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();

10
src/router/index.js
View file

@ -21,6 +21,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
// Components
import ComponentTest from "@/layouts/component-test/component-test.vue";
import FormTest from "@/layouts/form-test/form-test.vue";
import Modal from "@/common-components/loading-modal/loading-modal.vue";
const routes = [
@ -34,6 +35,11 @@ const routes = [
name: "FormTest",
component: FormTest,
},
{
path: "/loading-modal", // This is a temporary route for testing.
name: "Modal",
component: Modal,
},
{
path: "/",
name: "root",
@ -126,7 +132,7 @@ const router = createRouter({
router.afterEach(async (to, from) => {
// Push page view to GA
analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER, { userId: getDeviceIdValue() })
.then( (response) => {
analyticsMixin.methods.pushExperimentsToDataLayer(response.data);
@ -271,4 +277,4 @@ function resetDependentState(component) {
return component.default.methods.resetDependentState();
}
export default router;
export default router;

8
src/store/index.js
View file

@ -573,9 +573,9 @@ export const actions = {
state: order.serviceLocation.state,
zipCode: order.serviceLocation.zipCode
},
referralNumber: order.referralNumber,
referralNumber: order.referralNumber?.toString(), // TODO It'd be nice to save these as strings in the first place
referralDate: order.referralDate,
accountNumber: order.accountNumber
accountNumber: order.accountNumber?.toString()
},
});
},
@ -585,10 +585,10 @@ export const actions = {
method: endpoints.LoadOrder.method,
endpoint: endpoints.LoadOrder.url,
payload: {
referralNumber: referralNumber,
referralNumber: referralNumber?.toString(),
referralDate: referralDate,
referralCorrelationId: referralCorrelationId,
accountNumber: accountNumber
accountNumber: accountNumber?.toString()
},
}).then((response) => {
context.commit(storeMutations.RESET_STATE);

4
src/styles/common-animations.scss
View file

@ -12,11 +12,11 @@
}
.route-fade-enter-active .fade-on-route-transition {
transition: opacity 0.8s ease;
transition: opacity 0.2s ease-out; //This duration should be kept in sync with the app.vue <transition> element attribute
}
.route-fade-leave-active .fade-on-route-transition {
transition: opacity 0.3s ease;
transition: opacity 0.2s ease-in; //This duration should be kept in sync with the app.vue <transition> element attribute
}
.route-fade-enter-from .fade-on-route-transition,

22
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -1,6 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import listButtonHorizontal from "./list-button-horizontal";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
describe("list-button-horizontal.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
@ -90,6 +91,13 @@ describe("list-button-horizontal.vue", () => {
it("Should return loader enabled true", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
selectingInitiatesLoad: true,
},
@ -112,6 +120,13 @@ describe("list-button-horizontal.vue", () => {
it("Should return loader color", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
loaderColor: "blue",
selectingInitiatesLoad: true,
@ -135,6 +150,13 @@ describe("list-button-horizontal.vue", () => {
it("Should return loader position", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
loaderPosition: "right",
selectingInitiatesLoad: true,

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

@ -54,6 +54,7 @@
<script>
import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
import { queryStrings } from "@/constants/query-strings";
export default {
name: "listButtonHorizontal",
@ -91,6 +92,10 @@ export default {
: this.selectedValues[0];
}
},
unmounted() { // needed to clear this button's selectedValues if it is removed
this.checkValue = false;
this.handleCheckChange();
},
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
@ -116,6 +121,7 @@ export default {
this.handleCheckChange();
}
this.handleChange(this.value);
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
},
handleCheckChange() {
const emitEvent = {

22
src/ux-components/list-button/list-button.spec.js
View file

@ -1,6 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import listButton from "./list-button";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
describe("list-button.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
@ -90,6 +91,13 @@ describe("list-button.vue", () => {
it("Should return loader enabled true", async () => {
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
selectingInitiatesLoad: true,
},
@ -109,6 +117,13 @@ describe("list-button.vue", () => {
it("Should return loader color", async () => {
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
loaderColor: "blue",
selectingInitiatesLoad: true,
@ -128,6 +143,13 @@ describe("list-button.vue", () => {
it("Should return loader position", async () => {
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
loaderPosition: "right",
selectingInitiatesLoad: true,

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

@ -54,6 +54,7 @@
<script>
import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
import { queryStrings } from "@/constants/query-strings";
export default {
name: "listButton",
@ -91,6 +92,10 @@ export default {
: this.selectedValues[0];
}
},
unmounted() { // needed to clear this button's selectedValues if it is removed
this.checkValue = false;
this.handleCheckChange();
},
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
@ -116,6 +121,7 @@ export default {
this.handleCheckChange();
}
this.handleChange(this.value);
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
},
handleCheckChange() {
const emitEvent = {

16
src/ux-components/list-card/list-card.spec.js
View file

@ -1,6 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import listCard from "./list-card";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
describe("list-card.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
@ -292,8 +293,16 @@ describe("list-card.vue", () => {
});
it("Should run handleChange if triggerButton is triggered", async () => {
// Act
const wrapper = shallowMount(listCard, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
selectingInitiatesLoad: false,
},
@ -312,6 +321,13 @@ describe("list-card.vue", () => {
it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
// Act
const wrapper = shallowMount(listCard, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
selectingInitiatesLoad: true,
},

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

@ -61,6 +61,7 @@
<script>
import { useField } from "vee-validate";
import { queryStrings } from "@/constants/query-strings";
export default {
name: "listCard",
@ -98,6 +99,10 @@ export default {
: this.selectedValues[0];
}
},
unmounted() { // needed to clear this button's selectedValues if it is removed
this.checkValue = false;
this.handleCheckChange();
},
computed: {
getLabelClasses() {
if (this.isWide) {
@ -133,6 +138,7 @@ export default {
this.handleCheckChange();
}
this.handleChange(this.value);
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
},
handleCheckChange() {
const emitEvent = {