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

Merge branch 'release/2025.07.10' into rlsmerge/2025.07.10-to-dev

Browse source
This commit is contained in:
CarlNation 2025-06-24 21:13:05 -04:00
commit a282a414eb
27 changed files with 1071 additions and 398 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/constants/endpoints.js
View file

@ -176,6 +176,10 @@ const endpoints = {
url: "/analytics/api/v1/analytics/log-part-questions",
method: "POST",
},
LogDigitalConsumer: {
url: "/analytics/api/v1/analytics/digitalconsumer-log",
method: "POST",
},
GetExperimentsByUser: {
url: "/analytics/api/v1/analytics/get-experiments",
method: "GET",

1
src/constants/experiments.js
View file

@ -26,6 +26,7 @@ const experimentSettings = {
FOSTER_LOVE: "DisplayFosterLove",
SKIP_TO_INSURANCE: "SkipToInsurance",
DISPLAY_AFTERPAY_BREAKOUT_DISPLAY: "Display_AfterpayBreakoutDisplay",
DYNAMO_LOGGING: "DynamoLogging",
};
const experimentTriggers = {

1
src/constants/progress-bar-mapper.js
View file

@ -15,6 +15,7 @@ const pagePercentageMapper = {
"insurance-company": 52,
"service-location": 60,
schedule: 72,
"mobile-details": 76,
"customer-details": 84,
"payment-method": 92,
payment: 96,

54
src/constants/state-options.js Normal file
View file

@ -0,0 +1,54 @@
const stateOptions = {
AL: "Alabama",
AK: "Alaska",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
CT: "Connecticut",
DE: "Delaware",
DC: "District Of Columbia",
FL: "Florida",
GA: "Georgia",
HI: "Hawaii",
ID: "Idaho",
IL: "Illinois",
IN: "Indiana",
IA: "Iowa",
KS: "Kansas",
KY: "Kentucky",
LA: "Louisiana",
ME: "Maine",
MD: "Maryland",
MA: "Massachusetts",
MI: "Michigan",
MN: "Minnesota",
MS: "Mississippi",
MO: "Missouri",
MT: "Montana",
NE: "Nebraska",
NV: "Nevada",
NH: "New Hampshire",
NJ: "New Jersey",
NM: "New Mexico",
NY: "New York",
NC: "North Carolina",
ND: "North Dakota",
OH: "Ohio",
OK: "Oklahoma",
OR: "Oregon",
PA: "Pennsylvania",
RI: "Rhode Island",
SC: "South Carolina",
SD: "South Dakota",
TN: "Tennessee",
TX: "Texas",
UT: "Utah",
VT: "Vermont",
VA: "Virginia",
WA: "Washington",
WV: "West Virginia",
WI: "Wisconsin",
WY: "Wyoming",
};
export { stateOptions };

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

@ -63,6 +63,7 @@ const storeActions = {
LOG_CUSTOM_EVENT: "logCustomEvent",
INITIALIZE_SESSION: "initializeSession",
LOG_PART_QUESTIONS: "logPartQuestions",
LOG_DIGITALCONSUMER: "logDigitalConsumer",
// DEPENDENCY MUTATIONS
RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleStateAndDependencies",
@ -78,6 +79,7 @@ const storeActions = {
SAVE_VIN_LOOKUP: "saveVinLookup",
SAVE_SERVICE_ZIP_CODE_INFO: "saveServiceZipCodeInfo",
SAVE_SERVICE_LOCATION: "saveServiceLocation",
SAVE_MOBILE_DETAILS: "saveMobileDetails",
SAVE_SCHEDULE: "saveSchedule",
SAVE_EMAIL: "saveEmail",
SAVE_PHONE_NUMBER: "savePhoneNumber",

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

@ -38,6 +38,7 @@ const storeMutations = {
UPDATE_SERVICE_ZIP: "updateServiceZip",
UPDATE_SERVICE_LOCATION: "updateServiceLocation",
UPDATE_MOBILE_DETAILS: "updateMobileDetails",
UPDATE_SERVICE_LOCATION_TECH_NOTES: "updateServiceLocationTechNotes",
UPDATE_SCHEDULE: "updateSchedule",

34
src/experiment-components/donation-block.vue
View file

@ -7,8 +7,10 @@
</div>
</div>
<div class="row-align d-flex px-4">
<div>
<img class="w-100 mt-1 me-4" :src="LogoImage" />
<div class="logo-block">
<img class="w-100" :src="LogoImage" />
<span>EIN: 26-3043727</span>
<!-- This will likely never change so hard coded -->
</div>
<div>
<p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
@ -79,7 +81,8 @@
</div>
<div class="row">
<div class="col-12">
<p class="mt-2 mb-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
<p class="mt-2 mb-2 mx-0 text-center caption" v-html="DonationFooterText"></p>
<p class="mb-4 mx-0 text-center caption" v-html="DonationFooterText2"></p>
</div>
</div>
</form>
@ -121,6 +124,9 @@ export default {
DonationFooterText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
DonationFooterText2() {
return this.getCmsContent(this.cmsWidgetName, "FooterText2");
},
LogoImage() {
return this.getCmsContent("DonationWidget", "Image");
},
@ -195,8 +201,26 @@ export default {
}
}
img {
width: 5rem;
.logo-block {
display: flex;
flex-direction: column;
background: white;
align-items: flex-start;
justify-content: center;
padding: 0 0.5rem;
margin-right: 1rem;
height: max-content;
img {
width: 88px;
}
span {
font-size: 0.625rem;
margin: 0 auto;
padding: 0.5rem 0;
font-family: UrbanistSemibold;
}
}
.donation-slider {

46
src/fmg-components/cart/cart.vue
View file

@ -119,7 +119,7 @@
</div>
<div v-if="donationCartItem" class="donation-amount">
<span>{{ donationCartItemName }}</span>
<span>{{ getLineItemAmount(donationCartItem.subTotal) }}</span>
<span>{{ getLineItemAmount(donationCartItem.sellingPrice) }}</span>
</div>
<div class="amount-due">
<span>{{ amountDueText }}</span>
@ -182,6 +182,7 @@ import {
getAmountDue,
getSubTotal,
getSalesTax,
getAmountDueWithDonation,
} from "@/helpers/pricing-helper.js";
// Constants
@ -211,6 +212,7 @@ export default {
isNoComp: Boolean,
isExpandedOnLoad: Boolean,
isMSRFeeApplicable: Boolean,
donationCartItem: Object,
},
data() {
return {
@ -1083,33 +1085,6 @@ export default {
donationCartItemName() {
return this.getCmsContent("DonationCartTextWidget", "Text");
},
donationCartItem() {
if (!this.lineItems || !this.lineItems.supportingItems) {
return null;
}
const donationLineItem = this.lineItems.supportingItems.find(
(item) => item.partType === partTypeStrings.DONATION
);
if (donationLineItem) {
return {
name: this.donationCartItemName,
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.DONATION,
isDisplayed: true,
isRemovable: false,
subTotal: donationLineItem.sellingPrice,
salesTax: 0,
lineItems: [],
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
cartItemTypes.DONATION
),
};
}
return null;
},
removeLinkText() {
return this.getCmsContent("RemoveCartItemTextWidget", "Text");
},
@ -1156,9 +1131,15 @@ export default {
amountDue() {
if (!this.lineItems || this.lineItems.length < 1) return;
if (this.showAsPaid) return 0;
return this.isInsurance || !this.shouldHideRecalibration
? getAmountDue(this.lineItems) // calculate with recal (if on order)
: getAmountDue(this.lineItemsWithoutRecal); // calculated without recal
if (this.isInsurance || !this.shouldHideRecalibration) {
return this.donationCartItem
? getAmountDueWithDonation(this.lineItems, this.donationCartItem)
: getAmountDue(this.lineItems);
} else {
return this.donationCartItem
? getAmountDueWithDonation(this.lineItemsWithoutRecal, this.donationCartItem)
: getAmountDue(this.lineItemsWithoutRecal);
}
},
amountPaid() {
if (!this.showAsPaid) {
@ -1311,8 +1292,7 @@ export default {
.amount-due,
.amount-paid,
.donation-amount {
font-family:
UrbanistSemibold, AvertaSemibold; /* Okay to remove AvertaSemibold after 2025.06.19 merge/release */
font-family: UrbanistSemibold;
color: $black;
}
.sub-total {

58
src/global-methods.js
View file

@ -100,34 +100,38 @@ export default {
return resolve(response);
},
(error) => {
if (logApiCall) {
analyticsMixIn.methods.pushEventToGA(
GaCategories.API_RESPONSE,
GaActions.RESULT,
`${GaLabels.ERROR}_${endpoint}`,
true
);
if (endpoint.toLowerCase().includes("/digitalconsumer-log")) {
return resolve({ data: null, error: "Ignore errors when logging" });
} else {
if (logApiCall) {
analyticsMixIn.methods.pushEventToGA(
GaCategories.API_RESPONSE,
GaActions.RESULT,
`${GaLabels.ERROR}_${endpoint}`,
true
);
}
if (error.response.status && error.response.status != "404") {
// Do not route to error logic when no wipers found or no promo found (404s)
const errorPayload = {
cause: `Response error ${error.response.status}`,
currentPage: pageNameToLog,
endpoint: endpoint,
};
router.bailout(errorPayload);
// do not log 404 errors from services because we return NotFound
// when a service doesn't return an object
global.$logger.logError(
`${method}: ${endpoint}: ${error.message}`,
error.response
);
}
return reject(error.response);
}
if (error.response.status && error.response.status != "404") {
// Do not route to error logic when no wipers found or no promo found (404s)
const errorPayload = {
cause: `Response error ${error.response.status}`,
currentPage: pageNameToLog,
endpoint: endpoint,
};
router.bailout(errorPayload);
// do not log 404 errors from services because we return NotFound
// when a service doesn't return an object
global.$logger.logError(
`${method}: ${endpoint}: ${error.message}`,
error.response
);
}
return reject(error.response);
}
);
});

8
src/helpers/pricing-helper.js
View file

@ -1,6 +1,7 @@
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import baseMixin from "@/mixins/base-mixin.js";
import { deepClone } from "@/helpers/object-helper";
export function getDisplayAmountDue(lineItemsObject, includeTax = true) {
return getAmountDue(lineItemsObject, includeTax).toLocaleString("en-US", {
@ -62,6 +63,13 @@ export function getSalesTax(lineItemsObject) {
);
}
export function getAmountDueWithDonation(lineItemsObject, donationLineItem) {
// this is amount due with Donation added
const lineItemsCloneWithDonation = deepClone(lineItemsObject);
lineItemsCloneWithDonation.supportingItems.push(donationLineItem);
return getAmountDue(lineItemsCloneWithDonation, false);
}
export async function getPricingByDayPartWithPrice(pageNameToLog) {
// Get the Pricing By Day Part
const basePriceByDayPart = await baseMixin.methods.dispatchStoreActionWithLogging(

24
src/layouts/confirmation/confirmation.vue
View file

@ -55,7 +55,8 @@
:damage="damageInfo"
:availableVaps="vaps"
:allowItemRemoval="false"
v-model="lineItems"
v-model="lineItemsWithoutDonation"
:donationCartItem="donationLineItem"
:showAsPaid="isPia"
servicePackageOptionsCmsName="ServicePackageTitle"
:isInsurance="isInsurance"
@ -123,6 +124,7 @@ import experimentMixin from "@/mixins/experiment-mixin.js";
import { containsRecalParts } from "@/helpers/recal-helper.js";
import donationBlock from "@/experiment-components/donation-block.vue";
import { partNumberStrings } from "@/constants/part-number-strings";
import { partTypeStrings } from "@/constants/part-type-strings";
import analyticsMixin from "@/mixins/analytics-mixin";
export default {
@ -229,7 +231,7 @@ export default {
};
const donationItems = lineItemsFromSubmittedOrder.supportingItems?.filter(
(item) => item.partNumber === partNumberStrings.DONATION
(item) => item.partType === partTypeStrings.DONATION
);
const donationAmount = donationItems?.length > 0 ? donationItems[0].sellingPrice : 0;
@ -243,7 +245,7 @@ export default {
vm.shouldDisplayFosterLove = hasFosterLoveExperiment;
vm.donationAmount = donationAmount;
vm.showDonationSuccess = lineItemsFromSubmittedOrder.supportingItems?.some(
(item) => item.partType === partNumberStrings.DONATION
(item) => item.partType === partTypeStrings.DONATION
);
vm.pushAnalytics();
@ -490,6 +492,22 @@ export default {
donationValues() {
return [1, 3, 5];
},
lineItemsWithoutDonation() {
const lineItemsClone = deepClone(this.lineItems);
lineItemsClone.supportingItems = lineItemsClone.supportingItems?.filter(
(item) => item.partType !== partTypeStrings.DONATION
);
return lineItemsClone;
},
donationLineItem() {
if (!this.lineItems) return null;
const donationLineItems = this.lineItems.supportingItems?.filter(
(item) => item.partType === partTypeStrings.DONATION
);
let output =
donationLineItems && donationLineItems.length > 0 ? donationLineItems[0] : null;
return output;
},
},
methods: {
arePagePrerequisitesValid() {

19
src/layouts/customer-details/customer-details.vue
View file

@ -85,6 +85,7 @@ import { Form, defineRule } from "vee-validate";
import store from "@/store";
import { paymentMethods } from "@/constants/payment-method-constants";
import { flushSaveSessionQueue } from "@/helpers/heritage-integration/order-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@ -157,11 +158,21 @@ export default {
getTechNotesFromStore() {
return store.getters.order.serviceLocation.techNotes;
},
getSelectedAppointmentType() {
return store.getters.order.serviceLocation.appointmentType;
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
if (this.getSelectedAppointmentType() == AppointmentTypeStrings.MOBILE) {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK_WITH_MOBILE_SERVICE,
this.pageName
);
} else {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
}
},
async forwardButtonAction() {
this.dispatchStoreAction(

198
src/layouts/mobile-details/mobile-address-questions/mobile-address-questions.spec.js Normal file
View file

@ -0,0 +1,198 @@
// Components
import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions.vue";
// Supporting Files
import { mount, shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
describe("initial state", () => {
test("Should show all the address field", () => {
// Arrange
const { wrapper } = setupMocks({});
// Assert
const streetAddressField = wrapper.findComponent({ ref: "streetAddress" });
const cityField = wrapper.findComponent({ ref: "city" });
const stateField = wrapper.findComponent({ ref: "state" });
const zipCodeField = wrapper.findComponent({ ref: "zipCode" });
expect(streetAddressField.exists()).toBe(true);
expect(streetAddressField.isVisible()).toBe(true);
expect(cityField.exists()).toBe(true);
expect(cityField.isVisible()).toBe(true);
expect(stateField.exists()).toBe(true);
expect(stateField.isVisible()).toBe(true);
expect(zipCodeField.exists()).toBe(true);
expect(zipCodeField.isVisible()).toBe(true);
});
test("Should render mobileAddressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
const city = wrapper.findComponent({ ref: "city" });
const state = wrapper.findComponent({ ref: "state" });
const zipCode = wrapper.findComponent({ ref: "zipCode" });
// Assert
expect(streetAddress.exists()).toBe(true);
expect(city.exists()).toBe(true);
expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true);
});
test("Should render apartmentNumberOrBusinessName textbox-question when captureApartmentNumberOrBusinessName = true", async () => {
// Arrange
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
captureApartmentNumberOrBusinessName: true,
},
});
// Act
const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
const apartmentNumberOrBusinessName = wrapper.findComponent({
ref: "apartmentNumberOrBusinessName",
});
const city = wrapper.findComponent({ ref: "city" });
const state = wrapper.findComponent({ ref: "state" });
const zipCode = wrapper.findComponent({ ref: "zipCode" });
// Assert
expect(streetAddress.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.isVisible()).toBe(true);
expect(city.exists()).toBe(true);
expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true);
});
test("Should *not* render apartmentNumberOrBusinessName textbox-question when captureApartmentNumberOrBusinessName = false", async () => {
// Arrange
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
captureApartmentNumberOrBusinessName: false,
},
});
// Act
const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
const apartmentNumberOrBusinessName = wrapper.findComponent({
ref: "apartmentNumberOrBusinessName",
});
const city = wrapper.findComponent({ ref: "city" });
const state = wrapper.findComponent({ ref: "state" });
const zipCode = wrapper.findComponent({ ref: "zipCode" });
// Assert
expect(streetAddress.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.isVisible()).toBe(false);
expect(city.exists()).toBe(true);
expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true);
});
});
describe("happy paths", () => {
test("full street address is passed in => address fields are displayed", async () => {
// Arrange/Act
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "12345 Test Road",
city: "Tests",
state: "OH",
zipCode: "12312",
},
},
});
await wrapper.vm.$nextTick();
// Assert
const cityField = wrapper.findComponent({ ref: "city" });
const stateField = wrapper.findComponent({ ref: "state" });
const zipField = wrapper.findComponent({ ref: "zipCode" });
expect(cityField.exists()).toBeTruthy();
expect(cityField.isVisible()).toBeTruthy();
expect(stateField.exists()).toBeTruthy();
expect(cityField.isVisible()).toBeTruthy();
expect(zipField.exists()).toBeTruthy();
expect(cityField.isVisible()).toBeTruthy();
});
});
function setupMocks({
mountOptions,
props,
isShallowMount = true,
querySelectorFunction,
geocoderResult = ["1234 Test Street"],
matchFound = false,
}) {
store.commit(storeMutations.RESET_STATE);
const resultingMountOptions = getMountOptions({
...mountOptions,
router: {
navigate: jest.fn(),
navigate: jest.fn(),
},
loadScript: jest.fn().mockResolvedValue(),
});
if (props) resultingMountOptions.propsData = props;
if (isShallowMount) {
resultingMountOptions.global.stubs = {
...(resultingMountOptions.global.stubs ?? {}),
textboxQuestion: {
template: `<span></span>`,
methods: {
handleChange: jest.fn(),
},
},
dropdownQuestion: {
template: `<span></span>`,
methods: {
handleChange: jest.fn(),
},
},
};
}
const wrapper = isShallowMount
? shallowMount(mobileAddressQuestions, resultingMountOptions)
: mount(mobileAddressQuestions, resultingMountOptions);
document.querySelector = jest.fn().mockImplementation((query) => {
let result = null;
if (query == ".pac-container") result = document.createElement("div");
else if (querySelectorFunction) {
result = querySelectorFunction(query);
}
return result ?? null;
});
return { wrapper };
}

170
src/layouts/mobile-details/mobile-address-questions/mobile-address-questions.vue Normal file
View file

@ -0,0 +1,170 @@
<template>
<div class="address-questions">
<div class="row mb-4" aria-live="polite">
<div class="col">
<!-- Temporarily changing id from autocomplete to streetAddress -->
<textboxQuestion
customInputId="streetAddress"
cmsWidgetName="StreetAddressQuestionWidget"
v-model="addressModel.streetAddress"
validationRules="street-address-required"
ref="streetAddress"
:labelBold="labelBold"
autocomplete="streetAddress" />
</div>
</div>
<transition name="fade" mode="out-in">
<div
class="row mb-4"
v-show="showApartmentNumberOrBusinessNameField"
aria-live="polite">
<div class="col">
<textboxQuestion
customInputId="apartmentNumberOrBusinessName"
cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
v-model="addressModel.apartmentNumberOrBusinessName"
ref="apartmentNumberOrBusinessName"
:labelBold="labelBold" />
</div>
</div>
</transition>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite">
<div class="col">
<textboxQuestion
customInputId="city"
cmsWidgetName="CityQuestionWidget"
v-model="addressModel.city"
ref="city"
validationRules="city-required"
autocomplete="address-level2"
:labelBold="labelBold" />
</div>
</div>
</transition>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite">
<div class="col">
<dropdownQuestion
customDropdownId="state"
cmsWidgetName="StateQuestionWidget"
v-model="addressModel.state"
ref="state"
:options="stateOptions"
validationRules="state-required"
autocomplete="address-level1"
:labelBold="labelBold"
:isDisabled="this.isStateDisabled" />
</div>
<div class="col">
<textboxQuestion
customInputId="zipCode"
cmsWidgetName="ZipQuestionWidget"
v-model="addressModel.zipCode"
ref="zipCode"
mask="#####"
validationRules="zip-code-required|zip-code-format"
autocomplete="postal-code"
:labelBold="labelBold"
:isDisabled="this.isZipCodeDisabled" />
</div>
</div>
</transition>
</div>
</template>
<script>
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
import { defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { stateOptions } from "@/constants/state-options";
// DEFINE VALIDATION RULES
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
defineRule("city-required", required(errorMessages.CITY_REQUIRED));
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
export default {
name: "mobile-address-questions",
emits: ["update:modelValue"], // The component emits an event
props: {
modelValue: {
type: Object,
default: () => ({
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
}),
},
validationRules: String,
captureApartmentNumberOrBusinessName: {
type: Boolean,
default: false,
},
preserveCityAndStateOnReset: {
type: Boolean,
default: false,
},
labelBold: {
type: Boolean,
required: false,
default: false,
},
isStateDisabled: {
type: Boolean,
required: false,
default: false,
},
isZipCodeDisabled: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
stateOptions() {
return stateOptions;
},
addressModel: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
showApartmentNumberOrBusinessNameField: {
get: function () {
return this.captureApartmentNumberOrBusinessName;
},
},
},
components: {
textboxQuestion,
dropdownQuestion,
},
};
</script>
<style lang="scss">
.address-questions {
margin-top: 0.5rem;
}
#streetAddressField {
position: relative;
.pac-container {
top: 76px !important; // Height of #streetAddressField
left: 0 !important;
}
}
</style>

139
src/layouts/mobile-details/mobile-details.spec.js Normal file
View file

@ -0,0 +1,139 @@
import mobileDetails from "@/layouts/mobile-details/mobile-details.vue";
import { mount, shallowMount } from "@vue/test-utils";
import { storeActions } from "@/constants/store-actions";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
const linkWidgetName = "linkWidgetName";
const modalWidgetName = "modalWidgetName";
const mockLinkCmsContent = {
BodyText: "Sample link body text here.",
};
const mockModalCmsContent = {
FooterText: "Sample modal footer text here.",
};
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
if (widgetName === linkWidgetName) {
return mockLinkCmsContent[cmsFieldName];
}
if (widgetName === modalWidgetName) {
return mockModalCmsContent[cmsFieldName];
}
return null;
}),
dispatchStoreAction: jest.fn((actionName) => {
if (actionName === storeActions.SAVE_MOBILE_DETAILS) {
return true;
}
}),
},
};
beforeEach(() => {
store.getters = {
order: {
serviceLocation: {
zipCode: "43235",
zipCodeCtu: "00000",
state: "OH",
appointmentType: "Mobile",
city: "Columbus",
address: "123 Main St",
address2: "Suite 100",
isVehicleProtected: true,
},
schedule: {
date: "2023-10-10",
endTime: "14:00",
startTime: "13:00",
routeCode: "R1",
jobMaxMinutes: "60",
jobMinMinutes: "30",
},
},
payment: {
isInsurance: false,
},
};
});
describe("mobile-details.vue", () => {
test("if the continue button is clicked, navigate forward", async () => {
// Arrange
const { wrapper } = setupMocks(mobileDetails, {
mixins: [mockMixin],
attachTo: document.body,
});
wrapper.setData({
addressQuestions: {
streetAddress: "Test Street",
apartmentNumberOrBusinessName: "Test Apartment",
city: "Test City",
state: "TS",
zipCode: "12345",
},
isVehicleProtected: true,
});
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
});
test("arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks(mobileDetails, {
mixins: [mockMixin],
attachTo: document.body,
});
//Act
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test("if the back button is clicked, navigate back", async () => {
// Arrange
const { wrapper } = setupMocks(mobileDetails, {
mixins: [mockMixin],
attachTo: document.body,
});
// Act
await wrapper.vm.backButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
});
});
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
const resultingMountOptions = getMountOptions({
...mountOptions,
mixins,
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
if (props) resultingMountOptions.propsData = props;
resultingMountOptions["attachTo"] = document.body;
const wrapper = isShallowMount
? shallowMount(mobileDetails, resultingMountOptions)
: mount(mobileDetails, resultingMountOptions);
return { wrapper };
}

168
src/layouts/mobile-details/mobile-details.vue Normal file
View file

@ -0,0 +1,168 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="mobile-location-questions">
<div class="address-questions-container">
<mobileAddressQuestions
ref="addressQuestions"
v-model="this.addressQuestions"
captureApartmentNumberOrBusinessName="true"
preserveCityAndStateOnReset="true"
labelBold="true"
isStateDisabled="true"
isZipCodeDisabled="true" />
<vehicleProtectedQuestion
ref="vehicleProtectedQuestion"
v-model="this.isVehicleProtected"
cmsWidgetName="VehicleProtectedQuestionWidget"
labelBold="true" />
<textBlock
cmsWidgetName="WorkspaceRequirementsWidget"
typeStyle="caption" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
</Form>
</template>
<script>
//Components
import textBlock from "@/digital-components/text-block/text-block";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions";
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
import store from "@/store";
//Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
export default {
name: "MobileDetails",
data() {
return {
addressQuestions: {
streetAddress: this.getServiceAddressFromStore(),
apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
},
isVehicleProtected: this.getIsVehicleProtectedFromStore(),
};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.name);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisitesValid() {
const serviceLocation = store.getters.order.serviceLocation;
const serviceLocationPreReqs =
serviceLocation.zipCode &&
serviceLocation.zipCodeCtu &&
serviceLocation.appointmentType &&
serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
// Schedule
const schedule = store.getters.order.schedule;
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
const preReqResult = serviceLocationPreReqs && scheduleReqs;
return preReqResult;
},
getServiceAddressFromStore() {
return store.getters.order.serviceLocation.address;
},
getServiceAddress2FromStore() {
return store.getters.order.serviceLocation.address2;
},
getServiceCityFromStore() {
return store.getters.order.serviceLocation.city;
},
getServiceStateFromStore() {
return store.getters.order.serviceLocation.state;
},
getServiceZipCodeFromStore() {
return store.getters.order.serviceLocation.zipCode;
},
getIsVehicleProtectedFromStore() {
return store.getters.order.serviceLocation.isVehicleProtected;
},
async forwardButtonAction() {
await this.dispatchStoreAction(
this.storeActions.SAVE_MOBILE_DETAILS,
{
address: this.addressQuestions.streetAddress,
address2: this.addressQuestions.apartmentNumberOrBusinessName,
city: this.addressQuestions.city,
isVehicleProtected: this.isVehicleProtected,
},
false
);
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
},
computed: {
headerText() {
return this.getCmsContent("MobileLocationModalWidget", "HeaderText");
},
},
components: {
mobileAddressQuestions,
vehicleProtectedQuestion,
textBlock,
funnelHeader,
navbar,
funnelSubHeader,
Form,
loadingModal,
},
};
</script>

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

@ -314,57 +314,6 @@ describe("service-location.vue", () => {
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
});
test("resets mobile location when service zip code is updated", () => {
// Arrange
const { wrapper } = setupMocks({});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "5555 Sulgrave Dr",
apartmentNumberOrBusinessName: "Apt 1",
city: "New Albany",
state: "OH",
zipCode: "43054",
},
isVehicleProtected: true,
};
wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "IL",
zipCode: "61606",
},
isVehicleProtected: null,
isMobileSelected: false,
};
// Act
serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
// Assert
expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
});
test("resets appointment type selection when service zip code is updated by service zip modal", () => {
// Arrange
const { wrapper } = setupMocks({});
@ -424,190 +373,6 @@ describe("service-location.vue", () => {
});
});
describe("updating mobile location", () => {
test("updates the page model after providing the mobile location", async () => {
// Arrange
const { wrapper } = setupMocks({});
await wrapper.setData({
shopProviderData: {
mobileProviderNumber: "001820",
},
selectedAppointmentType: "Mobile",
providerData: { mobileProviderNumber: "01820" },
isGlassServiceableMobile: true,
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
wrapper.vm.forwardButtonAction = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: null,
};
wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "5555 Sulgrave Dr",
apartmentNumberOrBusinessName: "Apt 1",
city: "New Albany",
state: "OH",
zipCode: "43054",
},
isVehicleProtected: true,
isMobileSelected: true,
};
// Act
// Trigger the event
await mobileLocationQuestionsComponent.vm.$emit(
"setMobileLocation",
newMobileLocationQuestions
);
await wrapper.vm.$nextTick(); // Wait for DOM updates
// Assert
expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
});
test("resets service zip code when mobile location is updated", async () => {
// Arrange
const { wrapper } = setupMocks({});
await wrapper.setData({
shopProviderData: {
mobileProviderNumber: "001820",
},
selectedAppointmentType: "Mobile",
providerData: { mobileProviderNumber: "01820" },
isGlassServiceableMobile: true,
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
wrapper.vm.forwardButtonAction = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: null,
isMobileSelectedAndModalClosed: false,
mobileFeePart: null,
};
wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "5555 Rustic Dr",
apartmentNumberOrBusinessName: "Apt 1",
city: "Westerville",
state: "OH",
zipCode: "43081",
},
isVehicleProtected: true,
isMobileSelectedAndModalClosed: true,
mobileFeePart: null,
};
wrapper.vm.serviceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const newServiceZipCodeInfo = {
state: "OH",
zipCode: "43081",
zipCodeCtu: "01526",
};
wrapper.vm.closeModalAction = jest.fn();
// Act
// Trigger the event
await mobileLocationQuestionsComponent.vm.$emit(
"setMobileLocation",
newMobileLocationQuestions
);
await wrapper.vm.$nextTick(); // Wait for DOM updates
// Assert
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
});
test("does not reset appointment type selection when service zip code is updated by mobile location modal when Mobile is selected", async () => {
// Arrange
const { wrapper } = setupMocks({});
await wrapper.setData({
shopProviderData: {
mobileProviderNumber: "001820",
},
selectedAppointmentType: "Mobile",
providerData: { mobileProviderNumber: "01820" },
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
wrapper.vm.forwardButtonAction = jest.fn();
wrapper.vm.isServiceableMobile = true;
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "555 Some Street",
apartmentNumberOrBusinessName: "",
city: "Westerville",
state: "OH",
zipCode: "43081",
},
isVehicleProtected: "YesAnswer",
isMobileSelectedAndModalClosed: true,
};
wrapper.vm.closeModalAction = jest.fn();
// Act
mobileLocationQuestionsComponent.vm.$emit("setMobileLocation", mobileLocationQuestions);
// Assert
expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile");
});
});
describe("serviceability logic", () => {
describe("should be logical AND when recalibration is defined.", () => {
test("T & T => T", async () => {
@ -1434,8 +1199,5 @@ function setupMocks({ mountOptionsMockData = {} }) {
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(serviceLocation, mountOptions);
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
wrapper.vm.$refs.mobileLocationQuestions.resetAlerts = jest.fn();
wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
return { wrapper, apiPromise };
}

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

@ -89,24 +89,14 @@
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<mobileLocationModalQuestions
customComponentId="mobileLocationQuestions"
v-show="selectedAppointmentType === 'Mobile'"
v-model="mobileLocationQuestions"
:mobileFeePart="mobileFeePart"
:mobileFeeApplies="mobileFeeApplies"
@updated-mobile-fee-part="setMobileFeePart"
@updated-recycle-fee-part="setRecycleFeePart"
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase"
@updated-mobile-ctu="setCtuForMobile"
validationRules="mobile-location-required"
ref="mobileLocationQuestions"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget"
@setMobileLocation="setMobileLocationQuestions"
@set-mobile-location-invalid="setMobileLocationInValid" />
<div class="text-center">
<textBlock
v-if="mobileFeeApplies && isMobileSelected"
:customText="mobileFeeText"
cmsWidgetName="MobileFeeDisclaimerWidget"
typeStyle="caption"
class="ps-4 pe-4 mt-4" />
</div>
<shopQuestion
ref="shopQuestion"
v-show="isShopQuestionDisplayed"
@ -134,7 +124,6 @@
// Components
import alert from "@/ux-components/alert/alert";
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
@ -144,6 +133,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting files
import baseMixin from "@/mixins/base-mixin.js";
@ -301,20 +291,8 @@ export default {
this.$nextTick();
},
},
mobileLocationQuestions: {
get: function () {
return {
addressQuestions: {
streetAddress: this.streetAddress,
apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
city: this.city,
state: this.state,
zipCode: this.zipCode,
},
isVehicleProtected: this.isVehicleProtected,
isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
};
},
isMobileSelected() {
return this.selectedAppointmentType == AppointmentTypeStrings.MOBILE;
},
isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) {
@ -357,6 +335,20 @@ export default {
return this.mobileFeeHasPrice;
}
},
mobileFeeText() {
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
},
mobileFee() {
if (!this.mobileFeePart) {
return 0;
}
return (
this.mobileFeePart.laborAmount +
this.mobileFeePart.sellingPrice +
this.mobileFeePart.kitPrice
);
},
showMobileFreeAlert() {
if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
return true;
@ -516,32 +508,6 @@ export default {
setRecycleFeePart(recycleFeePart) {
this.recycleFeePart = recycleFeePart;
},
//creating async function as the computed property can not directly handle asynchronous operations or promises.
async setMobileLocationQuestions(newValue) {
var newZipCode = newValue.addressQuestions.zipCode;
if (newZipCode !== this.zipCode) {
await getShopProviderData(newZipCode).then((result) => {
if (this.isServiceableMobile) {
this.shopProviderData = result.data;
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
}
});
}
if (this.isServiceableMobile) {
this.setMobileLocation(newValue);
this.setMobileLocationInValid(false);
} else {
await getZipCodeData(newZipCode).then((zipCodeData) => {
this.serviceZipCodeQuestion = {
state: zipCodeData.state,
zipCode: newZipCode,
zipCodeCtu: zipCodeData.zipCodeCtu,
};
});
}
},
getCarIdfromStore() {
return store.getters.vehicle.carId;
},
@ -590,15 +556,6 @@ export default {
this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile;
},
setMobileLocation(mobileLocation) {
this.streetAddress = mobileLocation.addressQuestions.streetAddress;
this.apartmentNumberOrBusinessName =
mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
this.city = mobileLocation.addressQuestions.city;
this.state = mobileLocation.addressQuestions.state;
this.zipCode = mobileLocation.addressQuestions.zipCode;
this.isVehicleProtected = mobileLocation.isVehicleProtected;
},
async reloadShopData(zipCode) {
await this.$refs.shopQuestion.reloadShopData(zipCode);
},
@ -755,13 +712,49 @@ export default {
this.updateAndSaveSupportingItems();
this.updateAndSaveIsMSRFeeApplicable();
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
//mocked schedule and should be clear when implement schedule page.
this.dispatchStoreAction(
this.storeActions.SAVE_SCHEDULE,
this.getTimeSlotInfo(),
false
);
if (this.selectedAppointmentType == AppointmentTypeStrings.MOBILE) {
//navigate to mobile details page
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
this.pageName
);
} else {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
}
},
setMobileLocationInValid(isMobileLocationInValid) {
this.isMobileAddressValid = !isMobileLocationInValid;
getTimeSlotInfo() {
// Get the current date
const currentDate = new Date();
// Add 10 days to the current date
currentDate.setDate(currentDate.getDate() + 10);
// Format the date as yyyy-mm-dd
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
const day = String(currentDate.getDate()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
return {
date: formattedDate,
endTime: "12:00",
jobMaxMinutes: "180",
jobMinMinutes: "120",
routeCode: "3357I-03357-M-I*20988*AM",
startTime: "08:00",
};
},
},
watch: {
@ -787,16 +780,6 @@ export default {
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
if (this.zipCode == this.getServiceZipCodeFromStore()) {
//restore mobile address from store in case user make changes to address but not commit it.
this.streetAddress = this.getServiceAddressFromStore();
this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
this.city = this.getServiceCityFromStore();
this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
} else {
this.resetMobileLocation();
}
this.$refs.mobileLocationQuestions.resetAlerts();
} else {
this.selectedProvider = new Provider();
}
@ -807,7 +790,6 @@ export default {
alert,
serviceZipModalQuestion,
appointmentTypeQuestion,
mobileLocationModalQuestions,
funnelHeader,
navbar,
funnelSubHeader,
@ -815,6 +797,7 @@ export default {
loadingModal,
contentGroupModal,
shopQuestion,
textBlock,
},
};
</script>

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

@ -12,7 +12,8 @@ import {
setSessionKeyIfUnset,
} from "@/helpers/heritage-integration/cookie-helper";
import { queryStrings } from "@/constants/query-strings";
import { experimentSettings } from "@/constants/experiments";
import { experimentSettings, experimentUniverses } from "@/constants/experiments";
import experimentMixin from "@/mixins/experiment-mixin";
import {
analyticsPageEvents,
GaCategories,
@ -128,6 +129,60 @@ export default {
}
},
async logDigitalConsumer() {
const currentPageName = getPageNameFromRouter();
const universes = store.getters.applicationUser.experiments;
console.log(JSON.stringify(universes));
let hasDynamoLogging = experimentMixin.methods.hasSettingEqualTo(
experimentSettings.DYNAMO_LOGGING,
"true",
universes
);
if (!hasDynamoLogging) {
return;
}
const variationNames = universes
.filter((item) => item.universeName === experimentUniverses.CONCEPT_FUNNEL)
.map((item) => item.variationName)
.filter(Boolean); // removes undefined/null
const conceptVariation = variationNames.length > 0 ? variationNames[0] : "";
const submittedOrder = baseMixin.methods.getSubmittedOrder();
const hasSubmittedOrder = baseMixin.methods.hasSubmittedOrder();
const hasSubmittedOrderAtConfirmationPage =
hasSubmittedOrder && currentPageName?.toLowerCase() == routeData.CONFIRMATION.name;
const refSequenceNum = hasSubmittedOrderAtConfirmationPage
? submittedOrder.referralSequenceNumber
: store.getters.order.referralSequenceNumber;
var payload = {
actionName: `Browser page:${currentPageName}`,
referralSequenceNumber: hasSubmittedOrderAtConfirmationPage
? submittedOrder.referralSequenceNumber
: store.getters.order.referralSequenceNumber,
referralNumber: hasSubmittedOrderAtConfirmationPage
? submittedOrder.referralNumber
: store.getters.order.referralNumber,
workOrderId: hasSubmittedOrderAtConfirmationPage
? submittedOrder.workOrderId
: store.getters.order.workOrderId,
workOrderNumber: hasSubmittedOrderAtConfirmationPage
? submittedOrder.workOrderNumber
: store.getters.order.workOrderNumber,
conceptVariation: conceptVariation,
};
await baseMixin.methods.dispatchStoreAction(
storeActions.LOG_DIGITALCONSUMER,
payload,
false
);
},
async pushEventForChatsToGA(category, action, label, pushToLogApp = false) {
const currentPageName = getPageNameFromRouter();
const value = `2.0_${currentPageName}`;

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

@ -197,6 +197,18 @@ export default {
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}
},
isMobileDevice() {
const userAgent = navigator.userAgent;
return (
userAgent.includes("Android") ||
userAgent.includes("Mobile") ||
userAgent.includes("iPod") ||
userAgent.includes("iPhone") ||
userAgent.includes("IEMobile") ||
userAgent.includes("BlackBerry") ||
userAgent.includes("webOS")
);
},
getSubmittedOrder() {
return JSON.parse(
window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE)

6
src/router/constants/navigation-scenarios.js
View file

@ -49,6 +49,12 @@ const navigationScenarios = {
// Insurance-Company
CLICKED_PAY_ON_MY_OWN: "CLICKED_PAY_ON_MY_OWN",
//Service-Location
CLICKED_FORWARD_WITH_MOBILE_SERVICE: "CLICKED_FORWARD_WITH_MOBILE_SERVICE",
//Customer-details
CLICKED_BACK_WITH_MOBILE_SERVICE: "CLICKED_BACK_WITH_MOBILE_SERVICE",
// Schedule
CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",

4
src/router/constants/routes.js
View file

@ -68,6 +68,10 @@ export const routeData = {
name: "schedule",
path: "/schedule",
},
MOBILE_DETAILS: {
name: "mobile-details",
path: "/mobile-details",
},
CUSTOMER_DETAILS: {
name: "customer-details",
path: "/customer-details",

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

@ -460,6 +460,10 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.SCHEDULE,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
destinationPageData: routeData.MOBILE_DETAILS,
},
],
},
{
@ -479,6 +483,19 @@ const routingTable = function () {
},
],
},
{
pageName: routeData.MOBILE_DETAILS.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.SERVICE_LOCATION,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.CUSTOMER_DETAILS,
},
],
},
{
pageName: routeData.CUSTOMER_DETAILS.name,
maps: [
@ -486,6 +503,10 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.SCHEDULE,
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_MOBILE_SERVICE,
destinationPageData: routeData.MOBILE_DETAILS,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.PAYMENT_METHOD,

3
src/router/methods/after-each.js
View file

@ -1,6 +1,9 @@
import analyticsMixin from "@/mixins/analytics-mixin";
export async function afterEach(to, from) {
// digital consumer logging
analyticsMixin.methods.logDigitalConsumer();
// Push page view to GA
analyticsMixin.methods.pushPageViewToGA();

1
src/router/methods/routes.js
View file

@ -37,6 +37,7 @@ export const routes = [
createRoute(routeData.PAYMENT_PIA_RETURN),
createRoute(routeData.CONFIRMATION),
createRoute(routeData.RETURN_USER),
createRoute(routeData.MOBILE_DETAILS),
// Virtual pages (resolve to a non-virtual page.)
createVirtualRoute(routeData.LANDING, landingBeforeEnter),

45
src/store/index.js
View file

@ -11,7 +11,11 @@ import { experimentTriggers } from "@/constants/experiments";
import { damageLocationsSelected } from "@/constants/damage-locations-selected";
import { singleWindshieldCarIds } from "@/constants/single-windshield-carids";
import { routeData } from "@/router/constants/routes";
import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper.js";
import {
deleteFunnelCookie,
getSessionIdValue,
getDeviceIdValue,
} from "@/helpers/heritage-integration/cookie-helper.js";
import { deepEqual } from "@/helpers/object-helper";
import baseMixin from "@/mixins/base-mixin.js";
import {
@ -421,6 +425,12 @@ export const mutations = {
},
};
},
updateMobileDetails(state, mobileDetails) {
state.order.serviceLocation.address = mobileDetails.address;
state.order.serviceLocation.address2 = mobileDetails.address2;
state.order.serviceLocation.city = mobileDetails.city;
state.order.serviceLocation.isVehicleProtected = mobileDetails.isVehicleProtected;
},
updateServiceLocationTechNotes(state, techNotes) {
state.order.serviceLocation.techNotes = techNotes;
},
@ -1551,6 +1561,36 @@ export const actions = {
});
},
logDigitalConsumer(
context,
{
actionName,
referralSequenceNumber,
referralNumber,
workOrderId,
workOrderNumber,
conceptVariation,
}
) {
var payload = {
sessionId: getSessionIdValue(),
deviceId: getDeviceIdValue(),
actionName: actionName ?? "",
referralSequenceNumber: referralSequenceNumber ?? "",
referralNumber: referralNumber ?? "",
applicationName: baseMixin.methods.isMobileDevice() ? "2.0 Mobile" : "2.0",
workOrderId: workOrderId ?? "",
workOrderNumber: workOrderNumber ?? "",
conceptVariation: conceptVariation,
};
return globalMethods.callHttpClient({
method: endpoints.LogDigitalConsumer.method,
endpoint: endpoints.LogDigitalConsumer.url,
payload: payload,
});
},
// Misc Actions
setReferralInformation(context, { referralNumber, referralDate, referralCorrelationId, eon }) {
context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
@ -3204,6 +3244,9 @@ export const actions = {
context.commit(storeMutations.UPDATE_SERVICE_LOCATION, serviceLocationInfo);
},
saveMobileDetails(context, mobileDetails) {
context.commit(storeMutations.UPDATE_MOBILE_DETAILS, mobileDetails);
},
saveServiceLocationTechNotes(context, techNotesInfo) {
context.commit(storeMutations.UPDATE_SERVICE_LOCATION_TECH_NOTES, techNotesInfo);

4
src/styles/ux-variables.scss
View file

@ -121,8 +121,8 @@ $body-color: $gray-600;
//Fonts
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
$font-family-monospace:
UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;