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

Merge branch 'develop' into feature/CSR-104

Browse source
This commit is contained in:
Leah Schumann 2022-05-02 11:22:22 -04:00
commit 299293467a
37 changed files with 478 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/common-components/button-question/button-question.spec.js
View file

@ -1,9 +1,8 @@
import { shallowMount } from "@vue/test-utils";
import buttonQuestion from "@/common-components/button-question/button-question";
import { nextTick } from "vue";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
jest.mock("@/store",()=>{return{};},{virtual:true});
jest.mock("@/store", () => { return {}; }, { virtual: true });
describe("buttonQuestion.vue", () => {
it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
@ -76,7 +75,7 @@ describe("buttonQuestion.vue", () => {
describe("buttonQuestion.vue", () => {
it("getColLength should return '' if prop isWide is set to false", () => {
// Act
const localThis = {
const localThis = {
isWide: false,
answers: ['a', 'b']
}
@ -110,12 +109,12 @@ describe("buttonQuestion.vue", () => {
describe("buttonQuestion.vue", () => {
it("Should trigger event modelValue change to new value on when radio button selected", async () => {
// Act
const wrapper = shallowMount(buttonQuestion);
const wrapper = shallowMount(buttonQuestion, setupMocks({}));
await wrapper.setProps({
answers: ["2022", "2021", "2020"],
isMultiSelect: false
});
const val = {checkValue: true, value: "2021", }
const val = { checkValue: true, value: "2021", }
wrapper.vm.handleCheckedChanged(val);
// Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
@ -125,13 +124,13 @@ describe("buttonQuestion.vue", () => {
describe("buttonQuestion.vue", () => {
it("Should add values to array on checkbox click", () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
const wrapper = shallowMount(buttonQuestion, setupMocks({
propsData: {
modelValue: ["2022", "2021", "2020"],
isMultiSelect: true,
}
});
const val = {checkValue: true, value: "2019", }
}));
const val = { checkValue: true, value: "2019", }
wrapper.vm.handleCheckedChanged(val);
// Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
@ -141,12 +140,12 @@ describe("buttonQuestion.vue", () => {
describe("buttonQuestion.vue", () => {
it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
const wrapper = shallowMount(buttonQuestion, setupMocks({
propsData: {
isMultiSelect: true,
modelValue: [ 'a', 'b' ]
isMultiSelect: true,
modelValue: ['a', 'b']
}
});
}));
const val = { checkValue: true, value: "2021", }
wrapper.vm.handleCheckedChanged(val);
@ -158,12 +157,13 @@ describe("buttonQuestion.vue", () => {
describe("buttonQuestion.vue", () => {
it("Should remove a value to this.selectedValues if prop isMultiSelect is true, checkValue is false and this.selectedValues already exists", () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
const wrapper = shallowMount(buttonQuestion, setupMocks({
propsData: {
isMultiSelect: true,
modelValue: [ 'a', 'b' ]
isMultiSelect: true,
modelValue: ['a', 'b']
}
});
}));
const val = { checkValue: false, value: "a", }
wrapper.vm.handleCheckedChanged(val);
@ -176,12 +176,12 @@ describe("buttonQuestion.vue", () => {
describe("buttonQuestion.vue", () => {
it("Should do nothing to this.selectedValues if this.selectedValues is not an array", () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
const wrapper = shallowMount(buttonQuestion, setupMocks({
propsData: {
isMultiSelect: true,
isMultiSelect: true,
modelValue: 'a',
}
});
}));
const val = { checkValue: true, value: "c", }
wrapper.vm.handleCheckedChanged(val);
@ -189,3 +189,11 @@ describe("buttonQuestion.vue", () => {
expect(wrapper.vm.selectedValues).toEqual("a");
});
});
function setupMocks(mountOptionsMockData = {}) {
const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
return allMountOptions;
}

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

@ -52,6 +52,7 @@ 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",
@ -133,6 +134,9 @@ export default {
return answer.Name ? answer.Name : answer;
},
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;

6
src/constants/analytics-page-events.js
View file

@ -1,6 +0,0 @@
const analyticsPageEvents = {
ENTRY: "ENTRY",
EVENT: "EVENT"
};
export { analyticsPageEvents };

32
src/constants/analytics.js Normal file
View file

@ -0,0 +1,32 @@
const analyticsPageEvents = {
ENTRY: "ENTRY",
EVENT: "EVENT"
};
// GA Constants
const GaEvents = {
GENERIC_EVENT: 'ga_Event',
PAGE_VIEW_EVENT : 'logPageview'
};
const GaCategories = {
API_RESPONSE: 'Api_Response',
EVOX: 'Evox'
};
const GaActions = {
RESULT: 'Result',
CLICKED: 'Clicked',
VIF: 'vif',
SUBMITTED: 'Submitted',
};
const GaLabels = {
SUCCESS: 'Success',
ERROR: 'Error',
LICENSE_PLATE_LOOKUP: 'License_Plate_Look_Up',
VIN_LOOKUP: 'Vin_Look_Up',
};
export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents};

4
src/constants/endpoints.js
View file

@ -74,6 +74,10 @@ const endpoints = {
LogActivity:{
url: "/analytics/api/v1/analytics/activity",
method: "POST",
},
GetExperimentsByUserForGa: {
url: "/analytics/api/v1/analytics/get-experiments-for-GA",
method: "GET",
}
};

6
src/constants/experiments.js
View file

@ -1,6 +1,10 @@
const experimentUniverses = {
CONCEPT_FUNNEL: 'ConceptFunnel'
};
const experimentSettings = {
GOOGLE_CUSTOM_DIMENSION_INDEX: 'Google Custom Dimension Index'
}
export { experimentUniverses };
export { experimentUniverses, experimentSettings};

1
src/constants/store-actions.js
View file

@ -20,6 +20,7 @@ const storeActions = {
VALIDATE_ZIP: "validateZip",
LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
LOG_ACTIVITY: "logActivity",
GET_EXPERIMENTS_BY_USER_FOR_GA: "getExperimentsByUserForGa",
// DEPENDENCY MUTATIONS
RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",

53
src/global-methods.js
View file

@ -1,39 +1,34 @@
import axios from "axios";
import analyticsMixIn from "@/mixins/analytics-mixin.js";
import { applicationConfig } from "@/constants/application-config.js";
import httpStatusCodes from "http-status-codes";
import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
export default {
callHttpClient({ method, endpoint, payload }) {
callHttpClient({ method, endpoint, payload, logApiCall = true }) {
return new Promise((resolve, reject) => {
const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
const payloadAndAnalyticsData = Object.assign({}, payload, {
AppName: "FixMyGlass",
});
axios({ method: method, url: apiGatewayUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {} })
.then((response) => {
axios({
method: method,
url: apiGatewayUrl + endpoint,
data: payloadAndAnalyticsData,
crossDomain: true,
responseType: {},
}).then(
(response) => {
if (response.status == httpStatusCodes.OK) {
if(response.data == undefined) {
reject(response);
}else{
resolve(response);
}
} else {
reject(response);
if (logApiCall) {
analyticsMixIn.methods.pushEventToGA(GaCategories.API_RESPONSE, GaActions.RESULT, `${GaLabels.SUCCESS}_${endpoint}`, true);
}
return resolve(response);
},
(error) => {
console.error(error);
return reject(error.response);
}
);
error => {
console.error(error);
if (logApiCall) {
analyticsMixIn.methods.pushEventToGA(GaCategories.API_RESPONSE, GaActions.RESULT, `${GaLabels.ERROR}_${endpoint}`, true);
}
return reject(error.response);
}
);
});
},
@ -48,11 +43,7 @@ export default {
responseType: {},
}).then(
(response) => {
if (response.status == httpStatusCodes.OK) {
resolve(response);
} else {
reject(response);
}
resolve(response);
},
(error) => {
return reject(error.response);

5
src/global-methods.spec.js
View file

@ -1,13 +1,16 @@
import globalMethods from "@/global-methods";
import axios from "axios";
import analyticsMixIn from "@/mixins/analytics-mixin";
//Mock external dependencies
jest.mock("axios");
jest.mock("@/mixins/analytics-mixin");
it("Global Methods - Call Http Client - Should Resolve Promise", () => {
//Arrange
const endpoint = "https://mock.safelite.com";
const httpArgs = setupMocksForHttpClient({ endpoint: endpoint });
analyticsMixIn.methods.pushEventToGA = jest.fn();
//Act
globalMethods.callHttpClient(httpArgs).then((response) => {
@ -25,6 +28,7 @@ it("Global Methods - Call Http Client - Should Reject Promise", () => {
endpoint: endpoint,
isError: true,
});
analyticsMixIn.methods.pushEventToGA = jest.fn();
//Act
globalMethods.callHttpClient(httpArgs).catch((err) => {
@ -72,5 +76,6 @@ function setupMocksForHttpClient({
return {
endpoint: endpoint,
logApiCall: true
};
}

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

@ -7,7 +7,7 @@ export function getDamageString() {
}
export async function isGlassAvailableForCarId(carId){
const newGlassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction(
const newGlassOptions = await baseMixin.methods.dispatchStoreAction(
storeActions.GET_DAMAGE_OPTIONS,
{ carId: carId }
);

2
src/helpers/damage-helper.spec.js
View file

@ -22,7 +22,7 @@ jest.mock("@/store", () => ({
// windshieldOptions: {availableReplacementOptions: ["windshield"]}
// }
// }
// baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn().mockImplementation(()=> {
// baseMixin.methods.dispatchStoreAction = jest.fn().mockImplementation(()=> {
// return updatedOptions;
// });
// const misMatch = await isGlassAvailableForCarId();

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

@ -18,7 +18,7 @@ export async function loadOrderIfPresent() {
// Reset state if cookie says to.
if (funnelCookie.ShouldResetState) {
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
deleteFunnelCookie();
return null;
}
@ -34,10 +34,10 @@ export async function loadOrderIfPresent() {
update the cookie.
*/
export async function saveOrder() {
const savedOrderInfo = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SAVE_ORDER);
const savedOrderInfo = await baseMixin.methods.dispatchStoreAction(storeActions.SAVE_ORDER);
// Save the referral information back from the store.
await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SET_REFERRAL_INFORMATION, {
await baseMixin.methods.dispatchStoreAction(storeActions.SET_REFERRAL_INFORMATION, {
referralNumber: savedOrderInfo.data.referralNumber,
referralCorrelationId: savedOrderInfo.data.referralCorrelationId,
referralDate: savedOrderInfo.data.referralDate,
@ -56,7 +56,7 @@ export async function saveOrder() {
and returns the response.
*/
async function loadOrder(referralNumber, referralDate, referralCorrelationId, accountNumber) {
const response = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOAD_ORDER,
const response = await baseMixin.methods.dispatchStoreAction(storeActions.LOAD_ORDER,
{
referralNumber: referralNumber.toString(),
referralDate: referralDate,

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

@ -48,7 +48,7 @@ describe("loadOrderIfPresent", () => {
// Assert
expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.RESET_STATE);
expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.RESET_STATE);
});
test("Funnel cookie is null => store is unchanged", () => {
@ -68,7 +68,7 @@ describe("loadOrderIfPresent", () => {
// Assert
expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).not.toHaveBeenCalledWith(storeActions.RESET_STATE);
expect(mocks.baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.RESET_STATE);
});
test("Funnel cookie valid, should call loadOrder", async () => {
@ -90,7 +90,7 @@ describe("loadOrderIfPresent", () => {
// Assert
expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).not.toHaveBeenCalledWith(storeActions.LOAD_ORDER);
expect(mocks.baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.LOAD_ORDER);
expect(result.ReferralNumber).toBe(123456);
expect(result.vehicle.year).toBe(2010);
});
@ -127,8 +127,8 @@ describe("saveOrder", () => {
await saveOrder();
// Assert
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.SAVE_ORDER);
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.SAVE_ORDER);
expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
referralNumber: mockReferralNumber,
referralDate: mockReferralDate,
referralCorrelationId: mockCorrelationId

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

@ -7,17 +7,25 @@ import { cookieNames } from "@/constants/cookie-names";
import { Form } from "vee-validate";
import baseMixin from "@/mixins/base-mixin";
import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper";
import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
import { queryStrings } from "@/constants/query-strings";
import { routerParams } from "@/router/router-constants/router-params";
// Common methods
export function getMountOptions(mockData) {
// Define our mocks to attached to the 'global' object for Vue/Jest.
const mocks = {};
//this is mocking if you use the mixin directly(baseMixin.methods.dispatchNonBlockingStoreAction) vs this.dispatchNonBlockingStoreAction
setupBaseMixinDispatchNonBlockingStoreAction(mockData);
//this is mocking if you use the mixin directly(baseMixin.methods.dispatchStoreAction) vs this.dispatchStoreAction
setupBaseMixinDispatchStoreAction(mockData);
mocks.dispatchNonBlockingStoreAction = jest.fn();
mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
mocks.pushEventToGA = jest.fn();
mocks.pushPageViewToGA = jest.fn();
mocks.logEvent = jest.fn();
mocks.pushExperimentsToDataLayer = jest.fn();
mocks.dispatchStoreAction = jest.fn();
mocks.dispatchStoreAction.mockImplementation((actionName) => {
let actionFilterResult = mockData.actionList.filter(
(x) => x.actionName == actionName
);
@ -35,6 +43,13 @@ export function getMountOptions(mockData) {
mocks.navigationScenarios = navigationScenarios;
mocks.vehicleCategories = vehicleCategories;
mocks.fmgPageValues = fmgPageValues;
mocks.analyticsPageEvents = analyticsPageEvents;
mocks.GaCategories = GaCategories;
mocks.GaActions = GaActions;
mocks.GaLabels = GaLabels;
mocks.GaEvents = GaEvents;
mocks.queryStrings = queryStrings;
mocks.routerParams = routerParams;
// Mock $store and $router when accessing this.$store/$router
mocks.$store = mockData.store;
@ -50,7 +65,7 @@ export function getMountOptions(mockData) {
}
export function setupMocksForJsFiles(mockData = {}) {
setupBaseMixinDispatchNonBlockingStoreAction(mockData);
setupBaseMixinDispatchStoreAction(mockData);
return { baseMixin };
}
@ -90,10 +105,10 @@ export function setupCookies({ funnelCookieValue = "", includeHeritageCookie = t
}
// Private methods
function setupBaseMixinDispatchNonBlockingStoreAction(mockData) {
function setupBaseMixinDispatchStoreAction(mockData) {
if (mockData.actionList !== undefined) {
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
baseMixin.methods.dispatchStoreAction = jest.fn();
baseMixin.methods.dispatchStoreAction.mockImplementation((actionName) => {
let actionFilterResult = mockData.actionList.filter(
(x) => x.actionName == actionName
);

2
src/layouts/form-test/form-test.vue
View file

@ -95,7 +95,7 @@ export default {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage('vehicle-damage');
const damageOptionsPromise =
baseMixin.methods.dispatchNonBlockingStoreAction(
baseMixin.methods.dispatchStoreAction(
storeActions.GET_DAMAGE_OPTIONS,
{ carId: store.getters.vehicle.carId }
);

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

@ -115,7 +115,7 @@ function setupMocks({
},
}) {
//Mock api responses
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
baseMixin.methods.dispatchStoreAction = jest.fn();
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,

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

@ -174,6 +174,9 @@ export default {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.LICENSE_PLATE_LOOKUP , true);
const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.registrationZip);
if (!zipValidation.data.isServiceable) {
this.$refs.funnelFooter.removeLoader();
@ -204,7 +207,7 @@ export default {
this.updateCustomerInfo(vinLookup.data.vin, vinLookup.data.vehicle, zipValidation.data.state);
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
const partsData = await baseMixin.methods.dispatchStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS,
{
carId: vinLookup.data.vehicle.carId,
@ -226,13 +229,13 @@ export default {
}
},
validateZip(zip) {
return baseMixin.methods.dispatchNonBlockingStoreAction(
return baseMixin.methods.dispatchStoreAction(
storeActions.VALIDATE_ZIP,
{ zip }
);
},
lookupVin(plate, state) {
return baseMixin.methods.dispatchNonBlockingStoreAction(
return baseMixin.methods.dispatchStoreAction(
storeActions.LOOKUP_VIN_BY_PLATE,
{ licensePlate: plate, licenseState: state }
);

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

@ -17,6 +17,7 @@ import { storeMutations } from "@/constants/store-mutations";
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";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
@ -703,6 +704,57 @@ describe("vehicle-damage.vue", () => {
});
});
describe("vehicle-damage.vue", () => {
test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
// Arrange & Act
const { wrapper } = setupMocks({
mountOptionsMockData: {
route: {
params: {
[routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true
}
}
}
});
// Assert
expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(true);
})
});
describe("vehicle-damage.vue", () => {
test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
// Arrange & Act
const { wrapper } = setupMocks({
mountOptionsMockData: {
route: {
params: {
[routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
}
}
}
});
// Assert
expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
})
});
describe("vehicle-damage.vue", () => {
test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
// Arrange & Act
const { wrapper } = setupMocks({
mountOptionsMockData: {
route: {
params: {
[routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: undefined
}
}
}
});
// Assert
expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
})
});
// THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
// BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
//
@ -734,32 +786,41 @@ describe("vehicle-damage.vue", () => {
});
function setupMocks({
pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {
function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) {
var pageHeaderWidgetHeaderTextDefault = {};
var mountOptionsMockDataDefault = {
router: {
navigate: jest.fn(),
},
route: {
params: {
[routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
}
},
store: {
getters: {
vehicle: {},
payment: { insuranceCoverage: { isVerified: false } },
payment: {
insuranceCoverage: {
isVerified: false
}
},
},
},
},
}) {
};
// Combine parameters with default values
pageHeaderWidgetHeaderText = Object.assign(pageHeaderWidgetHeaderTextDefault, pageHeaderWidgetHeaderText);
mountOptionsMockData = Object.assign(mountOptionsMockDataDefault, mountOptionsMockData);
//Mock api responses
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
baseMixin.methods.dispatchStoreAction = jest.fn();
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
FunnelHeaderWidget: {
LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
},
damageOptions: {

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

@ -9,50 +9,57 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<damageLocationQuestion
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion"
/>
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations"
/>
<alert
class="my-3"
cmsWidgetName="HasReplacementConflict"
v-show="hasRepairReplaceConflict"
alertClass="alert-danger"
:isDismissible="false"
/>
<sideDoorOptions
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations"
/>
<replaceOptionsQuestion
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required"
isRequired
/>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden=shouldHideBackButton
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
<alert
ref="vehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
v-show="shouldDisplayVehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false"
/>
<damageLocationQuestion
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion"
/>
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations"
/>
<alert
class="my-3"
cmsWidgetName="HasReplacementConflict"
v-show="hasRepairReplaceConflict"
alertClass="alert-danger"
:isDismissible="false"
/>
<sideDoorOptions
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations"
/>
<replaceOptionsQuestion
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required"
/>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden=shouldHideBackButton
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div>
</Form>
</template>
@ -79,6 +86,7 @@ import { errorMessages } from "@/constants/error-messages";
import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { queryStrings } from "@/constants/query-strings";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
@ -92,7 +100,7 @@ export default {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const damageOptionsPromise =
baseMixin.methods.dispatchNonBlockingStoreAction(
baseMixin.methods.dispatchStoreAction(
storeActions.GET_DAMAGE_OPTIONS,
{ carId: store.getters.vehicle.carId }
);
@ -140,6 +148,12 @@ export default {
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
}
},
mounted(){
if(this.$store.getters.vehicle.imageVifNumber){
this.pushEventToGA(this.GaCategories.EVOX, `${this.GaActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`,
this.$store.getters.vehicle.carId, true);
}
},
methods: {
arePagePrerequisitesValid() {
if(store.getters.vehicle.carId){
@ -273,7 +287,7 @@ export default {
store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace());
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
const partsData = await baseMixin.methods.dispatchStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
{ carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
this.navigateForward(partsData);
@ -416,6 +430,9 @@ export default {
})
);
},
shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
},
shouldHideBackButton(){
return this.$store.getters.payment.insuranceCoverage.isVerified;
}

2
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -50,7 +50,7 @@ export default {
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchNonBlockingStoreAction(
return baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_MAKES,
{ year: store.getters.vehicle.year }
);

2
src/layouts/vehicle-model/model-question/model-question.vue
View file

@ -50,7 +50,7 @@ export default {
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchNonBlockingStoreAction(
return baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_MODELS,
{ year: store.getters.vehicle.year, make: store.getters.vehicle.make }
);

2
src/layouts/vehicle-style/style-question/style-question.vue
View file

@ -50,7 +50,7 @@ export default {
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchNonBlockingStoreAction(
return baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_STYLES,
{
year: store.getters.vehicle.year,

4
src/layouts/vehicle-style/vehicle-style.spec.js
View file

@ -87,7 +87,7 @@ describe("vehicle-style.vue", () => {
});
describe("vehicle-style.vue", () => {
test("selectVehicle triggers a dispatchNonBlockingStoreAction commit", async (done) => {
test("selectVehicle triggers a dispatchStoreAction commit", async (done) => {
//Arrange
const { wrapper, apiPromise } = setupMocks({
pageHeaderWidgetHeaderText: "Select a style to get started",
@ -119,7 +119,7 @@ describe("vehicle-style.vue", () => {
//Assert
apiPromise.finally(() => {
expect(wrapper.vm.dispatchNonBlockingStoreAction).toHaveBeenCalled();
expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
done();
});
});

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

@ -76,7 +76,7 @@ export default {
);
},
setVehicle() {
return this.dispatchNonBlockingStoreAction(
return this.dispatchStoreAction(
this.storeActions.SET_VEHICLE,
{
year: this.$store.getters.vehicle.year,

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

@ -44,7 +44,7 @@ export default {
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
// Log experiment exposure
const logExperimentExposurePromise = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_EXPERIMENT_EXPOSURE,
const logExperimentExposurePromise = baseMixin.methods.dispatchStoreAction(storeActions.LOG_EXPERIMENT_EXPOSURE,
{
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),

2
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -48,7 +48,7 @@ export default {
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchNonBlockingStoreAction(
return baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_YEARS,
{}
);

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

@ -180,6 +180,8 @@ export default {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.VINLOOKUP , true);
const zipValidation = await this.validateZip(this.zip);
if (!zipValidation.data.isServiceable) {
this.customAlertData.zip = this.zip;
@ -200,7 +202,7 @@ export default {
}
const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle;
this.updateStore(carInfo)
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
const partsData = await baseMixin.methods.dispatchStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS,
{
carId: store.getters.vehicle.carId,
@ -224,13 +226,13 @@ export default {
}
},
validateZip(zip) {
return baseMixin.methods.dispatchNonBlockingStoreAction(
return baseMixin.methods.dispatchStoreAction(
storeActions.VALIDATE_ZIP,
{ zip }
);
},
lookupVin(vin) {
return baseMixin.methods.dispatchNonBlockingStoreAction(
return baseMixin.methods.dispatchStoreAction(
storeActions.LOOKUP_VEHICLE_BY_VIN,
{ vin }
);

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

@ -1,69 +1,116 @@
import { storeActions } from "@/constants/store-actions";
import baseMixin from "@/mixins/base-mixin";
import { settleAllPromises } from "@/helpers/layout-helper";
import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
import { queryStrings } from "@/constants/query-strings";
import { analyticsPageEvents } from "@/constants/analytics-page-events";
import { experimentSettings } from "@/constants/experiments";
import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
import baseMixin from "@/mixins/base-mixin";
// We will need current page name for multiple methods, define it once to re-use.
const currentPageName = getPageNameByQueryString();
export default {
methods: {
logEvent(destinationFmgPageValue, pageEvent, category, action, label, value){
logEvent(pageEvent, category, action, label, value) {
var payload = {
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),
pageName: destinationFmgPageValue,
pageName: currentPageName,
sessionId: getSessionIdValue(),
shouldUseSessionId: true,
};
if (pageEvent) {
payload.pageEvent = {action: '', event: pageEvent};
payload.pageEvent = { action: '', event: pageEvent };
}
if (category) {
payload.customEvent = {category: category, action: action, label: label, value: value};
payload.customEvent = { category: category, action: action, label: label, value: value };
}
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, payload, false);
baseMixin.methods.dispatchStoreAction(storeActions.LOG_ACTIVITY, payload, false);
},
pushEventToGA(category, action, label, value, pageName, pushToLogApp) {
pushEventToGA(category, action, label, pushToLogApp = false) {
const eventToBePushed = {
'event': 'ga_event',
'event': GaEvents.GENERIC_EVENT,
'category': category,
'action': action,
'label': label,
'value': value,
'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`
'value': undefined,
'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
}
pushToDataLayerIfDefined(eventToBePushed);
if (pushToLogApp) {
this.logEvent(pageName, null, category, action, label, value);
this.logEvent(undefined, category, action, label, undefined);
}
},
pushPageViewToGA(pageName) {
pushPageViewToGA() {
const pageViewEvent = {
'event': 'logPageview',
'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`,
'pageTitle': pageName
'event': GaEvents.PAGE_VIEW_EVENT,
'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
'pageTitle': currentPageName
};
pushToDataLayerIfDefined(pageViewEvent);
this.logEvent(pageName, analyticsPageEvents.ENTRY);
this.logEvent(currentPageName, analyticsPageEvents.ENTRY);
},
pushExperimentsToDataLayer(experiments) {
experiments?.data?.forEach(exp => {
// Set Google Dimension Index based on experiment settings.
let googleDimensionIndex = 99;
if (exp.settings[experimentSettings.GOOGLE_CUSTOM_DIMENSION_INDEX] !== undefined) {
googleDimensionIndex = exp.settings[experimentSettings.GOOGLE_CUSTOM_DIMENSION_INDEX];
}
// Create object with dimension index and value.
const experimentWithDimension = {};
Object.keys(exp).forEach(key => {
experimentWithDimension[`${key}_${googleDimensionIndex}`] = exp[key];
});
// Push to the data layer with the Google Custom Dimension Index.
pushToDataLayerIfDefined(experimentWithDimension);
});
}
},
computed: {
storeActions() {
return storeActions;
analyticsPageEvents() {
return analyticsPageEvents;
},
},
GaCategories() {
return GaCategories;
},
GaActions() {
return GaActions;
},
GaLabels() {
return GaLabels;
}
}
};
function pushToDataLayerIfDefined(data) {
if (window.dataLayer !== undefined) {
window.dataLayer.push(data);
}
}
function getPageNameByQueryString() {
const params = new URLSearchParams(location.search);
if (params.has(queryStrings.FMG_PAGE)) {
return params.get(queryStrings.FMG_PAGE);
} else {
return '';
}
}

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

@ -9,13 +9,75 @@ describe("analyticsMixin.js", () => {
const mockData = {
actionList: [{
actionName: storeActions.LOG_ACTIVITY
actionName: storeActions.LOG_ACTIVITY
}],
}
var mocks = setupMocksForJsFiles(mockData);
const mocks = setupMocksForJsFiles(mockData);
analyticsMixin.methods.logEvent(type, payload);
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toBeCalled();
expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
});
test("pushEventToGA, should call logEvent too", () => {
// Arrange
const mockData = {
actionList: [{
actionName: storeActions.LOG_ACTIVITY
}],
}
const mocks = setupMocksForJsFiles(mockData);
// Act
analyticsMixin.methods.pushEventToGA('category', 'action', 'label', true);
// Assert
expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
});
test("Experiments, should push to dataLayer with default Google Custom Dimension Index", () => {
// Arrange
window.dataLayer = [];
const mockExperimentData = {
data: [
{
settings: {},
variationName: 'test',
universeName: 'testUniverse'
}
]
}
// Act
analyticsMixin.methods.pushExperimentsToDataLayer(mockExperimentData);
// Assert
expect(window.dataLayer).toEqual([ { settings_99: {}, variationName_99: 'test', universeName_99: 'testUniverse' } ]);
});
test("Experiments, should push to dataLayer with custom Google Custom Dimension Index", () => {
// Arrange
window.dataLayer = [];
const mockExperimentData = {
data: [
{
settings: { "Google Custom Dimension Index": "5"},
variationName: 'test',
universeName: 'testUniverse'
}
]
}
// Act
analyticsMixin.methods.pushExperimentsToDataLayer(mockExperimentData);
// Assert
expect(window.dataLayer).toEqual([ { settings_5: {"Google Custom Dimension Index": "5"}, variationName_5: 'test', universeName_5: 'testUniverse' } ]);
});
});

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

@ -3,6 +3,8 @@ import { storeActions } from "@/constants/store-actions.js";
import { storeMutations } from "@/constants/store-mutations.js";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
export default {
data() {
@ -17,7 +19,7 @@ export default {
getCmsContent(widgetName, fieldName) {
return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : '';
},
dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
dispatchStoreAction(type, payload, encodePayload = true) {
// Encode the payload if required
if (encodePayload) {
encodeUriData(payload);
@ -54,6 +56,12 @@ export default {
vehicleCategories() {
return vehicleCategories;
},
routerParams() {
return routerParams;
},
queryStrings(){
return queryStrings;
}
},
};

4
src/mixins/base-mixin.spec.js
View file

@ -11,7 +11,7 @@ describe("baseMixin.js", () => {
const type = "";
const payload = {};
mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
mixIn.methods.dispatchStoreAction(type, payload);
expect(store.dispatch).toBeCalledWith(type, payload);
});
@ -21,7 +21,7 @@ describe("baseMixin.js", () => {
const type = "";
const payload = { make: "Alfa Romeo/Chrysler" };
mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
mixIn.methods.dispatchStoreAction(type, payload, true);
expect(store.dispatch).toBeCalledWith(type, payload);
});

9
src/router/index.js
View file

@ -5,6 +5,7 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
import { routingTable } from "@/router/router-constants/routing-table.js";
import { globalEvents, globalEventTypes } from "@/constants/events";
import { queryStrings } from "@/constants/query-strings";
import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
// Heritage integration
import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
@ -21,6 +22,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
import ComponentTest from "@/layouts/component-test/component-test.vue";
import FormTest from "@/layouts/form-test/form-test.vue";
const routes = [
{
path: "/component-test", // This is a temporary route for testing.
@ -121,8 +123,11 @@ const router = createRouter({
//---------------------------------------------------------- Router Functions ----------------------------------------------------------
router.afterEach((to, from) => {
router.afterEach(async (to, from) => {
// Push page view to GA
analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
const assignedExperiments = await baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER_FOR_GA, { userId: getDeviceIdValue() });
analyticsMixin.methods.pushExperimentsToDataLayer(assignedExperiments);
});
router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
@ -167,7 +172,7 @@ async function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery
if (getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) {
await saveOrder();
}
router.push({
name: "root",
query: Object.assign(optionalQuery, {

5
src/router/router-constants/router-params.js Normal file
View file

@ -0,0 +1,5 @@
const routerParams = {
DISPLAY_VEHICLE_CHANGE_ALERT: "displayVehicleChangeAlert"
};
export { routerParams };

11
src/store/index.js
View file

@ -454,7 +454,16 @@ export const actions = {
return globalMethods.callHttpClient({
method: endpoints.LogActivity.method,
endpoint: endpoints.LogActivity.url,
payload: payload
payload: payload,
logApiCall: false
});
},
getExperimentsByUserForGa(context, { userId }){
return globalMethods.callHttpClient({
method: endpoints.GetExperimentsByUserForGa.method,
endpoint: `${endpoints.GetExperimentsByUserForGa.url}/${userId}`,
payload: {}
});
},

25
src/ux-components/button-main/button-main.spec.js
View file

@ -1,15 +1,16 @@
import { shallowMount } from "@vue/test-utils";
import buttonMain from "./button-main";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
describe("buttonMain.vue", () => {
it("Should return btn-primary class", async () => {
// Act
const wrapper = shallowMount(buttonMain, {
const wrapper = shallowMount(buttonMain, setupMocks({
propsData: {
isPrimary: true,
},
});
}));
// Assert
const button = wrapper.find("button");
@ -20,11 +21,11 @@ describe("buttonMain.vue", () => {
it("Should return aria-disabled state", async () => {
// Act
const wrapper = shallowMount(buttonMain, {
const wrapper = shallowMount(buttonMain, setupMocks({
propsData: {
isDisabled: true,
},
});
}));
// Assert
const button = wrapper.find("button");
@ -35,12 +36,12 @@ describe("buttonMain.vue", () => {
it("Should return loader color", async () => {
// Act
const wrapper = shallowMount(buttonMain, {
const wrapper = shallowMount(buttonMain, setupMocks({
propsData: {
loaderColor: "blue",
loaderEnabled: true,
},
});
}));
// Assert
@ -57,12 +58,12 @@ describe("buttonMain.vue", () => {
it("Should return loader position", async () => {
// Act
const wrapper = shallowMount(buttonMain, {
const wrapper = shallowMount(buttonMain, setupMocks({
propsData: {
loaderPosition: "right",
loaderEnabled: true,
},
});
}));
// Assert
@ -77,3 +78,11 @@ describe("buttonMain.vue", () => {
expect(loader.attributes("class")).toContain("right");
});
});
function setupMocks(mountOptionsMockData = {}) {
const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
return allMountOptions;
}

2
src/ux-components/button-main/button-main.vue
View file

@ -16,6 +16,7 @@
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "buttonMain",
props: {
@ -36,6 +37,7 @@ export default {
this.isLoaderDisplayed = false;
},
clicked() {
this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.buttonText, true);
if (!this.isDisabled) {
this.isLoaderDisplayed = true;
this.$emit("click-event");

1
src/ux-components/text-link/text-link.vue
View file

@ -17,6 +17,7 @@ export default {
},
methods: {
handleClick(event) {
this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.text, true);
this.$emit("click-event");
},
},