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

Merge remote-tracking branch 'origin/develop' into feature/CASH-2572

Browse source
This commit is contained in:
scottkiener-at-safelite 2026-05-27 10:46:27 -04:00
commit 08e97fb152
90 changed files with 4342 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
jest.config.js
View file

@ -33,19 +33,20 @@ module.exports = {
"!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
"!src/layouts/insurance/*.vue", // Temp test exclusion while in development
"!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
"!src/digital-components/date-picker/**/*.vue", // Temp test exclusion while in development
"!src/layouts/policy-info/*.vue",
"!src/layouts/policy-vehicle/*.vue",
"!src/layouts/policy-driver/*.vue",
"!src/layouts/duplicate-check/*.vue",
"!src/layouts/endorsements/*.vue",
"!src/layouts/policy-info-submitted/*.vue",
"!src/layouts/recalibration-info/*.vue",
"!src/layouts/coverage-statement/*.vue",
"!src/layouts/insurance-details/*.vue",
"!src/layouts/verify-details/*.vue",
"!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
"!src/experiment-components/*.vue",
// END
], // ! means exclude from coverage.
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: {
global: {
statements: 68,
},
},
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
//silent: true,
};
process.env = Object.assign(process.env, environmentVariablesWithDefaults);

129
package-lock.json generated
View file

@ -10,6 +10,7 @@
"dependencies": {
"@adyen/adyen-web": "^6.27.0",
"@iframe-resizer/child": "^5.3.3",
"@vuepic/vue-datepicker": "^12.1.0",
"axios": "^0.30.2",
"bootstrap": "^5.3.3",
"core-js": "^3.38.1",
@ -1910,6 +1911,11 @@
"dev": true,
"license": "MIT"
},
"node_modules/@date-fns/tz": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
"integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="
},
"node_modules/@discoveryjs/json-ext": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@ -2045,6 +2051,63 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@floating-ui/core": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
"dependencies": {
"@floating-ui/utils": "^0.2.11"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.7.6",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
"dependencies": {
"@floating-ui/core": "^1.7.5",
"@floating-ui/utils": "^0.2.11"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.11",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="
},
"node_modules/@floating-ui/vue": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
"integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
"dependencies": {
"@floating-ui/dom": "^1.7.6",
"@floating-ui/utils": "^0.2.11",
"vue-demi": ">=0.13.0"
}
},
"node_modules/@floating-ui/vue/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@ -3572,6 +3635,11 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.21",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
"integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
},
"node_modules/@types/ws": {
"version": "8.18.1",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@ -4536,6 +4604,58 @@
"dev": true,
"license": "MIT"
},
"node_modules/@vuepic/vue-datepicker": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-12.1.0.tgz",
"integrity": "sha512-QuWcO+CqIGYFoRNCagp9xUY9sMK/OHUlVIDxBYjw7HjCTWXfuE/r3l3loB00faEtb0Teo3DeBn26hT3tYA5pgg==",
"dependencies": {
"@date-fns/tz": "^1.4.1",
"@floating-ui/vue": "^1.1.9",
"@vueuse/core": "^14.1.0",
"date-fns": "^4.1.0"
},
"engines": {
"node": ">=18.12.0"
},
"peerDependencies": {
"vue": ">=3.5.0"
}
},
"node_modules/@vueuse/core": {
"version": "14.2.1",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz",
"integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
"dependencies": {
"@types/web-bluetooth": "^0.0.21",
"@vueuse/metadata": "14.2.1",
"@vueuse/shared": "14.2.1"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vue": "^3.5.0"
}
},
"node_modules/@vueuse/metadata": {
"version": "14.2.1",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz",
"integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "14.2.1",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz",
"integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==",
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vue": "^3.5.0"
}
},
"node_modules/@webassemblyjs/ast": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@ -6693,6 +6813,15 @@
"node": ">=10"
}
},
"node_modules/date-fns": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/debounce": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",

1
package.json
View file

@ -14,6 +14,7 @@
"dependencies": {
"@adyen/adyen-web": "^6.27.0",
"@iframe-resizer/child": "^5.3.3",
"@vuepic/vue-datepicker": "^12.1.0",
"axios": "^0.30.2",
"bootstrap": "^5.3.3",
"core-js": "^3.38.1",

3
playwright-tests/.env
View file

@ -9,8 +9,9 @@ SKIP_CONTENT_SITE="false"
# Experiments Flag
IS_MOBILEFIRST="false"
IS_ADYENPAYMENTS="false"
IS_ADYENPAYMENTS="true"
IS_MULTILOCATIONPOPUP="false"
IS_MSRSPLITPAY="false"
# Base URLs by environment
# qa

5
playwright-tests/.env.dev
View file

@ -2,15 +2,16 @@
# Environment configuration
# Environment type
PLAYWRIGHT_ENV="qa"
PLAYWRIGHT_ENV="QA"
# Skip content site
SKIP_CONTENT_SITE="false"
# Experiments Flag
IS_MOBILEFIRST="false"
IS_ADYENPAYMENTS="false"
IS_ADYENPAYMENTS="true"
IS_MULTILOCATIONPOPUP="false"
IS_MSRSPLITPAY="false"
# Base URLs by environment
# qa

5
playwright-tests/framework/TestData.ts
View file

@ -11,6 +11,10 @@ export interface ITestData extends base {
mockFirstInshopCallNoSchedule?: boolean,
handleMobileFirstModal?: boolean,
experiments?: IExperiments
isMSRGlassPart?: boolean,
isMSRZip?: boolean,
isPIAEnabled?: boolean,
isDualRecal?: boolean,
}
@ -19,5 +23,6 @@ export function getDefaultExperimentsData(): IExperiments {
isAdyenPayments: !!process.env.IS_ADYENPAYMENTS && process.env.IS_ADYENPAYMENTS !== "" ? process.env.IS_ADYENPAYMENTS === "true" : false,
isMobileFirst: !!process.env.IS_MOBILEFIRST && process.env.IS_MOBILEFIRST !== "" ? process.env.IS_MOBILEFIRST === "true" : false,
isMultiLocationPopup: !!process.env.IS_MULTILOCATIONPOPUP && process.env.IS_MULTILOCATIONPOPUP !== "" ? process.env.IS_MULTILOCATIONPOPUP === "true" : false,
isMsrSplitPay: !!process.env.IS_MSRSPLITPAY && process.env.IS_MSRSPLITPAY !== "" ? process.env.IS_MSRSPLITPAY === "true" : false,
}
}

9
playwright-tests/framework/TestPages.ts
View file

@ -20,6 +20,7 @@ import VehiclePartQuestionsPage from "../pages/VehiclePartsPage"
import CapabilityQuestionsPage from "../pages/CapabilityQuestionsPage"
import MoldingQuestionsPage from "../pages/MoldingQuestionsPage"
import { InsuranceCompanyPage } from "../pages/InsuranceCompanyPage"
import { InsuranceDetailsPage } from "../pages/InsuranceDetailsPage"
import { CCPolicyInfoPage } from "../pages/CCPolicyInfoPage"
import { DuplicateCheckPage } from "../pages/DuplicateCheckPage"
import { PolicyVehiclesPage } from "../pages/PolicyVehiclesPage"
@ -32,8 +33,12 @@ import { EndorsementsPage } from "../pages/EndorsementsPage"
import { PolicyDriverPage } from "../pages/PolicyDriverPage"
import { ServiceZipPage } from "../pages/ServiceZipPage"
import { MobileDetailsPage } from "pages/MobileDetailsPage";
import { BailoutPage } from '../pages/BailoutPage';
import { BailoutSuccessPage } from '../pages/BailoutSuccessPage';
export interface ITestPages {
bailoutPage: BailoutPage,
bailoutSuccessPage: BailoutSuccessPage,
capabilityQuestionsPage: CapabilityQuestionsPage,
ccPolicyInfoPage: CCPolicyInfoPage,
contactDetailsPage: ContactDetailsPage,
@ -42,6 +47,7 @@ export interface ITestPages {
estimatePage: EstimatePage,
homePage: HomePage,
insuranceCompanyPage: InsuranceCompanyPage,
insuranceDetailsPage: InsuranceDetailsPage,
leadgenHomePage: LeadgenHomePage,
moldingQuestionsPage: MoldingQuestionsPage,
orderConfirmationPage: OrderConfirmationPage,
@ -70,6 +76,8 @@ export interface ITestPages {
export const createTestPages: TestPagesFactory<ITestPages> = (page: Page) => {
const pages: ITestPages = {
bailoutPage: new BailoutPage(page),
bailoutSuccessPage: new BailoutSuccessPage(page),
capabilityQuestionsPage: new CapabilityQuestionsPage(page),
ccPolicyInfoPage: new CCPolicyInfoPage(page),
contactDetailsPage: new ContactDetailsPage(page),
@ -78,6 +86,7 @@ export const createTestPages: TestPagesFactory<ITestPages> = (page: Page) => {
estimatePage: new EstimatePage(page),
homePage: new HomePage(page),
insuranceCompanyPage: new InsuranceCompanyPage(page),
insuranceDetailsPage: new InsuranceDetailsPage(page),
leadgenHomePage: new LeadgenHomePage(page),
moldingQuestionsPage: new MoldingQuestionsPage(page),
orderConfirmationPage: new OrderConfirmationPage(page),

1
playwright-tests/framework/localTypes/Enums.ts
View file

@ -18,6 +18,7 @@ export enum ProgressBarPercentages {
VehiclePartsPage = '20%',
ServicePackagePage = '60%',
InsuranceCompanyPage = '60%',
InsuranceDetailsPage = '55%',
ServiceLocationPage = '76%',
SchedulePage = '76%',
MobileDetailsPage = '76%',

3
playwright-tests/framework/localTypes/IExperiments.ts
View file

@ -1,5 +1,6 @@
export interface IExperiments {
isMobileFirst: boolean,
isAdyenPayments: boolean,
isMultiLocationPopup: boolean
isMultiLocationPopup: boolean,
isMsrSplitPay: boolean
}

51
playwright-tests/pages/BailoutPage.ts Normal file
View file

@ -0,0 +1,51 @@
import { type Locator, type Page, expect } from '@playwright/test';
import { BasePage } from './BasePage';
import { step } from 'framework/localTypes/Step';
import { ICustomerDetails } from 'safelite-playwright-core';
import { ITestData } from 'framework/TestData';
export class BailoutPage extends BasePage {
readonly page: Page;
readonly firstNameTextBox: Locator;
readonly lastNameTextBox: Locator;
readonly emailAddressTextBox: Locator;
readonly phoneNumberTextBox: Locator;
readonly optInToSMSBox: Locator;
constructor(page: Page) {
super(page);
this.page = page;
this.firstNameTextBox = this.page.getByRole('textbox', { name: 'First name' });
this.lastNameTextBox = this.page.getByRole('textbox', { name: 'Last name' });
this.emailAddressTextBox = this.page.getByRole('textbox', { name: 'Email address' });
this.phoneNumberTextBox = this.page.getByRole('textbox', { name: 'Phone number' });
this.optInToSMSBox = this.page.getByRole('checkbox', { name: 'Opt in to SMS' });
}
async fillOutBailoutForm(customerDetails: ICustomerDetails) {
await this.firstNameTextBox.fill(customerDetails!.firstName!);
await this.lastNameTextBox.fill(customerDetails!.lastName!);
await this.emailAddressTextBox.fill(customerDetails!.email!);
await this.phoneNumberTextBox.fill(customerDetails!.phoneNumber!);
}
async checkOptInToSMSBox() {
await this.optInToSMSBox.check();
}
@step("BailoutPage >> Fill out bailout form: ")
async handleBailoutPage(testData: Partial<ITestData>) {
const { customerDetails } = testData;
await expect(this.page).toHaveURL(/bailout/);
await this.fillOutBailoutForm(customerDetails!);
if (testData.isOptedInForTextMessages) {
await this.checkOptInToSMSBox();
}
await this.nextPage();
}
}

35
playwright-tests/pages/BailoutSuccessPage.ts Normal file
View file

@ -0,0 +1,35 @@
import { type Locator, type Page, expect } from '@playwright/test';
import { BasePage } from './BasePage';
import { TestSuccessAlert } from 'safelite-playwright-core';
import { step } from 'framework/localTypes/Step';
export class BailoutSuccessPage extends BasePage {
readonly thankYouHeading: Locator;
readonly bodyText: Locator;
readonly returnToHomepageButton: Locator;
constructor(page: Page) {
super(page);
this.thankYouHeading = page.getByText("Thanks! We'll get back to you soon");
this.bodyText = page.getByText(/We've got it from here!/);
this.returnToHomepageButton = page.locator('#btn-vehicle-not-listed');
}
async validateBailoutSuccessPage() {
await expect(this.page).toHaveURL(/bailout-success/);
await expect(this.thankYouHeading).toBeVisible();
await expect(this.bodyText).toBeVisible();
await expect(this.bodyText).toHaveText(
/We've got it from here! One of our experts will be in touch to schedule your appointment\. If you have any questions, please contact 1-888-238-4527/
);
await expect(this.returnToHomepageButton).toBeVisible();
}
@step("BailoutSuccessPage >> Validate bailout success page and return to vehicle page")
async handleBailoutSuccessPage() {
await this.validateBailoutSuccessPage();
await this.returnToHomepageButton.click();
await expect(this.page).toHaveURL(/vehicle/);
throw new TestSuccessAlert('Parts not found bailout validated successfully.');
}
}

42
playwright-tests/pages/BasePage.ts
View file

@ -19,6 +19,7 @@ export class BasePage {
readonly hamburgerMenu: Locator;
readonly progressBar: Locator;
readonly loaders: Locator;
readonly yellowAlertMessage: Locator;
constructor(page: Page) {
this.page = page;
@ -29,6 +30,7 @@ export class BasePage {
this.hamburgerMenu = this.page.getByRole('button', { name: 'Hamburger Menu (modal window)' });
this.progressBar = this.page.locator('.progress-bar-outer .progress-bar-inner');
this.loaders = this.page.locator('.spinner-border, .loader');
this.yellowAlertMessage = this.page.locator('.alert-warning');
}
async nextPage() {
@ -135,42 +137,30 @@ export class BasePage {
async mockScheduleResponseForFirstInshopCallNoSchedule(customerDetails: ICustomerDetails) {
let fistInshopScheduleCall = true;
// let fistInshopScheduleCall = true;
const apiUrl = `https://digitalapi.${process.env['PLAYWRIGHT_ENV']!.replace('sys', 'test').toLowerCase()}.safelite.io/schedule/api/v1/schedule/shop-time-slots`;
await this.page.route(apiUrl, async (route) => {
if (!fistInshopScheduleCall) {
/*if (!fistInshopScheduleCall) {
return route.continue();
}
// const fmt = (d: Date) => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
// const startDate = new Date();
//const beginningOfWeek = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() - startDate.getDay());
// const endDate = new Date(beginningOfWeek.getFullYear(), beginningOfWeek.getMonth(), beginningOfWeek.getDate() + 13);
// e.g., "2025-07-23"
/*if (route.request().postDataJSON().startDate === fmt(startDate) && route.request().postDataJSON().endDate === fmt(endDate)) {
const response = await route.fetch();
const responseBody = await response.json();
responseBody.days = [];
// Mock the response
await route.fulfill({
response,
body: JSON.stringify(responseBody),
});
}*/
const response = await route.fetch();
const responseBody = await response.json();
responseBody.days = [];
// Remove up to the first five items from the days array, keeping the rest; if empty, leave as is
if (Array.isArray(responseBody.days) && responseBody.days.length > 0) {
responseBody.days = responseBody.days.slice(5);
} else {
responseBody.days = [];
}
// Mock the response
await route.fulfill({
response,
body: JSON.stringify(responseBody),
});
fistInshopScheduleCall = false;
// fistInshopScheduleCall = false;
});
}
@ -252,9 +242,9 @@ export class BasePage {
if (experiments !== undefined) {
experimentsURLExtension += "?cns=all&experiments="
experimentsURLExtension += experiments?.isMobileFirst
/*experimentsURLExtension += experiments?.isMobileFirst
? "MobileFirstAppointment=MobileFirstAppt_V1=MobileFirstAppt_TEST=true"
: "MobileFirstAppointment=MobileFirstAppt_V1=MobileFirstAppt_CONTROL=true";
: "MobileFirstAppointment=MobileFirstAppt_V1=MobileFirstAppt_CONTROL=true";*/
experimentsURLExtension += experiments?.isAdyenPayments
? ",Adyen%20Payments=Adyen%20Payment%20Test=Adyen%20Payment%20(Test)=true"
@ -263,11 +253,15 @@ export class BasePage {
experimentsURLExtension += experiments?.isMultiLocationPopup
? ",MultiLocationPopup=MultiLocationPopup_V1=MultiLocationPopup_TEST=true"
: ",MultiLocationPopup=MultiLocationPopup_V1=MultiLocationPopup_CONTROL=true";
experimentsURLExtension += experiments?.isMsrSplitPay
? ",MSR=MSR_With_Splitpay=YesShowMSR_TEST=true"
: ",MSR=MSR_With_Splitpay=NoShowMSR_CONTROL=true";
} else {
console.log("Url extension without query string");
}
// Convert to HTML encoding before returning
return experimentsURLExtension;
return process.env.PLAYWRIGHT_ENV == 'sys' ? '' : experimentsURLExtension;
}
}

8
playwright-tests/pages/HomePage.ts
View file

@ -21,7 +21,7 @@ export class HomePage extends BasePage {
readonly viewQuoteButton: Locator;
//Zip Entry
readonly widgetZipEntryField: Locator;
readonly widgetZipEntryInputField: Locator;
readonly getQuoteAndScheduleButton: Locator;
url = process.env['BASE_URL']!;
@ -30,7 +30,7 @@ export class HomePage extends BasePage {
super(page);
this.page = page;
this.letsGetStartedButton = this.page.getByRole('button', { name: 'Let\'s get started' });
this.letsGetStartedButton = this.page.locator('a.zip-submit-button');
this.cusmodalPopup = this.page.locator('#Cusmodalpopup');
this.closePopupButton = this.page.getByRole('button', { name: '×' });
@ -46,7 +46,7 @@ export class HomePage extends BasePage {
this.viewQuoteButton = this.page.locator('#ctaSubmit');
//Zip Entry
this.widgetZipEntryField = this.page.getByRole('textbox', { name: 'Enter service ZIP code' });
this.widgetZipEntryInputField = this.page.locator('input#zipcode');
this.getQuoteAndScheduleButton = this.page.getByLabel('main').getByRole('link', { name: 'Get quote + schedule' });
}
@ -61,7 +61,7 @@ export class HomePage extends BasePage {
async letsGetStarted(zip: string, enterFunnelWithZip: boolean) {
if (enterFunnelWithZip) {
await this.widgetZipEntryField.fill(zip);
await this.widgetZipEntryInputField.fill(zip);
/* await this.letsGetStartedButton.evaluate((element, zip) => {
const currentHref = element.getAttribute('href') || '';
element.setAttribute('href', `${currentHref}?zipCode=${zip}`);

61
playwright-tests/pages/InsuranceDetailsPage.ts Normal file
View file

@ -0,0 +1,61 @@
import { type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { step } from 'framework/localTypes/Step';
import { ITestData } from 'framework/TestData';
import { ProgressBarPercentages } from 'framework/localTypes/Enums';
export class InsuranceDetailsPage extends BasePage {
readonly page: Page;
readonly insuranceCompany: Locator;
readonly policyNumber: Locator;
readonly dateOfLoss: Locator;
readonly damageCause: Locator;
readonly claimNumber: Locator; // conditional — only shown for certain insurers like Kentucky Farm Bureau
readonly streetAddress: Locator;
readonly apartment: Locator;
readonly city: Locator;
readonly policyState: Locator;
readonly policyZip: Locator;
constructor(page: Page) {
super(page);
this.page = page;
this.insuranceCompany = page.getByLabel('Insurance company');
this.policyNumber = page.getByLabel('Policy number');
this.dateOfLoss = page.getByLabel('Approximate date of loss');
this.claimNumber = page.getByLabel('Claim Number');
this.damageCause = page.getByLabel('How did the damage occur?');
this.streetAddress = page.getByLabel('Street address');
this.apartment = page.getByLabel('Apt. number (optional)');
this.city = page.getByLabel('City');
this.policyState = page.getByLabel('State');
this.policyZip = page.getByLabel('Zip');
}
private async populatePage(testData: Partial<ITestData>): Promise<void> {
const { claimDetails, customerDetails } = testData;
await this.policyNumber.fill(claimDetails!.policyNumber);
await this.dateOfLoss.fill(claimDetails!.damageDate);
await this.damageCause.selectOption(claimDetails!.damageCause);
await this.streetAddress.fill(customerDetails!.address.street);
await this.apartment.fill(customerDetails!.address.aptNumber ?? '');
await this.city.fill(customerDetails!.address.city);
await this.policyState.selectOption(customerDetails!.address.state);
await this.policyZip.fill(customerDetails!.address.postalCode);
if (await this.claimNumber.isVisible()) {
await this.claimNumber.fill(claimDetails!.claimNumber ?? '');
}
}
@step("InsuranceDetailsPage >> Fill out insurance details for non integrated insurance flow")
async handleInsuranceDetailsPage(testData: Partial<ITestData>): Promise<void> {
await this.validateProgressBar(ProgressBarPercentages.InsuranceDetailsPage);
await this.populatePage(testData);
await this.nextPage();
}
}

11
playwright-tests/pages/PaymentMethodPage.ts
View file

@ -272,9 +272,10 @@ export class PaymentMethodPage extends BasePage {
if (await this.payAtServiceButton.isVisible()) {
await this.payAtServiceButton.click();
} else if (isRecalVehicle) {
await this.recalibrationCheckbox.click();
if (await this.recalibrationCheckbox.isVisible()) {
await this.recalibrationCheckbox.click();
}
}
}
async verifyVAPS(): Promise<void> {
@ -559,8 +560,10 @@ export class PaymentMethodPage extends BasePage {
await this.validateProgressBar(ProgressBarPercentages.PaymentMethodPage);
await this.validatePaymentDetailsPage(testData);
await this.ValidateAfterPayBreakOutSection();
if (testData.isPIAEnabled) {
await this.ValidateAfterPayBreakOutSection();
}
if (isForcedOEM) {
await this.validateOEMPart(isForcedOEM);
}

4
playwright-tests/pages/PaypalPage.ts
View file

@ -47,10 +47,10 @@ export class PaypalPage extends BasePage {
await this.page.screenshot({ path: `test-results\\ortoni-data\\paypal-username-${Date.now()}.png`, fullPage: true });
await this.usernameTextBox.fill(paymentDetails!.username!);
await this.nextButton.click();
if (!experiments!.isAdyenPayments){
/*if (!experiments!.isAdyenPayments){
await this.tryAnotherWayButton.click();
await this.usePasswordInsteadButton.click();
}
}*/
await this.passwordTextBox.fill(paymentDetails!.password!);
await this.paypalLoginButton.click();
await this.payWithRadioButton.click();

15
playwright-tests/pages/SchedulePage.ts
View file

@ -80,6 +80,15 @@ export class SchedulePage extends BasePage {
async selectLocation(testData: Partial<ITestData>) {
const { appointmentDetails, customerDetails } = testData;
if (testData.isMSRGlassPart || testData.isDualRecal) {
if (testData.isMSRZip) {
expect(await this.mobileButton.isVisible()).toBe(true);
} else {
expect(await this.mobileButton.isVisible()).toBe(false);
expect(await this.yellowAlertMessage.locator('.alert-heading').filter({ hasText: ' We\'re not able to provide mobile service.' }).isVisible()).toBe(true);
}
}
switch(appointmentDetails?.serviceLocation) {
case ServiceLocation.Mobile:
await this.scheduleMobile(testData);
@ -252,6 +261,12 @@ export class SchedulePage extends BasePage {
await this.waitForPageOrComponentload();
await this.validateProgressBar(ProgressBarPercentages.SchedulePage);
//Looks like an issue with the insurance flow - remove comments once fixed
/*if (testData.isHeavyTruck) {
const vuexState = JSON.parse(await this.page.evaluate('localStorage.getItem(\'vuex\')'));
expect(vuexState.order.lineItems.supportingItems.find((item: any) => item && item.partNumber == "labor2")).toBeTruthy();
}*/
if (handleMobileFirstModal) {
return await this.handleMobileFirstPopUp(testData);
}

31
playwright-tests/pages/ServicePackagesPage.ts
View file

@ -5,6 +5,7 @@ import { ProgressBarPercentages } from 'framework/localTypes/Enums';
import { PaymentMethod } from "framework/localTypes/Enums";
import { step } from 'framework/localTypes/Step';
import { ITestData } from 'framework/TestData';
import { PaymentMethodPage } from './PaymentMethodPage';
export class ServicePackagesPage extends BasePage {
readonly page: Page;
@ -227,6 +228,32 @@ export class ServicePackagesPage extends BasePage {
}
}
async verifyGlassCashQuoteEvent() {
// Get displayed price text for Glass Only package (e.g. "$41.25in 4 interest-free payments\nor $164.99 in single payment")
const expectedGlassOnlyPrice = await this.glassOnlypackagePrice.innerText();
// Extract the single payment amount (e.g. 164.99) from the end of the string using regex
const singlePaymentRegex = /\$([\d,]+\.\d{2})\s*in single payment/;
const match = expectedGlassOnlyPrice.match(singlePaymentRegex);
if (!match) {
throw new Error(`Expected single payment price to be present in: ${expectedGlassOnlyPrice}`);
}
const expectedSinglePayAmount = parseFloat(match[1].replace(',', ''));
// Retrieve the dataLayer from the browser. (Assumes dataLayer is in global scope. Adjust if needed.)
const dataLayer = await this.page.evaluate(() => (window as any).dataLayer);
// Find the first object with a GlassCashQuote property and extract its value.
const glassCashQuote = dataLayer?.find((item: any) => item && item.GlassCashQuote)?.GlassCashQuote;
if (glassCashQuote === undefined || glassCashQuote === null) {
throw new Error("No GlassCashQuote found in dataLayer");
}
// Validate that the GlassCashQuote value matches the extracted expectedSinglePayAmount (with currency float precision)
Soft.expect(Number.parseFloat(glassCashQuote)).toBe(expectedSinglePayAmount);
}
@step("ServicePackagePage >> Select Payment Method and Service Type: ")
async handleServicePackagePage(testData: Partial<ITestData>) {
const { customerDetails, paymentMethod, paymentDetails, servicePackage, isCanNotRecal, isDynamicRecal, hasOemEndorsement, vehicleDamage, appointmentDetails, totalAmount } = testData;
@ -289,6 +316,10 @@ export class ServicePackagesPage extends BasePage {
await this.verifyVehicleParts(vehicleDamage!);
}
if (testData.paymentMethod == PaymentMethod.SelfPay) {
await this.verifyGlassCashQuoteEvent();
}
// Validate backend for OEM endorsement
if (hasOemEndorsement) {
await this.verifyOEMPart();

3
playwright-tests/playwright.config.ts
View file

@ -100,7 +100,8 @@ export default defineConfig({
headless: process.env.CI ? true : false,
screenshot: "only-on-failure",
actionTimeout: 60_000,
navigationTimeout: 60_000
navigationTimeout: 60_000,
bypassCSP: true
},
/* Configure projects for major browsers */

26
playwright-tests/tests/0000__M.test.ts
View file

@ -19,12 +19,14 @@ import { ApiResponseInterceptUtil } from 'safelite-playwright-core';
import cashReplaceGlassPromoInshopTests from "./CashReplaceGlassPromoInshop";
import cashReplaceMultiGlassPromoInshopTests from "./CashReplaceMultiGlassPromoInshop";
import cashReplaceStaticInshopTests from "./CashReplaceStaticInshop";
import cashReplaceStaticMobileMSRTests from "./CashReplaceStaticMobileMSR";
import cashReplaceRainDefensePromoInshopTests from "./CashReplaceRainDefensePromoInshop";
import cashReplaceSafeliteCanNotRecalMobileTests from "./CashReplaceSafeliteCanNotRecalMobile";
import cashReplaceVinMobileTests from "./CashReplaceVinMobile";
import cashReplaceWiperDropoffTests from "./CashReplaceWiperDropoff";
import cashReplaceWiperPromoInShopTests from "./CashReplaceWiperPromoInshop";
import insuranceAcuityPaypalTests from "./InsuranceAcuityPaypal";
// import insuranceUSAAMsrTests from "./InsuranceUSAAMsr";
import insuranceITAC21stCenturyTests from "./InsuranceITAC21stCentury";
import insuranceGeicoTests from "./InsuranceGeico";
import insuranceITACOptimizedPriceValidationAllStateTests from "./InsuranceITACOptimizedPriceValidationAllState";
@ -38,10 +40,14 @@ import cashReplaceMultiGlassMobileTests from "./CashReplaceMultiGlassMobile";
import { getTestObject, TestCase, prepareTest, RuleEngine, TestInfo } from 'framework/Typedefs';
import { createTestPages } from "framework/TestPages";
import cashReplaceSwitchToInsuranceProgressiveNoCompTests from "./CashReplaceSwitchToInsuranceProgressiveNoComp";
import insuranceBigTruckVerifiedTests from "./InsuranceBigTruckVerified";
import insuranceUSAABigTruckVerifiedTests from "./InsuranceUSAABigTruckVerified";
import partsNotFoundBailoutTests from "./PartsNotFoundBailout";
import insuranceUnverifiedTests from "./InsuranceUnverified";
import CashReplaceSplitWindshieldTests from "./CashReplaceSplitWindshield";
import insuranceMeemicNearSchoolVerifiedTests from "./InsuranceMeemicNearSchoolVerified";
import cashReplaceDualMobileMSRTests from "./CashReplaceDualMobileMSR";
import cashReplaceDualNonMSRInshopTests from "./CashReplaceDualNonMSRInshop";
const test = getTestObject();
@ -78,21 +84,25 @@ const allStandardTests = [
{ name: "CashReplaceVinMobile", tests: cashReplaceVinMobileTests },
{ name: "CashReplaceWiperDropoff", tests: cashReplaceWiperDropoffTests },
{ name: "CashReplaceStaticInshop", tests: cashReplaceStaticInshopTests },
{ name: "CashReplaceDualMobileMSR", tests: cashReplaceDualMobileMSRTests },
{ name: "CashReplaceDualNonMSRInshop", tests: cashReplaceDualNonMSRInshopTests },
{ name: "CashReplaceStaticMobileMSR", tests: cashReplaceStaticMobileMSRTests },
{ name: "CashReplaceWiperPromoInshop", tests: cashReplaceWiperPromoInShopTests },
{ name: "CashReplaceSwitchToInsuranceProgressiveNoComp", tests: cashReplaceSwitchToInsuranceProgressiveNoCompTests },
{ name: "CashReplaceMobileFirstModal", tests: cashReplaceMobileFirstModalTests },
// { name: "CashReplaceMobileFirstModal", tests: cashReplaceMobileFirstModalTests },
// TODO: Uncomment when QA is ready to run heavy truck tests
// {name: "CashReplaceSplitWindshield", tests: CashReplaceSplitWindshieldTests},
{ name: "InsuranceAcuityPaypal", tests: insuranceAcuityPaypalTests },
// { name: "InsuranceUSAAMsr", tests: insuranceUSAAMsrTests },
{ name: "InsuranceITAC21stCentury", tests: insuranceITAC21stCenturyTests },
{ name: "InsuranceNoCompProgressive", tests: insuranceNoCompProgressiveTests },
// {name: "InsuranceBigTruckVerified", tests: insuranceBigTruckVerifiedTests},
{name: "InsuranceUSAABigTruckVerified", tests: insuranceUSAABigTruckVerifiedTests},
{ name: "InsuranceOEMAllstate", tests: insuranceOEMAllstateTests },
{ name: "InsuranceUnverified", tests: insuranceUnverifiedTests },
// {name: "InsuranceGeico", tests: insuranceGeicoTests},
// {name: "InsuranceITACOptimizedPriceValidationAllState", tests: insuranceITACOptimizedPriceValidationAllStateTests}
{ name: "InsuranceMeemicNearSchoolVerified", tests: insuranceMeemicNearSchoolVerifiedTests },
// { name: "PartsNotFoundBailout", tests: partsNotFoundBailoutTests }, // code is not available in QA
];
// Alert validation scenarios
@ -266,6 +276,14 @@ async function runWorkflow(page: Page, testCase: TestCase) {
await serviceZipPage.handleServiceZipPage(testCase.testData);
}
// Handle bailout page if parts bailout scenario
if (testCase.testData.bailoutFlags?.isVehicleLookupBailout) {
let bailoutPage = testCase.pages.bailoutPage;
await bailoutPage.handleBailoutPage(testCase.testData);
let bailoutSuccessPage = testCase.pages.bailoutSuccessPage;
await bailoutSuccessPage.handleBailoutSuccessPage();
}
// Handle part questions if applicable
if (partQuestions && partQuestions.length > 0) {
let partQuestionsPage = testCase.pages.partQuestionsPage;

3
playwright-tests/tests/CashRepairInShopAfterPay.ts
View file

@ -38,7 +38,8 @@ const cashRepairInShopAfterPayData : Partial<ITestData> = {
// Experiments
experiments: {
...getDefaultExperimentsData()
...getDefaultExperimentsData(),
isAdyenPayments: true
}
}

99
playwright-tests/tests/CashReplaceDualMobileMSR.ts Normal file
View file

@ -0,0 +1,99 @@
//Imports here
import { ITestData, getDefaultExperimentsData } from 'framework/TestData'
import { ServicePackage, PaymentType, PartQuestionType, ServiceLocation } from 'safelite-playwright-core';
import { ITestCase } from '../framework/Typedefs'
import { VehicleLookupType } from 'safelite-playwright-core';
import { getDefaultTestData, setFakerSeedFromTestName } from 'safelite-playwright-core';
import { PaymentMethod } from 'framework/localTypes/Enums';
// Set the seed before generating any data
setFakerSeedFromTestName("CashReplaceDualMobileMSR");
// Now get the test data with the seeded faker
const CashReplaceDualMobileMSRData: Partial<ITestData> = {
...getDefaultTestData(), // Get default data with current seed
// CASH Client
paymentMethod: PaymentMethod.SelfPay,
// Key feature: Premium package with Rain Defense
servicePackage: ServicePackage.Standard,
// Flag for recalibration vehicle
isRecalVehicle: true,
// Override customer details
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '43085'
// postalCode: '21237'
}
},
// Override appointment details
appointmentDetails: {
serviceLocation: ServiceLocation.Mobile,
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
serviceAddress: {
// Use street address from current faker seed
street: "649 High Street",
city: 'Worthington',
state: 'OH',
postalCode: '43085', //
country: 'United States'
},
},
// override part questions
partQuestions: [
{
partQuestionType: PartQuestionType.GeneralQuestion1,
isOnPage: true,
optionToSelect: 'Yes'
}
],
// Override vehicle details
vehicleDetails: {
...getDefaultTestData().vehicleDetails!,
year: '2020',
make: 'Honda',
model: 'Pilot',
style: '4 door utility',
vehicleLookupType: VehicleLookupType.Zip
},
mockFirstInshopCallNoSchedule: true,
isMSRGlassPart: true,
isMSRZip: true,
// No need to override vehicleDamage as it already defaults to WindshieldCrack
// Payment at service
paymentDetails: {
paymentType: PaymentType.PayAtService
},
// Flag for PIA disabled
isPIAEnabled: false,
// Experiments
experiments: {
...getDefaultExperimentsData()
}
}
const cashReplaceDualMobileMSRTests: ITestCase[] = [];
const tc = {
name: `CashReplaceDualMobileMSR`,
tags: ['@E2E', '@CashReplaceDualMobileMSR', '@test_report', '@CASH'],
testData: CashReplaceDualMobileMSRData
};
cashReplaceDualMobileMSRTests.push(tc);
export default cashReplaceDualMobileMSRTests;

82
playwright-tests/tests/CashReplaceDualNonMSRInshop.ts Normal file
View file

@ -0,0 +1,82 @@
//Imports here
import { ITestData, getDefaultExperimentsData } from 'framework/TestData'
import { ServicePackage, PaymentType, PartQuestionType, ServiceLocation } from 'safelite-playwright-core';
import { ITestCase } from '../framework/Typedefs'
import { VehicleLookupType } from 'safelite-playwright-core';
import { getDefaultTestData, setFakerSeedFromTestName } from 'safelite-playwright-core';
import { PaymentMethod } from 'framework/localTypes/Enums';
// Set the seed before generating any data
setFakerSeedFromTestName("CashReplaceDualNonMSRInshop");
// Now get the test data with the seeded faker
const CashReplaceDualMobileMSRData: Partial<ITestData> = {
...getDefaultTestData(), // Get default data with current seed
// CASH Client
paymentMethod: PaymentMethod.SelfPay,
// Key feature: Premium package with Rain Defense
servicePackage: ServicePackage.Standard,
// Flag for recalibration vehicle
isRecalVehicle: true,
// Override customer details
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '43085'
// postalCode: '21237'
}
},
// override part questions
partQuestions: [
{
partQuestionType: PartQuestionType.GeneralQuestion1,
isOnPage: true,
optionToSelect: 'Yes'
}
],
// Override vehicle details
vehicleDetails: {
...getDefaultTestData().vehicleDetails!,
year: '2024',
make: 'Subaru',
model: 'Ascent',
style: '4 door utility',
vehicleLookupType: VehicleLookupType.Zip
},
mockFirstInshopCallNoSchedule: true,
isMSRGlassPart: false,
isMSRZip: true,
// Payment at service
paymentDetails: {
paymentType: PaymentType.PayAtService
},
// Flag for PIA disabled
isPIAEnabled: false,
// Experiments
experiments: {
...getDefaultExperimentsData()
}
}
const cashReplaceDualNonMSRInshopTests: ITestCase[] = [];
const tc = {
name: `CashReplaceDualNonMSRInshop`,
tags: ['@E2E', '@CashReplaceDualNonMSRInshop', '@test_report', '@CASH'],
testData: CashReplaceDualMobileMSRData
};
cashReplaceDualNonMSRInshopTests.push(tc);
export default cashReplaceDualNonMSRInshopTests;

10
playwright-tests/tests/CashReplaceGlassAddressLookupInshopAfterPay.ts
View file

@ -35,10 +35,10 @@ const cashReplaceGlassAddressLookupInshopAfterPayData: Partial<ITestData> = {
// Override vehicle details
vehicleDetails: {
...getDefaultTestData().vehicleDetails!,
year: '2013',
make: 'Hyundai',
model: 'Sonata',
style: '4 door sedan',
year: '2024',
make: 'Acura',
model: 'MDX',
style: '4 door utility',
vehicleLookupType: VehicleLookupType.Address
},
@ -48,7 +48,7 @@ const cashReplaceGlassAddressLookupInshopAfterPayData: Partial<ITestData> = {
// Experiments
experiments: {
...getDefaultExperimentsData()
}
}
}
const cashReplaceGlassAddressLookupInshopAfterPayTests: ITestCase[] = [];

18
playwright-tests/tests/CashReplaceMultiGlassPromoInshop.ts
View file

@ -35,9 +35,12 @@ const cashReplaceMultiGlassPromoInshopData: Partial<ITestData> = {
make: 'Subaru',
model: 'Outback',
style: '4 door station wagon',
vin: '4S4BSENC4K3221004',
vehicleLookupType: VehicleLookupType.Vin
// vin: '4S4BSENC4K3221004',
vehicleLookupType: VehicleLookupType.Zip
},
// Special flag to skip estimate page
isSkipEstimatePage: true,
// Key feature: multiple damaged glasses
vehicleDamage: [
@ -55,6 +58,15 @@ const cashReplaceMultiGlassPromoInshopData: Partial<ITestData> = {
// Add promo code
promoCode: '20CALL',
},
// override part questions
partQuestions: [
{
partQuestionType: PartQuestionType.GeneralQuestion1,
isOnPage: true,
optionToSelect: 'Yes'
}
],
// Vehicle part questions for multiple glass parts
vehiclePartQuestions: [
@ -62,7 +74,7 @@ const cashReplaceMultiGlassPromoInshopData: Partial<ITestData> = {
partQuestionType: PartQuestionType.WindshieldColor,
isOnPage: true,
optionToSelect: 'Green Tint, Blue Shade',
secondaryQuestionOptionToSelect: 'solar, lane departure warning system, heated glass wiper park, high beam assist, soundproofing'
secondaryQuestionOptionToSelect: 'solar, lane departure warning system, hwp, high beam assist, soundproofing'
},
{
partQuestionType: PartQuestionType.DriverFrontColor,

2
playwright-tests/tests/CashReplaceMultiSlidingGlassDropoff.ts
View file

@ -85,7 +85,7 @@ const cashReplaceMultiSlidingGlassDropoffData: Partial<ITestData> = {
partQuestionType: PartQuestionType.WindshieldColor,
isOnPage: true,
optionToSelect: 'Green Tint',
secondaryQuestionOptionToSelect: 'rain sensor, solar, soundproofing, third visor frit, lane departure warning system, heated glass wiper park, w/combination bracket'
secondaryQuestionOptionToSelect: 'rain sensor, solar, soundproofing, third visor frit, lane departure warning system, hwp, w/combination bracket'
},
{
partQuestionType: PartQuestionType.PassengerFrontColor,

41
playwright-tests/tests/CashReplaceStaticInshop.ts
View file

@ -15,19 +15,26 @@ const CashReplaceStaticInshopData: Partial<ITestData> = {
// CASH Client
paymentMethod: PaymentMethod.SelfPay,
// Key feature: Premium package with Rain Defense
servicePackage: ServicePackage.Standard,
// Flag for recalibration vehicle
isRecalVehicle: true,
// Flag for MSR Glass Part
isMSRGlassPart: true,
// Flag for MSR Zip
isMSRZip: false,
// Override customer details
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '43085'
postalCode: '55113' // Non MSR zip
// postalCode: '21237'
}
},
@ -37,34 +44,32 @@ const CashReplaceStaticInshopData: Partial<ITestData> = {
partQuestionType: PartQuestionType.GeneralQuestion1,
isOnPage: true,
optionToSelect: 'Yes'
},
{
partQuestionType: PartQuestionType.GeneralQuestion2,
isOnPage: true,
optionToSelect: 'Yes'
}
],
// Override vehicle details
vehicleDetails: {
...getDefaultTestData().vehicleDetails!,
year: '2022',
make: 'Mazda',
model: 'CX-9',
style: '4 door utility',
vin: '3FA6P0HD8LR234510',
year: '2023',
make: 'Hyundai',
model: 'Elantra',
style: '4 door sedan',
vehicleLookupType: VehicleLookupType.Zip
},
mockFirstInshopCallNoSchedule: true,
// No need to override vehicleDamage as it already defaults to WindshieldCrack
// Payment at service
paymentDetails: {
paymentType: PaymentType.PayAtService
},
// Flag for PIA disabled
isPIAEnabled: false,
// Experiments
experiments: {
...getDefaultExperimentsData()
@ -75,7 +80,7 @@ const cashReplaceStaticInshopTests: ITestCase[] = [];
const tc = {
name: `CashReplaceStaticInshop`,
tags: ['@E2E','@CashReplaceStaticInshop', '@test_report', '@CASH'],
tags: ['@E2E', '@CashReplaceStaticInshop', '@test_report', '@CASH'],
testData: CashReplaceStaticInshopData
};
cashReplaceStaticInshopTests.push(tc);

92
playwright-tests/tests/CashReplaceStaticMobileMSR.ts Normal file
View file

@ -0,0 +1,92 @@
//Imports here
import { ITestData, getDefaultExperimentsData } from 'framework/TestData'
import { ServicePackage, PaymentType, PartQuestionType, ServiceLocation } from 'safelite-playwright-core';
import { ITestCase } from '../framework/Typedefs'
import { VehicleLookupType } from 'safelite-playwright-core';
import { getDefaultTestData, setFakerSeedFromTestName } from 'safelite-playwright-core';
import { PaymentMethod } from 'framework/localTypes/Enums';
// Set the seed before generating any data
setFakerSeedFromTestName("CashReplaceStaticMobileMSR");
// Now get the test data with the seeded faker
const CashReplaceStaticMobileMSRData: Partial<ITestData> = {
...getDefaultTestData(), // Get default data with current seed
// CASH Client
paymentMethod: PaymentMethod.SelfPay,
// Key feature: Premium package with Rain Defense
servicePackage: ServicePackage.Standard,
// Flag for recalibration vehicle
isRecalVehicle: true,
// Override customer details
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '43085'
// postalCode: '21237'
}
},
// override part questions
partQuestions: [
{
partQuestionType: PartQuestionType.GeneralQuestion1,
isOnPage: true,
optionToSelect: 'Yes'
}
],
// Override vehicle details
vehicleDetails: {
...getDefaultTestData().vehicleDetails!,
year: '2023',
make: 'Hyundai',
model: 'Elantra',
style: '4 door sedan',
vin: '3FA6P0HD8LR234510',
vehicleLookupType: VehicleLookupType.Zip
},
mockFirstInshopCallNoSchedule: true,
// No need to override vehicleDamage as it already defaults to WindshieldCrack
// Override appointment details
appointmentDetails: {
serviceLocation: ServiceLocation.Mobile,
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
serviceAddress: {
// Use street address from current faker seed
street: "649 High Street",
city: 'Worthington',
state: 'OH',
postalCode: '43085', //
country: 'United States'
},
},
// Payment at service
paymentDetails: {
paymentType: PaymentType.PayAtService
},
// Experiments
experiments: {
...getDefaultExperimentsData()
}
}
const cashReplaceStaticMobileMSRTests: ITestCase[] = [];
const tc = {
name: `cashReplaceStaticMobileMSR`,
tags: ['@E2E','@cashReplaceStaticMobileMSR', '@test_report', '@CASH'],
testData: CashReplaceStaticMobileMSRData
};
cashReplaceStaticMobileMSRTests.push(tc);
export default cashReplaceStaticMobileMSRTests;

2
playwright-tests/tests/CashReplaceSwitchToInsuranceProgressiveNoComp.ts
View file

@ -37,6 +37,8 @@ const cashReplaceSwitchToInsuranceProgressiveNoCompData: Partial<ITestData> = {
style: "4 door sedan"
},
isSkipEstimatePage: true,
partQuestions: [
{
partQuestionType: PartQuestionType.GeneralQuestion1,

20
playwright-tests/tests/InsuranceBigTruckVerified.ts → playwright-tests/tests/InsuranceUSAABigTruckVerified.ts
View file

@ -1,16 +1,16 @@
//Imports here
import { ITestData, getDefaultExperimentsData } from 'framework/TestData'
import { ServiceLocation, DamageType, PaymentType, PartQuestionType } from 'safelite-playwright-core';
import { ServiceLocation, DamageType, Flow} from 'safelite-playwright-core';
import { ITestCase } from '../framework/Typedefs'
import { PaymentMethod } from "framework/localTypes/Enums";
import { VehicleLookupType } from 'safelite-playwright-core';
import { getDefaultTestData, setFakerSeedFromTestName } from 'safelite-playwright-core';
// Set the seed based on test name for consistent but unique data
setFakerSeedFromTestName("InsuranceBigTruckVerified");
setFakerSeedFromTestName("InsuranceUSAABigTruckVerified");
// Now get the test data with the seeded faker
const insuranceBigTruckVerifiedData: Partial<ITestData> = {
const insuranceUSAABigTruckVerifiedData: Partial<ITestData> = {
...getDefaultTestData(), // Get default data with current seed
// Key feature: Insurance flow with GEICO
@ -19,6 +19,8 @@ const insuranceBigTruckVerifiedData: Partial<ITestData> = {
// Insurance claim flags
isDuplicateClaim: true,
isPolicyFound: true,
flow: Flow.Managed,
isCanNotRecal: true,
isUseVehicleOnPolicy: true,
isHeavyTruck: true,
@ -62,7 +64,7 @@ const insuranceBigTruckVerifiedData: Partial<ITestData> = {
// Override for in-shop appointment
appointmentDetails: {
serviceLocation: ServiceLocation.InShop,
shopAddress: '5719 Brandt Pike, Dayton, OH 45424',
shopAddress: '3455 Centerpoint Dr, Urbancrest, OH 43123',
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate
},
@ -75,13 +77,13 @@ const insuranceBigTruckVerifiedData: Partial<ITestData> = {
}
}
const insuranceBigTruckVerifiedTests: ITestCase[] = [];
const insuranceUSAABigTruckVerifiedTests: ITestCase[] = [];
const tc = {
name: `InsuranceBigTruckVerified`,
name: `InsuranceUSAABigTruckVerified`,
tags: ['@E2E','@InsuranceBigTruckVerified', '@test_report', '@Insurance'],
testData: insuranceBigTruckVerifiedData
testData: insuranceUSAABigTruckVerifiedData
};
insuranceBigTruckVerifiedTests.push(tc);
insuranceUSAABigTruckVerifiedTests.push(tc);
export default insuranceBigTruckVerifiedTests;
export default insuranceUSAABigTruckVerifiedTests;

101
playwright-tests/tests/InsuranceUSAAMsr.ts Normal file
View file

@ -0,0 +1,101 @@
//Imports here
import { ITestData, getDefaultExperimentsData } from 'framework/TestData'
import { ServiceLocation, DamageType, PartQuestionType, VehicleDamage, PaymentType, Flow } from 'safelite-playwright-core';
import { PaymentMethod } from "framework/localTypes/Enums";
import { ITestCase } from '../framework/Typedefs'
import { VehicleLookupType } from 'safelite-playwright-core';
import { getDefaultTestData, setFakerSeedFromTestName } from 'safelite-playwright-core';
// Set the seed based on test name for consistent but unique data
setFakerSeedFromTestName("InsuranceUSAAMsr");
// Now get the test data with the seeded faker
const insuranceUSAAMsrData: Partial<ITestData> = {
...getDefaultTestData(), // Get default data with current seed
// Key feature: Insurance flow with Acuity
paymentMethod: PaymentMethod.Insurance,
// Insurance claim flags
isDuplicateClaim: true,
flow: Flow.Managed,
isUseVehicleOnPolicy: true,
// Override customer details for Kentucky location
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
street: getDefaultTestData().customerDetails!.address.street,
city: 'Cleaveland',
state: 'Ohio',
postalCode: '44125',
country: 'United States'
}
},
// Insurance claim details
claimDetails: {
client: 'USAA',
policyNumber: 'MOCK900040MSR',
policyDeductible: 100.00,
damageDate: new Date(new Date().setDate(new Date().getDate() - 1)).toLocaleDateString('en-US', {month: '2-digit', day: '2-digit', year: 'numeric'}),
damageCause: DamageType.Rock
},
// Heavy duty truck details with VIN lookup
vehicleDetails: {
...getDefaultTestData().vehicleDetails!,
year: '2023',
make: 'Hyundai',
model: 'Elantra',
style: '4 door sedan'
},
isRecalVehicle: true,
// No need to override vehicleDamage as it already defaults to WindshieldCrack
// Override for mobile service
appointmentDetails: {
serviceLocation: ServiceLocation.Mobile,
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
serviceAddress: {
// Use street address from current faker seed
street: "13300 Carpenter Rd",
city: 'Cleveland',
state: 'OH',
postalCode: '44125',
country: 'United States'
}
},
// Part questions for windshield
partQuestions: [
{
partQuestionType: PartQuestionType.GeneralQuestion1,
isOnPage: true,
optionToSelect: 'Yes'
},
],
// Override payment details (empty because we skip payment method page in insurance flow)
paymentDetails: {
paymentType: PaymentType.PayAtService
},
// Experiments
experiments: {
...getDefaultExperimentsData()
}
}
const insuranceUSAAMsrTests: ITestCase[] = [];
const tc = {
name: `InsuranceUSAAMsr`,
tags: ['@E2E','@InsuranceAcuityPaypal', '@test_report', '@Insurance', '@CASH-1187', '@CASH-848'],
testData: insuranceUSAAMsrData
};
insuranceUSAAMsrTests.push(tc);
export default insuranceUSAAMsrTests;

52
playwright-tests/tests/PartsNotFoundBailout.ts Normal file
View file

@ -0,0 +1,52 @@
import { ITestData, getDefaultExperimentsData } from 'framework/TestData';
import { VehicleDamage, VehicleLookupType } from 'safelite-playwright-core';
import { ITestCase } from '../framework/Typedefs';
import { getDefaultTestData, setFakerSeedFromTestName } from 'safelite-playwright-core';
setFakerSeedFromTestName("CashDiamondReoBailout");
const partsNotFoundBailoutTestData: Partial<ITestData> = {
...getDefaultTestData(),
isHeavyTruck: true,
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '43085'
}
},
vehicleDetails: {
...getDefaultTestData().vehicleDetails!,
year: '1974',
make: 'Diamond Reo',
model: 'CF65',
style: 'cabover',
vehicleLookupType: VehicleLookupType.Zip,
},
vehicleDamage: [
VehicleDamage.WindshieldCrack
],
bailoutFlags: {
isVehicleLookupBailout: true
},
experiments: {
...getDefaultExperimentsData()
}
};
const partsNotFoundBailoutTests: ITestCase[] = [];
const tc = {
name: `PartsNotFoundBailout`,
tags: ['@E2E', '@PartsNotFoundBailout', '@test_report', '@Bailout'],
testData: partsNotFoundBailoutTestData
};
partsNotFoundBailoutTests.push(tc);
export default partsNotFoundBailoutTests;

5
src/constants/bailout-codes.js Normal file
View file

@ -0,0 +1,5 @@
const bailoutCodes = {
PART_NOT_FOUND: 18,
};
export { bailoutCodes };

2
src/constants/endpoints.js
View file

@ -25,7 +25,7 @@ const endpoints = {
method: "GET",
},
GetDamageOptions: {
url: "/parts/api/v1/parts/damage-options",
url: "/parts/api/v2/parts/damage-options",
method: "GET",
},
LookupVehicleByYmms: {

6
src/constants/error-messages.js
View file

@ -38,6 +38,12 @@ const errorMessages = {
STYLE_REQUIRED: "Please select your vehicle style",
PROMO_REQUIRED: "Please enter a promo code",
INSURANCE_COMPANY_REQUIRED: "Please select an insurance company",
INSURANCE_COMPANY_NAME_REQUIRED: "Please enter your insurance company name",
POLICY_NUMBER_REQUIRED: "Please enter your policy number",
DATE_OF_LOSS_REQUIRED: "Please enter your date of damage",
DAMAGE_TYPES_REQUIRED: "How damage occurred is required",
ZIP_CODE_REQUIRED: "Please enter your ZIP code",
ZIP_CODE_FORMAT: "Zip must be 5 digits",
};
export { errorMessages };

4
src/constants/experiments.js
View file

@ -48,6 +48,10 @@ const experimentSettings = {
SHOW_UNVERIFIED_DEDUCT_ENTRY: "ShowUnverifiedDeducEntry",
SERVICE_PACKAGE_ORDER: "ServicePackageOrder",
USE_SCHEDULING_PAGE: "UseSchedulingPage",
// Claim and Coverage for 2.0
ENABLE_NON_CLAIM_AND_COVERAGE_FLOW: "EnableNonC&CFlow",
NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT: "NonC&CTestParentAccount",
};
const experimentTriggers = {

7
src/constants/insurance.js
View file

@ -78,3 +78,10 @@ export function coverageTypeEnum(strCoverageType) {
return null;
}
}
export const parentAccountNumbers = {
CONNECT: "560636",
};
export const NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS = [
{ name: "KentuckyFarmBureau", value: "223499" },
];

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

@ -52,6 +52,42 @@ export const pageProgressMapper = {
percent: 55,
step: 2,
},
"insurance-details": {
percent: 55,
step: 2,
},
"duplicate-check": {
percent: 55,
step: 2,
},
"policy-vehicle": {
percent: 55,
step: 2,
},
"policy-driver": {
percent: 55,
step: 2,
},
endorsements: {
percent: 55,
step: 2,
},
"policy-info-submitted": {
percent: 55,
step: 2,
},
"recalibration-info": {
percent: 55,
step: 2,
},
"coverage-statement": {
percent: 55,
step: 2,
},
"verify-details": {
percent: 55,
step: 2,
},
quote: {
percent: 60,
step: 2,

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

@ -99,6 +99,9 @@ const storeActions = {
SAVE_PAYMENT_TYPE: "savePaymentType",
SAVE_PAYMENT_METHOD_CHOICE: "savePaymentMethodChoice",
SAVE_PARENT_ACCOUNT_NUMBER: "saveParentAccountNumber",
SAVE_ACCOUNT_NAME: "saveAccountName",
SAVE_IS_CLAIM_AND_COVERAGE: "saveIsClaimAndCoverage",
SAVE_CAN_SCHEDULE_ONLINE: "saveCanScheduleOnline",
SAVE_BILL_TO_ACCOUNT_NUMBER: "saveBillToAccountNumber",
SAVE_SUPPORTING_ITEMS: "saveSupportingItems",
SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:
@ -106,6 +109,8 @@ const storeActions = {
SAVE_VAPS: "saveVaps",
SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS: "saveActiveAndOrInactivePromos",
SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
SAVE_INSURANCE_DETAILS: "saveInsuranceDetails",
SAVE_DAMAGE_DETAILS: "saveDamageDetails",
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
SAVE_CCTOKEN: "saveCCToken",
SAVE_PAYPAL_TOKEN: "savePaypalToken",
@ -118,6 +123,7 @@ const storeActions = {
CREATE_SUBMITTED_STATE: "createSubmittedState",
RESET_SUBMITTED_STATE: "resetSubmittedState",
RESET_INSURANCE_DETAILS: "resetInsuranceDetails",
ADD_DONATION_TO_SUBMITTED_STATE: "addDonationToSubmittedState",
RESET_EXTERNAL_PARAMETER_STATE: "resetExternalParameterState",
UPDATE_EXTERNAL_PARAMETER_MMS: "updateExternalParameterMMS",
@ -126,6 +132,8 @@ const storeActions = {
UPDATE_HAS_TRIGGERED_ERROR: "updateHasTriggeredError",
GET_VALID_IDEMPOTENCY_KEY: "getValidIdempotencyKey",
CORRECT_IDEMPOTENCY_KEY_EXPIRY: "correctIdempotencyKeyExpiry",
SAVE_BAILOUT_CODE: "saveBailoutCode",
};
export { storeActions };

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

@ -51,12 +51,19 @@ const storeMutations = {
UPDATE_CUSTOMER_DETAILS: "updateCustomerDetails",
UPDATE_CUSTOMER_WAITLIST_REQUESTED: "updateCustomerWaitListRequested",
// INSURANCE / DAMAGE MUTATIONS
UPDATE_INSURANCE_DETAILS: "updateInsuranceDetails",
UPDATE_DAMAGE_DETAILS: "updateDamageDetails",
// ORDER MUTATIONS
UPDATE_REFERRAL_NUMBER: "updateReferralNumber",
UPDATE_REFERRAL_SEQUENCE_NUMBER: "updateReferralSequenceNumber",
UPDATE_REFERRAL_DATE: "updateReferralDate",
UPDATE_REFERRAL_CORRELATION_ID: "updateReferralCorrelationId",
UPDATE_PARENT_ACCT_NUMBER: "updateParentAcctNumber",
UPDATE_ACCOUNT_NAME: "updateAccountName",
UPDATE_IS_CLAIM_AND_COVERAGE: "updateIsClaimAndCoverage",
UPDATE_CAN_SCHEDULE_ONLINE: "updateCanScheduleOnline",
UPDATE_BILL_TO_ACCT_NUMBER: "updateBillToAcctNumber",
UPDATE_EON: "updateEON",
UPDATE_IS_INSURANCE: "updateIsInsurance",
@ -93,6 +100,7 @@ const storeMutations = {
RESET_SERVICE_LOCATION_MOBILE_ADDRESS: "resetServiceLocationMobileAddress",
RESET_SCHEDULE: "resetSchedule",
RESET_PAYMENT_METHOD_CHOICE: "resetPaymentMethodChoice",
RESET_INSURANCE_DETAILS: "resetInsuranceDetails",
// OTHER MUTATIONS
UPDATE_PAGE_DATA: "updatePageData",
@ -107,6 +115,9 @@ const storeMutations = {
UPDATE_EXPERIMENTS: "updateExperiments",
UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry",
// BAILOUT MUTATIONS
UPDATE_BAILOUT_CODE: "updateBailoutCode",
// EXTERNAL_PARAMETER MUTATIONS
UPDATE_IS_EXTERNAL_PARAMETER: "updateIsExternalParameter",
UPDATE_EXTERNAL_PARAMETER_YEAR: "updateExternalParameterYear",

277
src/digital-components/date-picker-popup/date-picker-popup.vue Normal file
View file

@ -0,0 +1,277 @@
<template>
<div
class="date-picker-popup"
:class="[(errors && errors.length) || hasError ? 'has-error' : '']">
<label
v-if="displayQuestionText"
:for="inputId"
:aria-label="questionText"
class="form-label"
:class="[
questionAlignment === 'center' ? 'text-center w-100 mb-5' : '',
labelBold ? 'label-bold' : '',
]"
v-html="questionText"></label>
<div class="input-wrapper">
<VueDatePicker
v-model="value"
:menu-id="`${inputId}-menu`"
:input-class-name="inputClassName"
:placeholder="placeholderText"
:formats="formatsConfig"
:model-type="modelType"
:time-config="timeConfig"
:input-attrs="inputAttrs"
:disabled="isDisabled"
:min-date="minDate"
:max-date="maxDate"
:auto-apply="autoApply"
:text-input="textInput"
:prevent-min-max-navigation="preventMinMaxNavigation"
:teleport="true"
:aria-labels="{ input: questionText }"
@update:model-value="onDateChange"
@blur="onPickerClosed"
@closed="onPickerClosed" />
</div>
<div v-show="errorMessage" class="row form-test-error">
<span
class="d-inline-flex small mt-1"
aria-atomic="true"
aria-live="polite"
:class="[centerErrorMessage ? 'center-error-message' : '']">
{{ errorMessage }}
</span>
</div>
</div>
</template>
<script>
import { useField } from "vee-validate";
import { VueDatePicker } from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import { v4 as uuidv4 } from "uuid";
export default {
name: "date-picker-popup",
components: {
VueDatePicker,
},
props: {
customInputId: String,
modelValue: [String, Date, Object],
cmsWidgetName: String,
validationRules: String,
isRequired: Boolean,
isDisabled: Boolean,
hasError: Boolean,
displayQuestionText: {
type: Boolean,
default: true,
},
placeholderText: {
type: String,
default: "",
},
// Display format shown in the input
format: {
type: String,
default: "MM/dd/yyyy",
},
// Format used for the v-model value emitted to parent
modelType: {
type: String,
default: "MM/dd/yyyy",
},
enableTimePicker: {
type: Boolean,
default: false,
},
minDate: {
type: [String, Date],
default: null,
},
maxDate: {
type: [String, Date],
default: null,
},
autoApply: {
type: Boolean,
default: true,
},
clearable: {
type: Boolean,
default: true,
},
textInput: {
type: Boolean,
default: false,
},
preventMinMaxNavigation: {
type: Boolean,
default: false,
},
questionAlignment: String,
labelBold: {
type: Boolean,
default: false,
},
centerErrorMessage: Boolean,
addOptionalText: {
type: Boolean,
default: false,
},
},
emits: ["update:modelValue", "change", "blur"],
setup(props) {
const uuid = uuidv4();
const inputId = !props.customInputId ? `date-picker-${uuid}` : props.customInputId;
const initialValue = props.modelValue ?? "";
const fieldOptions = {
type: "text",
value: initialValue,
initialValue: initialValue,
};
const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
inputId,
props.validationRules,
fieldOptions
);
return {
inputId,
errorMessage,
handleBlur,
handleChange,
validate,
meta,
errors,
};
},
computed: {
questionText() {
if (!this.cmsWidgetName) return "";
const text = this.getCmsContent
? this.getCmsContent(this.cmsWidgetName, "BodyText")
: "";
return this.addOptionalText ? `${text} (optional)` : text;
},
value: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit("update:modelValue", newValue);
},
},
inputClassName() {
return [
"form-control",
(this.errors && this.errors.length) || this.hasError ? "is-invalid" : "",
]
.filter(Boolean)
.join(" ");
},
formatsConfig() {
return {
input: this.format,
preview: this.format,
};
},
timeConfig() {
return {
enableTimePicker: this.enableTimePicker,
};
},
inputAttrs() {
return {
id: this.inputId,
name: this.inputId,
clearable: this.clearable,
};
},
},
methods: {
onDateChange(newValue) {
this.handleChange(newValue);
this.$emit("change", newValue);
},
onPickerClosed() {
this.handleBlur();
// handleChange updates the field value AND triggers reactive validation,
// populating errors/errorMessage. Pass the current modelValue (may be empty).
this.handleChange(this.modelValue ?? "");
this.$emit("blur");
},
},
watch: {
modelValue(newValue) {
this.handleChange(newValue);
},
},
};
</script>
<style lang="scss">
.date-picker-popup {
label {
font-family: UrbanistSemibold;
color: $black;
}
.label-bold {
font-weight: 600;
}
.form-label {
margin-bottom: 0.25rem;
}
.center-error-message {
justify-content: center !important;
}
// Match the look-and-feel of textbox-question's input
.dp__input {
border: 1px solid $gray-500;
border-radius: 0.5rem;
min-height: 3rem;
padding: 0.75rem 1rem 0.75rem 2.5rem;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-family: inherit;
@include media-breakpoint-up(md) {
padding: 1rem 1rem 1rem 2.5rem;
min-height: 3.5rem;
}
&::placeholder {
color: $gray-500;
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
border-color: $gray-500;
}
&:hover {
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
}
&:disabled,
&.dp__disabled {
background-color: $gray-100;
}
}
&.has-error .dp__input {
border-color: $danger;
}
}
.dp__today {
background-color: #ffc966 !important;
color: $black;
}
</style>

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

@ -962,7 +962,8 @@ export default {
return this.supportingItems.find(
(lineItem) =>
lineItem.partType == partTypeStrings.MOBILE_FEE &&
lineItem.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE
(lineItem.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE ||
lineItem.partNumber == partNumberStrings.MOBILE_DUAL_RECAL_FEE)
);
},
msrFeeCartItem() {

7
src/fmg-components/funnel-footer/funnel-footer.vue
View file

@ -28,7 +28,7 @@
href="https://www.safelite.com/ccpa-privacy-policy"
target="_blank" />
</div>
<p class="mx-3 my-0 pb-1">&copy; 2025 Safelite Group</p>
<p class="mx-3 my-0 pb-1">&copy; {{ currentYear }} Safelite Group</p>
</div>
</template>
@ -40,6 +40,11 @@ export default {
components: {
textLink,
},
computed: {
currentYear() {
return new Date().getFullYear();
},
},
};
</script>

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

@ -103,7 +103,7 @@ export function getSideDoorGlassString(glassLocation, glassName) {
export function getDamageInfoWordingText(damageInfo) {
const glassTextArray = [];
damageInfo.glassToReplace.forEach((item) => {
damageInfo.glassToReplace?.forEach((item) => {
let string = "";
if (item.glassLocation === glassLocations.WINDSHIELD) {
string = item.glassLocation;

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

@ -106,6 +106,14 @@ export async function saveQuote({ pageNameToLog }) {
return;
}
export async function submitBailout({ pageNameToLog }) {
await saveSession({
pageNameToLog: pageNameToLog,
shouldAwaitSaveSessionQueue: true,
submitAfterSave: false,
});
}
// PRIVATE FUNCTIONS //
/*

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

@ -108,7 +108,9 @@ export async function getPricingByDayPartWithPrice(pageNameToLog) {
export function getMSRFeePartPrice(supportingItems, includeTax) {
let msrFeePrice = 0;
const msrFeeLineItem = supportingItems?.find(
(lineItem) => lineItem.partNumber === partNumberStrings.MOBILE_STATIC_RECAL_FEE
(lineItem) =>
lineItem.partNumber === partNumberStrings.MOBILE_STATIC_RECAL_FEE ||
lineItem.partNumber === partNumberStrings.MOBILE_DUAL_RECAL_FEE
);
if (msrFeeLineItem) {
msrFeePrice = baseMixin?.methods?.getTotalPriceOfAllLineItemsAndChildParts(

56
src/layouts/bailout-success/bailout-success.spec.js Normal file
View file

@ -0,0 +1,56 @@
// Components
import bailoutSuccess from "@/layouts/bailout-success/bailout-success.vue";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("bailout-success.vue", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
test("renders buttonMain component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "buttonMain" }).exists()).toBe(true);
});
});
function setupMocks() {
const mountOptions = getMountOptions({});
//Mock props
const mockMixin = {
methods: {
getCmsContent: jest.fn(),
},
};
mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(bailoutSuccess, mountOptions);
wrapper.vm.setCmsContent = jest.fn();
return { wrapper };
}

98
src/layouts/bailout-success/bailout-success.vue Normal file
View file

@ -0,0 +1,98 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container ymm-return">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader
class="mb-5"
cmsWidgetName="FunnelSubHeaderWidget"
:alignLeft="true" />
<buttonMain
id="btn-vehicle-not-listed"
:isPrimary="true"
:buttonText="ReturnToHomeButtonText"
loaderColor="white"
class="w-100 mb-3"
@click-event="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
import { Form } from "vee-validate";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import buttonMain from "@/ux-components/button-main/button-main";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "bailout-success",
mixins: [],
data() {
return {};
},
async beforeRouteEnter(to, from, next) {
// Clear order
await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_STATE);
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.name);
// Settle API calls in parallel before handling results.
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Hydrate page with results
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
async forwardButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK_TO_HOMEPAGE,
this.pageName
);
},
arePagePrerequisitesValid() {
return (
(store.getters.order.customer.firstName &&
store.getters.order.customer.lastName &&
store.getters.order.customer.emailAddress &&
store.getters.order.customer.phoneNumber) ||
baseMixin.methods.hasSubmittedOrder()
);
},
},
computed: {
ReturnToHomeButtonText() {
return this.getCmsContent("ReturnToHomeButtonText", "Text");
},
},
components: {
Form,
funnelHeader,
funnelSubHeader,
buttonMain,
},
};
</script>

32
src/layouts/bailout/bailout.spec.js
View file

@ -16,9 +16,41 @@ jest.mock("@/helpers/cms-content-helper", () => ({
}));
describe("bailout.vue", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("arePagePrerequisitesValid should be false ", async () => {
//Arrange
const { wrapper } = setupMocks();
//Act
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(false);
});
test("arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks();
wrapper.vm.getBailoutCodeFromStore = jest.fn().mockReturnValue("BAILOUT_CODE");
//Act
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

251
src/layouts/bailout/bailout.vue
View file

@ -1,21 +1,82 @@
<template>
<Form>
<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" />
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container ymm-return">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader
class="mb-5"
:cmsWidgetName="getSubHeaderWidget"
:alignLeft="true" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="FirstNameQuestionWidget"
v-model="firstName"
ref="firstName"
customInputId="firstName"
validationRules="first-name-required" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="LastNameQuestionWidget"
v-model="lastName"
ref="lastName"
customInputId="lastName"
validationRules="last-name-required" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="EmailQuestionWidget"
v-model="emailAddress"
inputId="email"
validationRules="email-address-required|email-address-format" />
<phoneNumberQuestion
isRequired
class="mb-4"
cmsWidgetName="PhoneNumberQuestionWidget"
v-model="phoneNumber"
validationRules="phone-number-required" />
<textboxQuestion
isRequired
v-if="!serviceZipCode"
class="mb-4"
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
ref="serviceZip"
customInputId="serviceZip"
mask="#####"
validationRules="service-zip-required|service-zip-format" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="mb-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<checkboxQuestion
class="mb-5"
cmsWidgetName="TextMeQuestionWidget"
v-model="isSmsOptIn" />
<navbar
cmsWidgetName="FunnelFooterWidget"
isForwardActionDisabled="true"
isSubmitHidden="true"
@back-clicked="backButtonAction" />
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<textBlock
class="mb-5"
cmsWidgetName="DisclaimerCopyWidget"
typeStyle="caption" />
</div>
</div>
</div>
@ -23,23 +84,64 @@
</template>
<script>
// Components
import { Form, defineRule } from "vee-validate";
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 alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
import textBlock from "@/digital-components/text-block/text-block";
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
import { routeData } from "@/router/constants/routes";
import { bailoutCodes } from "@/constants/bailout-codes";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule(
"email-address-format",
regex(
/^([a-zA-Z0-9_.+]+)@([a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*\.)+([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
);
defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
defineRule(
"service-zip-format",
regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
);
export default {
name: "bailout",
mixins: [],
data() {
return {
bailoutCode: this.getBailoutCodeFromStore(),
firstName: this.getFirstNameFromStore(),
lastName: this.getLastNameFromStore(),
emailAddress: this.getEmailAddressFromStore(),
phoneNumber: this.getPhoneNumberFromStore(),
serviceZipCode: this.getServiceZipFromStore(),
isSmsOptIn: this.getIsSmsOptInFromStore(),
displayInvalidZipAlert: false,
};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.name);
// Settle promises and get results
// Settle API calls in parallel before handling results.
const promiseResultMap = [
{
resultKey: "cmsContent",
@ -49,25 +151,124 @@ export default {
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
// Hydrate page with results
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisitesValid() {
return true;
getBailoutCodeFromStore() {
return store.getters.applicationUser.bailoutCode;
},
backButtonAction() {
getFirstNameFromStore() {
return store.getters.order.customer.firstName;
},
getLastNameFromStore() {
return store.getters.order.customer.lastName;
},
getEmailAddressFromStore() {
return store.getters.order.customer.emailAddress;
},
getPhoneNumberFromStore() {
return store.getters.order.customer.phoneNumber;
},
getServiceZipFromStore() {
return store.getters.order.serviceLocation.zipCode;
},
getIsSmsOptInFromStore() {
return store.getters.order.customer.isSmsOptIn;
},
async backButtonAction() {
this.$router.go(-1);
},
async forwardButtonAction() {
this.displayInvalidZipAlert = false;
const validateZipResponse = this.dispatchStoreActionWithLogging(
this.storeActions.VALIDATE_ZIP,
{
zip: this.serviceZipCode,
},
this.pageName
);
const saveCustomerDetailsResponse = this.dispatchStoreAction(
this.storeActions.SAVE_CUSTOMER_DETAILS,
{
firstName: this.firstName,
lastName: this.lastName,
emailAddress: this.emailAddress,
phoneNumber: this.phoneNumber,
isSmsOptIn: this.isSmsOptIn,
},
false
);
const promiseResultMap = [
{
resultKey: "validateZipResponse",
promise: validateZipResponse,
},
{
resultKey: "saveCustomerDetailsResponse",
promise: saveCustomerDetailsResponse,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const isZipValid = resultMap.validateZipResponse.isValid;
if (isZipValid) {
await this.dispatchStoreActionWithLogging(
this.storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: resultMap.validateZipResponse.state,
zipCodeCtu: resultMap.validateZipResponse.zipCodeCtu,
},
false
).then(() => {
this.$router.navigateWithPageData(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName,
{
bailoutCode: this.bailoutCode,
submit: true,
}
);
});
} else {
this.displayInvalidZipAlert = true;
return this.$refs.navbar.removeLoader();
}
},
arePagePrerequisitesValid() {
return this.getBailoutCodeFromStore() !== null;
},
},
computed: {
getSubHeaderWidget() {
switch (this.bailoutCode) {
case bailoutCodes.PART_NOT_FOUND:
return "PartsNotFoundSubHeaderWidget";
default:
return "FunnelSubHeaderWidget";
}
},
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
loadingModal,
alert,
navbar,
textBlock,
phoneNumberQuestion,
checkboxQuestion,
textboxQuestion,
},
};
</script>

92
src/layouts/coverage-statement/coverage-statement.spec.js Normal file
View file

@ -0,0 +1,92 @@
import coverageStatement from "@/layouts/coverage-statement/coverage-statement.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("coverage-statement.vue", () => {
describe("component rendering", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
});
describe("methods", () => {
test("arePagePrerequisitesValid returns true", () => {
const { wrapper } = setupMocks();
expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
});
});
});
function setupMocks() {
const mockCmsContent = {
FunnelHeaderWidget: { Text: "Header" },
FunnelSubHeaderWidget: { Text: "Subheader" },
FunnelFooterWidget: { Text: "Footer" },
};
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mountOptions = getMountOptions({
route: { name: "duplicate-check", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
store: {
getters: {
order: {
policy: {
currentDeductible: 1000,
},
lineItems: {
glassParts: [],
promos: [],
supportingItems: [],
vaps: [],
},
},
},
},
mixins: [
{
methods: {
getTotalPriceOfAllLineItemsAndChildParts: jest.fn().mockReturnValue(250),
},
},
],
});
const wrapper = shallowMount(coverageStatement, mountOptions);
return { wrapper };
}

194
src/layouts/coverage-statement/coverage-statement.vue Normal file
View file

@ -0,0 +1,194 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<div class="my-5" ref="unverified-block">
<funnelSubHeader cmsWidgetName="SubHeaderWidgetUnverified" alignLeft />
<customerInstructions
cmsWidgetName="InstructionsWidgetUnverified"
v-on="{ textLinkClicked: openModalAction }" />
</div>
<div class="my-5" ref="verified-block">
<funnelSubHeader cmsWidgetName="SubHeaderWidgetVerified" alignLeft />
<priceDisplay
cmsWidgetName="PriceWidgetVerified"
:price="deductibleAmount" />
<customerInstructions
cmsWidgetName="InstructionsWidgetVerified"
v-on="{ textLinkClicked: openModalAction }" />
<contentGroupModal ref="OemModal" cmsWidgetName="OemModalWidget" />
<afterpayBreakout
cmsWidgetName="AfterpayBreakoutWidget"
:totalAmount="cashPrice" />
</div>
<div class="my-5" ref="itac-block">
<funnelSubHeader
class="mb-4"
cmsWidgetName="SubHeaderWidgetItac"
alignLeft />
<div class="price-compare">
<priceDisplay
cmsWidgetName="DeductibleWidgetItac"
:price="deductibleAmount" />
<priceDisplay cmsWidgetName="PriceWidgetItac" :price="cashPrice" />
</div>
</div>
<div class="my-5" ref="nocomp-block">
<funnelSubHeader
class="mb-4"
cmsWidgetName="SubHeaderWidgetNocomp"
alignLeft />
<textBlock cmsWidgetName="NocompHeaderWidget" fontWeight="bold" />
<textBlock cmsWidgetName="NocompCopyWidget" />
<priceDisplay
cmsWidgetName="PriceWidgetNocomp"
:price="cashPrice"
class="my-4" />
<afterpayBreakout
cmsWidgetName="AfterpayBreakoutWidget"
:totalAmount="cashPrice" />
</div>
<saveProgressModalQuestion
modalWidgetName="SaveProgressModalWidget"
modalName="SaveProgressModal"
pageName="coverage-statement" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 { Form } from "vee-validate";
import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import customerInstructions from "./customer-instructions/customer-instructions.vue";
import priceDisplay from "./price-display/price-display.vue";
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question.vue";
import afterpayBreakout from "../payment-method/afterpay-breakout/afterpay-breakout.vue";
import modal from "@/digital-components/modal/modal";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal.vue";
import textBlock from "@/digital-components/text-block/text-block.vue";
export default {
name: "coverage-statement",
mixins: [],
data() {
return {
isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
customerInstructions,
priceDisplay,
saveProgressModalQuestion,
afterpayBreakout,
contentGroupModal,
textBlock,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
isClaimAndCoverageFromStore() {
return store.getters.order?.payment?.isClaimAndCoverage;
},
isRecalibrationOnOrderFromStore() {
return store.getters.isRecalibrationOnOrder;
},
backButtonAction() {
if (!this.isClaimAndCoverage) {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,
this.pageName
);
return;
}
if (this.isRecalibrationOnOrder) {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
this.pageName
);
return;
}
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
openModalAction(modalName) {
this.$refs[modalName]?.openModal();
},
},
computed: {
deductibleAmount() {
return this.$store.getters.order.policy.currentDeductible;
},
cashPrice() {
const lineItems = this.$store.getters.order.lineItems;
const lineItemsFlattened = [
...(lineItems?.glassParts ?? []),
...(lineItems?.promos ?? []),
...(lineItems?.supportingItems ?? []),
...(lineItems?.vaps ?? []),
];
const price = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsFlattened, false);
return price;
},
},
};
</script>
<style lang="scss">
.price-compare {
display: flex;
> :not(:last-child) {
padding-right: 1em;
margin-right: 1em;
border-right: 2px solid $gray-300;
}
}
</style>

86
src/layouts/coverage-statement/customer-instructions/customer-instructions.vue Normal file
View file

@ -0,0 +1,86 @@
<template>
<div>
<div>
<strong>
{{ headerText }}
</strong>
</div>
<div>
<ol>
<li v-for="block in instructionBlocks" :key="block">
<span v-for="token in block" :key="token">
<span v-if="doesCopyContainTextLink(token)" class="link">
<textLink
linkType="text"
:text="getRouterLinkDisplayTextFromCopy(token)"
href="#!"
@click-event="
$emit('textLinkClicked', getRouterLinkRouteFromCopy(token))
"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(token)" />
</span>
<span v-else v-html="token" class="copy"></span>
</span>
</li>
</ol>
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
import {
doesCopyContainTextLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
getExternalLink,
} from "@/helpers/cms-content-helper";
export default {
name: "customer-instructions",
data() {
return {};
},
props: {
cmsWidgetName: String,
},
methods: {
doesCopyContainTextLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
getExternalLink,
},
computed: {
headerText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
instructionBlocks() {
const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
if (!answers) {
return [];
}
const instructionBlocksRaw = answers.map((ans) => ans.Text);
const instructionBlocksAsTokens = instructionBlocksRaw.map((raw) =>
splitCopyOnCMSPlaceHolder(raw)
);
return instructionBlocksAsTokens;
},
},
components: {
textLink,
},
};
</script>
<style lang="scss" scoped>
:deep(li) {
margin-top: 0.5em;
}
</style>

53
src/layouts/coverage-statement/price-display/price-display.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<div class="mb-4">
<div>
<strong>
{{ headerText }}
</strong>
</div>
<div class="price" :class="markAsHigher ? 'red' : 'green'">
{{ priceText }}
</div>
</div>
</template>
<script>
export default {
name: "price-display",
data() {
return {};
},
props: {
cmsWidgetName: String,
price: Number,
markAsHigher: Boolean,
},
methods: {},
computed: {
headerText() {
return this.getCmsContent(this.cmsWidgetName, "Text");
},
priceText() {
const toFixed = this.price.toFixed(2);
return `$${toFixed}`;
},
},
components: {},
};
</script>
<style lang="scss">
.price {
font-size: 1.5em;
display: inline-block;
&.green {
color: $green-700;
border-bottom: 3px solid $red-800;
}
&.red {
color: $red-700;
border-bottom: 3px solid $red-800;
}
}
</style>

70
src/layouts/duplicate-check/duplicate-check.spec.js Normal file
View file

@ -0,0 +1,70 @@
import duplicateCheck from "@/layouts/duplicate-check/duplicate-check.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("duplicate-check.vue", () => {
describe("component rendering", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
});
describe("methods", () => {
test("arePagePrerequisitesValid returns true", () => {
const { wrapper } = setupMocks();
expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
});
});
});
function setupMocks() {
const mockCmsContent = {
FunnelHeaderWidget: { Text: "Header" },
FunnelSubHeaderWidget: { Text: "Subheader" },
FunnelFooterWidget: { Text: "Footer" },
};
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mountOptions = getMountOptions({
route: { name: "duplicate-check", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
const wrapper = shallowMount(duplicateCheck, mountOptions);
return { wrapper };
}

78
src/layouts/duplicate-check/duplicate-check.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<!--
... Page code goes here.
-->
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "duplicate-check",
mixins: [],
data() {
return {};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
},
};
</script>

70
src/layouts/endorsements/endorsements.spec.js Normal file
View file

@ -0,0 +1,70 @@
import endorsements from "@/layouts/endorsements/endorsements.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("endorsements.vue", () => {
describe("component rendering", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
});
describe("methods", () => {
test("arePagePrerequisitesValid returns true", () => {
const { wrapper } = setupMocks();
expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
});
});
});
function setupMocks() {
const mockCmsContent = {
FunnelHeaderWidget: { Text: "Header" },
FunnelSubHeaderWidget: { Text: "Subheader" },
FunnelFooterWidget: { Text: "Footer" },
};
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mountOptions = getMountOptions({
route: { name: "duplicate-check", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
const wrapper = shallowMount(endorsements, mountOptions);
return { wrapper };
}

78
src/layouts/endorsements/endorsements.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<!--
... Page code goes here.
-->
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "endorsements",
mixins: [],
data() {
return {};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
},
};
</script>

28
src/layouts/insurance-company/insurance-company-question.vue
View file

@ -35,7 +35,7 @@ export default {
name: "insurance-company-question",
props: {
originalList: Array,
modelValue: String,
modelValue: Object,
validationRules: String,
},
data() {
@ -44,12 +44,13 @@ export default {
};
},
computed: {
selectedAccountNumber: {
selectedAccount: {
get: function () {
return this.modelValue?.toString();
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue); // send data up to v-model on parent, s/b account number
this.selectedAccountName = newValue?.accountName;
this.$emit("update:modelValue", newValue);
},
},
searchableInsuranceCompanyList() {
@ -71,15 +72,15 @@ export default {
},
},
methods: {
getParentAccountNumber(name) {
getAccount(name) {
const matchedItems = this.searchableInsuranceCompanyList?.filter((item) => {
return item.accountName?.toString() === name.toString();
});
if (matchedItems.length > 0) {
return matchedItems[0].parentAccountNumber;
return matchedItems[0];
} else {
console.error("Error locating accountNumber");
console.error("Error locating accountNumber" + name);
return;
}
},
@ -91,7 +92,7 @@ export default {
if (matchedItems.length > 0) {
return matchedItems[0].accountName;
} else {
console.error("Error locating accountName");
console.error("Error locating accountName" + number);
return;
}
},
@ -128,19 +129,18 @@ export default {
console.error("No insurance companies found");
return;
}
if (parentAccountName) {
const parentAccountNumber = this.getParentAccountNumber(parentAccountName);
this.selectedAccountNumber = parentAccountNumber;
this.selectedAccountName = this.getParentAccountName(parentAccountNumber);
this.selectedAccount = this.getAccount(parentAccountName);
} else {
this.selectedAccountNumber = "";
this.selectedAccountName = "";
}
},
},
mounted() {
if (this.modelValue.length > 0) {
this.selectedAccountName = this.getParentAccountName(this.modelValue?.toString());
const parentAccountNumber = this.modelValue?.parentAccountNumber;
if (parentAccountNumber && parentAccountNumber.length > 0) {
this.selectedAccountName = this.getParentAccountName(parentAccountNumber.toString());
}
const select = this.selectInsuranceCompany;

111
src/layouts/insurance-company/insurance-company.vue
View file

@ -6,11 +6,10 @@
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" alignLeft />
<div v-if="originalList.length > 0">
<insurance-company-question
isRequired
v-model="parentAccountNumber"
v-model="selectedAccount"
:originalList="originalList"
validationRules="insurance-company-required" />
</div>
@ -59,6 +58,7 @@ import store from "@/store";
import { flushSaveSessionQueue } from "@/helpers/heritage-integration/order-helper";
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
import { debugLog } from "@/helpers/debug-log-helper";
defineRule("insurance-company-required", required(errorMessages.INSURANCE_COMPANY_REQUIRED));
@ -117,13 +117,18 @@ export default {
data() {
return {
parentAccountNumber: this.parentAccountNumberFromStore(),
selectedAccount: {
parentAccountNumber: this.parentAccountNumberFromStore(),
accountName: this.accountNameFromStore(),
isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
canScheduleOnline: this.canScheduleOnlineFromStore(),
},
originalList: [],
};
},
computed: {
isParentAccountNumber() {
return !!this.parentAccountNumber;
return !!this.selectedAccount.parentAccountNumber;
},
payWithCashButtonCopy() {
return this.getCmsContent("PayWithCashWidget", "Text");
@ -142,6 +147,15 @@ export default {
: "";
return accountNumber;
},
accountNameFromStore() {
return store.getters.order?.payment?.accountName;
},
isClaimAndCoverageFromStore() {
return store.getters.order?.payment?.isClaimAndCoverage;
},
canScheduleOnlineFromStore() {
return store.getters.order?.payment?.canScheduleOnline;
},
arePagePrerequisitesValid() {
return store.getters.order.payment.isInsurance === true;
},
@ -168,7 +182,25 @@ export default {
await this.dispatchStoreAction(
this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
this.parentAccountNumber.toString(),
this.selectedAccount.parentAccountNumber.toString(),
false
);
await this.dispatchStoreAction(
this.storeActions.SAVE_ACCOUNT_NAME,
this.selectedAccount.accountName,
false
);
await this.dispatchStoreAction(
this.storeActions.SAVE_IS_CLAIM_AND_COVERAGE,
this.selectedAccount.isClaimAndCoverage,
false
);
await this.dispatchStoreAction(
this.storeActions.SAVE_CAN_SCHEDULE_ONLINE,
this.selectedAccount.canScheduleOnline,
false
);
@ -187,6 +219,75 @@ export default {
//Reload page when navigate with browser back button
window.addEventListener("pageshow", this.handlePageShow);
//TODO: Where to send if can schedule online is false?
if (!this.selectedAccount.canScheduleOnline) {
debugLog(
`--- ${this.selectedAccount.parentAccountNumber} Can schedule online is false, sending to vue app Insurance Details page ---`
);
}
// hasClaimAndCoverage in experiment-mixin.js checks if the parent account number is in the experiment settings.
const isClaimAndCoverageExperimentActive = this.hasClaimAndCoverage(
this.selectedAccount.parentAccountNumber
);
// C&C experiment active for this parent account number, send to vue app Policy Info page
if (isClaimAndCoverageExperimentActive) {
debugLog(
`--- ${this.selectedAccount.parentAccountNumber} C&C experiment active for this parent account number, sending to vue app Policy Info page ---`
);
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_POLICY_INFO,
this.pageName
);
return;
}
// C&C experiment setting is false, but is a C&C client, send to heritage
if (this.selectedAccount.isClaimAndCoverage) {
debugLog(
`--- ${this.selectedAccount.parentAccountNumber} C&C experiment setting is false, but is a C&C client, sending to heritage ---`
);
navigateToHeritageFunnel({
shouldSaveSession: true,
pageNameToLog: this.pageName,
});
return;
}
// Non integrated experiment setting is true, send to new insurance details page
if (
this.hasSettingEqualTo(
experimentSettings.ENABLE_NON_CLAIM_AND_COVERAGE_FLOW,
"true"
)
) {
debugLog(
`--- ${this.selectedAccount.parentAccountNumber} Non integrated experiment setting is true, sending to vue app Insurance Details page ---`
);
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE,
this.pageName
);
return;
}
// Non integrated experiment setting is false, but a parent account is NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT experiment
// contains a specific parent account number you wish to send to the veu app insurance details page
var nonIntegratedTestParentAccount = this.getSettingValue(
experimentSettings.NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT
);
if (nonIntegratedTestParentAccount === this.selectedAccount.parentAccountNumber) {
debugLog(
`--- ${this.selectedAccount.parentAccountNumber} Non integrated experiment setting is false, but a parent account is NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT experiment contains a specific parent account number, sending to vue app Insurance Details page ---`
);
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE,
this.pageName
);
return;
}
navigateToHeritageFunnel({
shouldSaveSession: true,
pageNameToLog: "insurance-company",

326
src/layouts/insurance-details/insurance-details.vue Normal file
View file

@ -0,0 +1,326 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="mt-4 mb-5"
alignLeft />
<textboxQuestion
isRequired
isDisabled
class="mb-4 locked-input"
cmsWidgetName="InsuranceCompanyNameWidget"
v-model="insuranceCompanyName"
ref="insuranceCompanyName"
customInputId="insuranceCompanyName"
validationRules="insurance-company-name-required" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="PolicyNumberWidget"
v-model="policyNumber"
inputId="policyNumber"
placeholderText="Type your policy number"
validationRules="policy-number-required" />
<datePickerPopup
isRequired
class="mb-4"
cmsWidgetName="DateOfLossWidget"
v-model="dateOfLoss"
customInputId="dateOfLoss"
placeholderText="MM/DD/YYYY"
validationRules="date-of-loss-required"
format="MM/dd/yyyy"
modelType="MM/dd/yyyy"
:enableTimePicker="false"
:clearable="false"
:textInput="true"
:maxDate="today"
:preventMinMaxNavigation="true" />
<textboxQuestion
v-if="displayClaimNumber"
isRequired
class="mb-4"
cmsWidgetName="ClaimNumberWidget"
v-model="claimNumber"
inputId="claimNumber" />
<dropdownQuestion
isRequired
:questionText="damageTypesQuestionText"
class="mb-4"
v-model="damageCause"
cmsWidgetName="DamageTypesWidget"
customDropdownId="damageTypes"
:options="damageTypesOptions"
:valueAsKey="true"
validationRules="damage-types-required"
:labelBold="true" />
<hr class="my-4" />
<textBlock cmsWidgetName="AddressSectionWidget" class="dark" typeStyle="h5" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="StreetAddressWidget"
v-model="streetAddress"
inputId="streetAddress"
validationRules="street-address-required" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="ApartmentWidget"
v-model="apartment"
inputId="apartment" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="CityWidget"
v-model="city"
inputId="city"
validationRules="city-required" />
<dropdownQuestion
class="mb-4"
customDropdownId="policyState"
cmsWidgetName="StateQuestionWidget"
v-model="policyState"
ref="policyState"
:options="stateOptions"
validationRules="state-required"
autocomplete="address-level1"
placeHolderText="Select State"
:labelBold="true" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="ZipQuestionWidget"
v-model="policyZip"
inputId="policyZip"
maxLength="5"
validationRules="zip-code-required|zip-code-format" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import datePickerPopup from "@/digital-components/date-picker-popup/date-picker-popup";
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
import textBlock from "@/digital-components/text-block/text-block";
import { Form, defineRule } from "vee-validate";
import store from "@/store";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { stateOptions } from "@/constants/state-options";
import { regex } from "@/helpers/validation-rules";
import { NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS } from "@/constants/insurance";
// DEFINE VALIDATION RULES
defineRule(
"insurance-company-name-required",
required(errorMessages.INSURANCE_COMPANY_NAME_REQUIRED)
);
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
defineRule("damage-types-required", required(errorMessages.DAMAGE_TYPES_REQUIRED));
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_CODE_REQUIRED));
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_CODE_FORMAT));
export default {
name: "insurance-details",
mixins: [],
data() {
return {
insuranceCompanyName: this.getInsuranceCompanyNameFromStore(),
policyNumber: this.getPolicyNumberFromStore(),
dateOfLoss: this.getDateOfLossFromStore(),
damageCause: this.getDamageCauseFromStore(),
streetAddress: this.getStreetAddressFromStore(),
apartment: this.getApartmentFromStore(),
city: this.getCityFromStore(),
policyState: this.getPolicyStateFromStore(),
policyZip: this.getPolicyZipFromStore(),
claimNumber: this.getClaimNumberFromStore(),
};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
textboxQuestion,
datePickerPopup,
dropdownQuestion,
textBlock,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
today() {
return new Date();
},
displayClaimNumber() {
const order = store.getters.order;
const parent = NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS.find(
(item) => item.value === order.payment?.parentAccountNumber?.toString()
);
return !!parent;
},
stateOptions() {
return stateOptions;
},
damageCauseQuestionText() {
return this.getCmsContent("DamageTypesWidget", "QuestionText");
},
damageTypesOptions() {
const options = {};
const answers = this.getCmsContent("DamageTypesWidget", "Answers");
for (const answer of answers) {
options[answer.Name] = answer.Text;
}
return options;
},
},
methods: {
getInsuranceCompanyNameFromStore() {
return store.getters.order.policy.insuranceCompanyName;
},
getPolicyNumberFromStore() {
return store.getters.order.policy.policyNumber;
},
getDateOfLossFromStore() {
return store.getters.order.damage.dateOfLoss ?? "";
},
getDamageCauseFromStore() {
return store.getters.order.damage.damageCause ?? "";
},
getStreetAddressFromStore() {
return store.getters.order.policy.streetAddress ?? "";
},
getApartmentFromStore() {
return store.getters.order.policy.apartment ?? "";
},
getCityFromStore() {
return store.getters.order.policy.city ?? "";
},
getPolicyStateFromStore() {
return store.getters.order.policy.state ?? "";
},
getPolicyZipFromStore() {
return store.getters.order.policy.zipCode ?? "";
},
getClaimNumberFromStore() {
return store.getters.order.policy.claimNumber ?? "";
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.dispatchStoreAction(
this.storeActions.SAVE_INSURANCE_DETAILS,
{
policyNumber: this.policyNumber,
streetAddress: this.streetAddress,
apartment: this.apartment,
city: this.city,
state: this.policyState,
zipCode: this.policyZip,
claimNumber: this.claimNumber,
},
false
);
this.dispatchStoreAction(
this.storeActions.SAVE_DAMAGE_DETAILS,
{
dateOfLoss: this.dateOfLoss,
damageCause: this.damageCause,
},
false
);
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
},
};
</script>
<style lang="scss" scoped>
.locked-input {
:deep(.input-wrapper) {
&::after {
content: "";
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-.5V4.5A3.5 3.5 0 0 0 8 1zm-2 6V4.5a2 2 0 1 1 4 0V7H6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
}
.form-control {
padding-right: 2.5rem;
}
}
}
</style>

39
src/layouts/payment-adyen/payment-adyen.vue
View file

@ -35,6 +35,7 @@
:insuranceCompanyName="insuranceCompanyName"
:showInsuranceCoverageAs="showInsuranceCoverageAs"
:isMSRFeeApplicable="isMSRFeeApplicable"
:IsMSRFeeCoveredByInsurance="isMSRFeeCoveredByInsurance"
:isItac="isItac"
:isNoComp="isNoComp"
:isCollapsible="false" />
@ -77,6 +78,7 @@ import { createAdyenCheckout } from "@/helpers/adyen-helper";
import { Dropin } from "@adyen/adyen-web/auto";
import { applicationConfig } from "@/constants/application-config";
import { paymentMethods } from "@/constants/payment-method-constants";
import analyticsMixin from "@/mixins/analytics-mixin";
import "@adyen/adyen-web/styles/adyen.css";
import { mapAdyenToFmgPaymentMethod, mapFmgToAdyenPaymentMethod } from "../../helpers/adyen-helper";
@ -133,6 +135,25 @@ export default {
},
methods: {
async initializeAdyenWithErrorHandling() {
try {
await this.initializeAdyen();
} catch (error) {
console.error("Failed to initialize Adyen payment:", error);
const errorJson = JSON.stringify(error, Object.getOwnPropertyNames(Object(error)));
analyticsMixin.methods.pushFmgSessionData(errorJson);
await global.$logger.logError(errorJson);
this.$router.navigateWithoutSaving(
this.navigationScenarios.PIA_ERROR,
this.pageName
);
return;
}
},
async backButtonAction() {
// Stub, for navigating back via nav-bar.
this.$router.navigateWithoutSaving(
@ -203,6 +224,12 @@ export default {
},
onError: (error, component) => {
console.log(`Error from Adyen`);
const errorJson = JSON.stringify(
error,
Object.getOwnPropertyNames(Object(error))
);
analyticsMixin.methods.pushFmgSessionData(errorJson);
this.handleError(error);
},
},
@ -371,7 +398,12 @@ export default {
await global.$logger.logError(stringToLog);
this.hasPaymentFailureError = true;
this.$router.navigateWithoutSaving(
this.navigationScenarios.PIA_ERROR,
this.pageName
);
return;
}
this.dropinComponent?.update();
@ -560,13 +592,16 @@ export default {
isMSRFeeApplicable() {
return this.$store.getters.order.isMSRFeeApplicable;
},
isMSRFeeCoveredByInsurance() {
return this.$store.getters.order.isMSRFeeCoveredByInsurance;
},
lineItems() {
return deepClone(this.$store.getters.lineItems);
},
},
mounted() {
this.initializeAdyen();
this.initializeAdyenWithErrorHandling();
},
components: {

5
src/layouts/payment-method/payment-method.vue
View file

@ -834,11 +834,12 @@ export default {
return getBoolFromString(this.$route?.query?.piaError);
},
shouldDisplayUnverifiedInsuranceAlert() {
const shouldDisplayUnverifiedDeduct = experimentMixin.methods.hasSettingEqualTo(
const hasExperimentSetting = experimentMixin.methods.hasSettingEqualTo(
experimentSettings.SHOW_UNVERIFIED_DEDUCT_ENTRY,
"true"
);
return shouldDisplayUnverifiedDeduct;
return hasExperimentSetting && this.isInsurance;
},
// Necessary to make the watcher of lineItems work
// JavaScript does not keep a record of the old value, only a reference to it's location in the memory.

70
src/layouts/policy-driver/policy-driver.spec.js Normal file
View file

@ -0,0 +1,70 @@
import policyDriver from "@/layouts/policy-driver/policy-driver.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("policy-driver.vue", () => {
describe("component rendering", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
});
describe("methods", () => {
test("arePagePrerequisitesValid returns true", () => {
const { wrapper } = setupMocks();
expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
});
});
});
function setupMocks() {
const mockCmsContent = {
FunnelHeaderWidget: { Text: "Header" },
FunnelSubHeaderWidget: { Text: "Subheader" },
FunnelFooterWidget: { Text: "Footer" },
};
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mountOptions = getMountOptions({
route: { name: "policy-driver", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
const wrapper = shallowMount(policyDriver, mountOptions);
return { wrapper };
}

78
src/layouts/policy-driver/policy-driver.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<!--
... Page code goes here.
-->
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "policy-driver",
mixins: [],
data() {
return {};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
},
};
</script>

70
src/layouts/policy-info-submitted/policy-info-submitted.spec.js Normal file
View file

@ -0,0 +1,70 @@
import policyInfoSubmitted from "@/layouts/policy-info-submitted/policy-info-submitted.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("policy-info-submitted.vue", () => {
describe("component rendering", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
});
describe("methods", () => {
test("arePagePrerequisitesValid returns true", () => {
const { wrapper } = setupMocks();
expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
});
});
});
function setupMocks() {
const mockCmsContent = {
FunnelHeaderWidget: { Text: "Header" },
FunnelSubHeaderWidget: { Text: "Subheader" },
FunnelFooterWidget: { Text: "Footer" },
};
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mountOptions = getMountOptions({
route: { name: "policy-vehicle", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
const wrapper = shallowMount(policyInfoSubmitted, mountOptions);
return { wrapper };
}

78
src/layouts/policy-info-submitted/policy-info-submitted.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<!--
... Page code goes here.
-->
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "policy-info-submitted",
mixins: [],
data() {
return {};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
},
};
</script>

12
src/layouts/policy-info/policy-info.vue
View file

@ -58,11 +58,17 @@ export default {
},
methods: {
async backButtonAction() {
// Stub, for navigating back via nav-bar.
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
// Stub, for navigating forward via nav-bar
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;

83
src/layouts/policy-vehicle/policy-vehicle.spec.js Normal file
View file

@ -0,0 +1,83 @@
import policyVehicle from "@/layouts/policy-vehicle/policy-vehicle.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("policy-vehicle.vue", () => {
describe("component rendering", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
});
describe("methods", () => {
test("arePagePrerequisitesValid returns true", () => {
const { wrapper } = setupMocks();
expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
});
});
});
function setupMocks() {
const mockCmsContent = {
FunnelHeaderWidget: { Text: "Header" },
FunnelSubHeaderWidget: { Text: "Subheader" },
FunnelFooterWidget: { Text: "Footer" },
VehicleNotListedWidget: { Text: "Vehicle Not Listed" },
CancelVerificationWidget: { Text: "Cancel Verification" },
AmFamDisclaimerWidget: { Text: "Disclaimer" },
};
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const getCmsContentMock = jest.fn().mockImplementation((widgetName, cmsFieldName) => {
return mockCmsContent[widgetName][cmsFieldName];
});
const mountOptions = getMountOptions({
route: { name: "policy-vehicle", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
mountOptions.global = mountOptions.global || {};
mountOptions.global.mocks = {
...(mountOptions.global.mocks || {}),
getCmsContent: getCmsContentMock,
};
const wrapper = shallowMount(policyVehicle, mountOptions);
return { wrapper, getCmsContentMock };
}

134
src/layouts/policy-vehicle/policy-vehicle.vue Normal file
View file

@ -0,0 +1,134 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
<buttonMain
id="btn-vehicle-not-listed"
:buttonText="vehicleNotListedQuestionText"
:suppressLoader="true"
class="mb-3"
@click-event="forwardButtonAction" />
<textLink
class="pt-3"
useLoadingModal
linkType="text"
href="javascript:void(0)"
:text="cancelVerificationCopy"
@click-event="cancelVerificationAction" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<div v-if="showAmFamDisclaimer" v-html="amFamDisclaimerWidget"></div>
</div>
</div>
</div>
</Form>
</template>
<script>
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 store from "@/store";
import buttonMain from "@/ux-components/button-main/button-main";
import textLink from "@/ux-components/text-link/text-link.vue";
import { parentAccountNumbers } from "@/constants/insurance";
import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "policy-vehicle",
mixins: [],
data() {
return {};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
textLink,
buttonMain,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
vehicleNotListedQuestionText() {
return this.getCmsContent("VehicleNotListedWidget", "Text");
},
cancelVerificationCopy() {
return this.getCmsContent("CancelVerificationWidget", "Text");
},
amFamDisclaimerWidget() {
return this.getCmsContent("AmFamDisclaimerWidget", "Text");
},
showAmFamDisclaimer() {
return this.parentAccountNumberFromStore() === this.parentAccountNumbers.CONNECT;
},
parentAccountNumbers() {
return parentAccountNumbers;
},
},
methods: {
parentAccountNumberFromStore() {
return store.getters.order?.payment?.parentAccountNumber;
},
cancelVerificationAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
},
};
</script>
<style lang="scss" scoped>
#btn-vehicle-not-listed {
background-color: $blue;
color: $white;
}
</style>

8
src/layouts/quote/quote.vue
View file

@ -794,6 +794,14 @@ export default {
applicationConfig.CASH_DEFAULT_BILL_TO_ACCOUNT_NUMBER,
false
);
this.dispatchStoreAction(
this.storeActions.SAVE_IS_CLAIM_AND_COVERAGE,
false,
false
);
this.dispatchStoreAction(this.storeActions.RESET_INSURANCE_DETAILS, false, false);
this.dispatchStoreAction(this.storeActions.SAVE_CAN_SCHEDULE_ONLINE, false, false);
this.dispatchStoreAction(this.storeActions.SAVE_ACCOUNT_NAME, null, false);
} else {
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PARENT_ACCOUNT_NUMBER,

70
src/layouts/recalibration-info/recalibration-info.spec.js Normal file
View file

@ -0,0 +1,70 @@
import recalibrationInfo from "@/layouts/recalibration-info/recalibration-info.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("recalibration-info.vue", () => {
describe("component rendering", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
});
describe("methods", () => {
test("arePagePrerequisitesValid returns true", () => {
const { wrapper } = setupMocks();
expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
});
});
});
function setupMocks() {
const mockCmsContent = {
FunnelHeaderWidget: { Text: "Header" },
FunnelSubHeaderWidget: { Text: "Subheader" },
FunnelFooterWidget: { Text: "Footer" },
};
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mountOptions = getMountOptions({
route: { name: "policy-vehicle", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
const wrapper = shallowMount(recalibrationInfo, mountOptions);
return { wrapper };
}

78
src/layouts/recalibration-info/recalibration-info.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<!--
... Page code goes here.
-->
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "recalibration-info",
mixins: [],
data() {
return {};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
},
};
</script>

8
src/layouts/return-user/return-user.vue
View file

@ -47,6 +47,7 @@ import { Form } from "vee-validate";
import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
import { storeActions } from "@/constants/store-actions";
import baseMixin from "@/mixins/base-mixin";
export default {
name: "return-user",
@ -74,6 +75,13 @@ export default {
startOverImage: null,
};
},
mounted() {
// The global baseMixin.mounted() skips hiding the loading modal when
// external-parameter state is active, but those parameters have no
// consumer on this interstitial. Clear that state and ensure the loader
// is hidden so the user can never get stuck behind it on this page.
baseMixin.methods.ResetExternalParamsAndHideModal();
},
methods: {
arePagePrerequisitesValid() {
return getFunnelCookie() !== null;

9
src/layouts/schedule/schedule.vue
View file

@ -706,10 +706,16 @@ export default {
isMobileStaticRecalibrationApplicable() {
return (
this.displayMSR &&
this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
this.isMSRFeePartNumber &&
(this.enableMSRSplitPay || this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
);
},
isMSRFeePartNumber() {
return (
this.mobileFeePart?.partNumber === partNumberStrings.MOBILE_STATIC_RECAL_FEE ||
this.mobileFeePart?.partNumber === partNumberStrings.MOBILE_DUAL_RECAL_FEE
);
},
displayMSR() {
return (
experimentMixin.methods
@ -1228,6 +1234,7 @@ export default {
supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
supportingItems[mobileFeeIndex].isInsurable = this.mobileFeePart.isInsurable;
} else {
if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
}

70
src/layouts/verify-details/verify-details.spec.js Normal file
View file

@ -0,0 +1,70 @@
import verifyDetails from "@/layouts/verify-details/verify-details.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("verify-details.vue", () => {
describe("component rendering", () => {
test("renders funnelHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
});
test("renders funnelSubHeader component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
});
});
describe("methods", () => {
test("arePagePrerequisitesValid returns true", () => {
const { wrapper } = setupMocks();
expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
});
});
});
function setupMocks() {
const mockCmsContent = {
FunnelHeaderWidget: { Text: "Header" },
FunnelSubHeaderWidget: { Text: "Subheader" },
FunnelFooterWidget: { Text: "Footer" },
};
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mountOptions = getMountOptions({
route: { name: "policy-vehicle", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
const wrapper = shallowMount(verifyDetails, mountOptions);
return { wrapper };
}

78
src/layouts/verify-details/verify-details.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<!--
... Page code goes here.
-->
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "verify-details",
mixins: [],
data() {
return {};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
arePagePrerequisitesValid() {
return true;
},
},
};
</script>

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

@ -160,12 +160,16 @@ export default {
// and aws FireHose stream, DigitalConsumer-Session-Firehose, to push data to an
// S3 bucket, safelite-dev-digitalconsumer-session-data-us-east-2/1.
// This bucket data is then picked up by snowflake for analytics use.
async pushFmgSessionData() {
async pushFmgSessionData(errorJson = null) {
var currentPageName = getPageNameFromRouter(true);
if (!currentPageName) {
return;
}
if (errorJson) {
currentPageName += ` ERROR: ${errorJson}`;
}
const hasSubmittedOrder = baseMixin.methods.hasSubmittedOrder();
const submittedOrder = baseMixin.methods.getSubmittedOrder();
const order = hasSubmittedOrder ? submittedOrder : store.getters.order;
@ -209,6 +213,7 @@ export default {
var appointment = `${order?.schedule?.date ?? ""} ${order?.schedule?.startTime ?? ""}`;
var sessionData = {};
sessionData.currentPage = currentPageName;
sessionData.sid = getSessionIdValue();
sessionData.deviceId = getDeviceIdValue();
@ -349,6 +354,12 @@ export default {
payload.vehicleStyle = "";
}
if (isDefined(order.vehicle.carId)) {
payload.carId = order.vehicle.carId;
} else {
payload.carId = "";
}
// Glass pieces
const glass = order.damage.glassToReplace ?? [];
if (glass.length === 0) {
@ -931,6 +942,11 @@ function getPageNameFromRouter(useDefaultUrl = false) {
router.currentRoute.value &&
router.currentRoute.value.name
) {
const query = router.currentRoute.value.query;
if (query && Object.keys(query).length > 0 && useDefaultUrl === true) {
const queryString = new URLSearchParams(query).toString();
return `${router.currentRoute.value.name}?${queryString}`;
}
return router.currentRoute.value.name;
}

13
src/mixins/bailout-mixin.js Normal file
View file

@ -0,0 +1,13 @@
import { navigationScenarios } from "@/router/constants/navigation-scenarios";
export default {
methods: {
navigateToBailoutPage(vm, bailoutCode) {
const self = vm ?? this;
self.dispatchStoreAction(self.storeActions.SAVE_BAILOUT_CODE, bailoutCode).then(() => {
self.$router.navigateWithoutSaving(navigationScenarios.BAILOUT, self.pageName);
});
},
},
};

103
src/mixins/bailout-mixin.spec.js Normal file
View file

@ -0,0 +1,103 @@
import bailoutMixin from "@/mixins/bailout-mixin";
import { storeActions } from "@/constants/store-actions.js";
import { navigationScenarios } from "@/router/constants/navigation-scenarios";
import { bailoutCodes } from "@/constants/bailout-codes.js";
describe("bailout-mixin.js", () => {
test("navigateToBailoutPage: dispatches SAVE_BAILOUT_CODE action with bailout code", async () => {
// Arrange
const mockVm = createMockVm();
const bailoutCode = bailoutCodes.PART_NOT_FOUND;
// Act
await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);
// Assert
expect(mockVm.dispatchStoreAction).toHaveBeenCalledWith(
storeActions.SAVE_BAILOUT_CODE,
bailoutCode
);
});
test("navigateToBailoutPage: navigates to bailout page after saving bailout code", async () => {
// Arrange
const mockVm = createMockVm();
const bailoutCode = bailoutCodes.PART_NOT_FOUND;
// Act
await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);
// Assert
expect(mockVm.$router.navigateWithoutSaving).toHaveBeenCalledWith(
navigationScenarios.BAILOUT,
mockVm.pageName
);
});
test("navigateToBailoutPage: uses current context (this) when vm is not provided", async () => {
// Arrange
const mockRouter = {
navigateWithoutSaving: jest.fn().mockResolvedValue(undefined),
};
const mockThis = {
dispatchStoreAction: jest.fn().mockResolvedValue(undefined),
$router: mockRouter,
storeActions: storeActions,
pageName: "test-page",
};
const bailoutCode = bailoutCodes.PART_NOT_FOUND;
// Act
await bailoutMixin.methods.navigateToBailoutPage.call(mockThis, undefined, bailoutCode);
// Assert
expect(mockThis.dispatchStoreAction).toHaveBeenCalledWith(
storeActions.SAVE_BAILOUT_CODE,
bailoutCode
);
});
test("navigateToBailoutPage: passes correct bailout code to store", async () => {
// Arrange
const mockVm = createMockVm();
const customBailoutCode = 999;
// Act
await bailoutMixin.methods.navigateToBailoutPage(mockVm, customBailoutCode);
// Assert
expect(mockVm.dispatchStoreAction).toHaveBeenCalledWith(
storeActions.SAVE_BAILOUT_CODE,
customBailoutCode
);
});
test("navigateToBailoutPage: calls navigateWithoutSaving with correct parameters", async () => {
// Arrange
const mockVm = createMockVm();
const mockPageName = "vehicle-damage";
mockVm.pageName = mockPageName;
const bailoutCode = bailoutCodes.PART_NOT_FOUND;
// Act
await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);
// Assert
expect(mockVm.$router.navigateWithoutSaving).toHaveBeenCalledWith(
navigationScenarios.BAILOUT,
mockPageName
);
});
});
function createMockVm() {
return {
dispatchStoreAction: jest.fn().mockResolvedValue(undefined),
$router: {
navigateWithoutSaving: jest.fn().mockResolvedValue(undefined),
},
storeActions,
pageName: "test-page",
};
}

20
src/mixins/experiment-mixin.js
View file

@ -1,5 +1,6 @@
import store from "@/store";
import * as experimentHelper from "../helpers/experiment-helper";
import { experimentSettings } from "@/constants/experiments";
/*
This is a wrapper around experiment-helper.js methods that allows an override
@ -32,5 +33,24 @@ export default {
experimentHelper.getExperimentSettingsFromExperimentList(experimentList);
return experimentHelper.getSettingValue(settingName, experimentSettings);
},
// Looks for an experiment setting that has a value that matches the passed in parent account number.
// Settings named NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT are excluded from the match.
hasClaimAndCoverage(
parentAccountNumber,
experimentList = store.getters.applicationUser.experiments
) {
const parentNum = String(parentAccountNumber);
return experimentList.some(
(experiment) =>
experiment.settings &&
Object.entries(experiment.settings).some(
([name, value]) =>
name !==
experimentSettings.NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT &&
value === parentNum
)
);
},
},
};

7
src/mixins/vin-pages-mixin.js
View file

@ -1,9 +1,11 @@
import { storeActions } from "@/constants/store-actions.js";
import store from "@/store";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import bailoutMixin from "@/mixins/bailout-mixin";
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
import { experimentSettings } from "@/constants/experiments";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
import { bailoutCodes } from "@/constants/bailout-codes";
export default {
computed: {
@ -34,6 +36,11 @@ export default {
const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS, {
pageNameToLog: pageName,
});
if (result.PartNotFound) {
bailoutMixin.methods.navigateToBailoutPage(this, bailoutCodes.PART_NOT_FOUND);
}
const partsOrQuestions = result.data.partsOrQuestions;
vehicleQuestionsMixin.methods.navigateForward(partsOrQuestions, this);

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

@ -12,6 +12,12 @@ const navigationScenarios = {
CLICKED_FORWARD: "CLICKED_FORWARD",
CLICKED_FORWARD_WITH_CASH: "CLICKED_FORWARD_WITH_CASH",
CLICKED_FORWARD_WITH_INSURANCE: "CLICKED_FORWARD_WITH_INSURANCE",
CLICKED_CANCEL_VERIFICATION: "CLICKED_CANCEL_VERIFICATION",
// Bailout
BAILOUT: "BAILOUT",
BAILOUT_SUCCESS: "BAILOUT_SUCCESS",
CLICKED_BACK_TO_HOMEPAGE: "CLICKED_BACK_TO_HOMEPAGE",
// TODO: use virtual page?
// Vin selection
@ -39,6 +45,8 @@ const navigationScenarios = {
CLICKED_FORWARD_WITH_MOLDING_QUESTIONS: "CLICKED_FORWARD_WITH_MOLDING_QUESTIONS",
CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS: "CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS",
CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS: "CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS",
CLICKED_BACK_NON_CLAIM_AND_COVERAGE: "CLICKED_BACK_NON_CLAIM_AND_COVERAGE",
CLICKED_BACK_RECALIBRATION_INFO: "CLICKED_BACK_RECALIBRATION_INFO",
CLICKED_BACK_WITH_PART_QUESTIONS: "CLICKED_BACK_WITH_PART_QUESTIONS",
CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE: "CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE",
CLICKED_BACK_WITH_MOLDING_QUESTIONS: "CLICKED_BACK_WITH_MOLDING_QUESTIONS",
@ -48,6 +56,8 @@ const navigationScenarios = {
// Insurance-Company
CLICKED_PAY_ON_MY_OWN: "CLICKED_PAY_ON_MY_OWN",
CLICKED_FORWARD_POLICY_INFO: "CLICKED_FORWARD_POLICY_INFO",
CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE: "CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE",
//Service-Location
CLICKED_FORWARD_WITH_MOBILE_SERVICE: "CLICKED_FORWARD_WITH_MOBILE_SERVICE",

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

@ -55,6 +55,42 @@ export const routeData = {
name: "policy-info",
path: "/policy-info",
},
INSURANCE_DETAILS: {
name: "insurance-details",
path: "/insurance-details",
},
DUPLICATE_CHECK: {
name: "duplicate-check",
path: "/duplicate-check",
},
POLICY_VEHICLE: {
name: "policy-vehicle",
path: "/policy-vehicle",
},
POLICY_DRIVER: {
name: "policy-driver",
path: "/policy-driver",
},
ENDORSEMENTS: {
name: "endorsements",
path: "/endorsements",
},
POLICY_INFO_SUBMITTED: {
name: "policy-info-submitted",
path: "/policy-info-submitted",
},
RECALIBRATION_INFO: {
name: "recalibration-info",
path: "/recalibration-info",
},
COVERAGE_STATEMENT: {
name: "coverage-statement",
path: "/coverage-statement",
},
VERIFY_DETAILS: {
name: "verify-details",
path: "/verify-details",
},
INSURANCE_COMPANY: {
name: "insurance-company",
path: "/insurance-company",
@ -139,6 +175,14 @@ export const routeData = {
path: "/virtual/restart",
virtual: true,
},
BAILOUT: {
name: "bailout",
path: "/bailout",
},
BAILOUT_SUCCESS: {
name: "bailout-success",
path: "/bailout-success",
},
};
export const FUNNEL_START_PAGE = routeData.VEHICLE;

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

@ -1,5 +1,6 @@
import { routeData } from "@/router/constants/routes";
import { navigationScenarios } from "@/router/constants/navigation-scenarios";
import { FUNNEL_START_PAGE } from "@/router/constants/routes";
import store from "@/store";
import { paymentMethods } from "@/constants/payment-method-constants";
@ -88,6 +89,10 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_VIN_RETRY,
destinationPageData: routeData.ESTIMATE,
},
{
scenario: navigationScenarios.BAILOUT,
destinationPageData: routeData.BAILOUT,
},
],
},
{
@ -128,6 +133,10 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_VIN_RETRY,
destinationPageData: routeData.ESTIMATE,
},
{
scenario: navigationScenarios.BAILOUT,
destinationPageData: routeData.BAILOUT,
},
],
},
{
@ -274,6 +283,10 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
destinationPageData: routeData.QUOTE,
},
{
scenario: navigationScenarios.BAILOUT,
destinationPageData: routeData.BAILOUT,
},
],
},
{
@ -431,7 +444,145 @@ const routingTable = function () {
},
{
pageName: routeData.POLICY_INFO.name,
maps: [],
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.INSURANCE_COMPANY,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.DUPLICATE_CHECK,
},
],
},
{
pageName: routeData.INSURANCE_DETAILS.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.INSURANCE_COMPANY,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.COVERAGE_STATEMENT,
},
],
},
{
pageName: routeData.DUPLICATE_CHECK.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.POLICY_VEHICLE,
},
],
},
{
pageName: routeData.POLICY_VEHICLE.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.DUPLICATE_CHECK,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.POLICY_DRIVER,
},
{
scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
destinationPageData: routeData.INSURANCE_COMPANY,
},
],
},
{
pageName: routeData.POLICY_DRIVER.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_VEHICLE,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.ENDORSEMENTS,
},
],
},
{
pageName: routeData.ENDORSEMENTS.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_DRIVER,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.POLICY_INFO_SUBMITTED,
},
],
},
{
pageName: routeData.POLICY_INFO_SUBMITTED.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.ENDORSEMENTS,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.RECALIBRATION_INFO,
},
],
},
{
pageName: routeData.RECALIBRATION_INFO.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_INFO_SUBMITTED,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.COVERAGE_STATEMENT,
},
],
},
{
pageName: routeData.COVERAGE_STATEMENT.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_INFO_SUBMITTED,
},
{
scenario: navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
destinationPageData: routeData.RECALIBRATION_INFO,
},
{
scenario: navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,
destinationPageData: routeData.INSURANCE_DETAILS,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.SCHEDULE,
},
],
},
{
pageName: routeData.VERIFY_DETAILS.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.DUPLICATE_CHECK,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.POLICY_INFO_SUBMITTED,
},
],
},
{
pageName: routeData.INSURANCE_COMPANY.name,
@ -451,6 +602,14 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.INSURANCE_DETAILS,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_POLICY_INFO,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE,
destinationPageData: routeData.INSURANCE_DETAILS,
},
],
},
// TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
@ -681,6 +840,24 @@ const routingTable = function () {
},
],
},
{
pageName: routeData.BAILOUT.name,
maps: [
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.BAILOUT_SUCCESS,
},
],
},
{
pageName: routeData.BAILOUT_SUCCESS.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK_TO_HOMEPAGE,
destinationPageData: FUNNEL_START_PAGE,
},
],
},
];
};

30
src/router/methods/before-each.js
View file

@ -76,14 +76,27 @@ export async function beforeEach(to, from) {
}
// Block navigation if an order has been submitted.
if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
const exceptionPages = [FUNNEL_START_PAGE.name, routeData.CONFIRMATION.name];
const submittedState = window.sessionStorage.getItem(
sessionStorageKeyConstants.SUBMITTED_STATE
);
if (submittedState !== null) {
const isBailout = getIsBailout(submittedState);
const exceptionPages = isBailout
? [FUNNEL_START_PAGE.name, routeData.BAILOUT_SUCCESS.name]
: [FUNNEL_START_PAGE.name, routeData.CONFIRMATION.name];
if (!exceptionPages.some((name) => to.name === name) && !isVirtualRoute(to.name)) {
router.push({
name: routeData.CONFIRMATION.name,
});
return false;
if (isBailout) {
router.push({
name: routeData.BAILOUT_SUCCESS.name,
});
return false;
} else {
router.push({
name: routeData.CONFIRMATION.name,
});
return false;
}
}
}
@ -142,3 +155,8 @@ export async function beforeEach(to, from) {
return;
}
}
function getIsBailout(submittedState) {
const submittedStateObj = JSON.parse(submittedState);
return !!submittedStateObj?.applicationUser?.bailoutCode;
}

20
src/router/methods/navigate.js
View file

@ -1,7 +1,8 @@
import { saveSession } from "@/helpers/heritage-integration/order-helper";
import { saveSession, submitBailout } from "@/helpers/heritage-integration/order-helper";
import { buildManualUrl } from "@/router/methods/helpers/build-manual-url";
import { getDestination } from "@/router/methods/helpers/get-destination";
import { savePageData } from "@/router/methods/helpers/save-page-data";
import { navigationScenarios } from "@/router/constants/navigation-scenarios";
import router from "@/router";
import store from "@/store";
@ -39,7 +40,14 @@ async function navigate(scenario, currentPageName, withSaving = false, forceTopL
store.getters?.applicationUser?.savedSessionId ||
store.getters?.order?.customer?.emailAddress
) {
await saveSession({ pageNameToLog: nextPage.name });
if (
scenario.toUpperCase() === navigationScenarios.CLICKED_FORWARD &&
currentPageName.toUpperCase() === navigationScenarios.BAILOUT
) {
await submitBailout({ pageNameToLog: nextPage.name });
} else {
await saveSession({ pageNameToLog: nextPage.name });
}
}
}
@ -70,7 +78,13 @@ export async function navigateWithSaving(scenario, currentPageName) {
export async function navigateWithPageData(scenario, currentPageName, pageData = {}) {
const nextPage = getDestination(currentPageName, scenario);
await savePageData(nextPage.name, pageData);
if (pageData && pageData.bailoutCode) {
pageData.AppName = "FixMyGlass";
await savePageData(currentPageName, pageData);
} else {
await savePageData(nextPage.name, pageData);
}
return await navigate(scenario, currentPageName, true);
}

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

@ -44,7 +44,17 @@ export const routes = [
createRoute(routeData.RETURN_USER),
createRoute(routeData.MOBILE_DETAILS),
createRoute(routeData.POLICY_INFO),
createRoute(routeData.INSURANCE_DETAILS),
createRoute(routeData.DUPLICATE_CHECK),
createRoute(routeData.POLICY_VEHICLE),
createRoute(routeData.POLICY_DRIVER),
createRoute(routeData.ENDORSEMENTS),
createRoute(routeData.POLICY_INFO_SUBMITTED),
createRoute(routeData.RECALIBRATION_INFO),
createRoute(routeData.COVERAGE_STATEMENT),
createRoute(routeData.VERIFY_DETAILS),
createRoute(routeData.BAILOUT),
createRoute(routeData.BAILOUT_SUCCESS),
// Virtual pages (resolve to a non-virtual page.)
createVirtualRoute(routeData.LANDING, landingBeforeEnter),
createVirtualRoute(routeData.HERITAGE, heritageBeforeEnter),

183
src/store/index.js
View file

@ -142,6 +142,9 @@ const getDefaultState = () => {
coverageVerificationType: null,
},
parentAccountNumber: 0,
accountName: null,
isClaimAndCoverage: false,
canScheduleOnline: false,
billToAccountNumber: null,
isPia: null,
piaType: null,
@ -167,10 +170,16 @@ const getDefaultState = () => {
currentDeductible: 0,
originalDeductible: 0,
policyNumber: null,
claimNumber: null,
isItac: false,
additionalAuthFlag: null,
isNoComp: false,
insuranceCompanyName: null,
streetAddress: null,
apartment: null,
city: null,
state: null,
zipCode: null,
},
schedule: {
date: null,
@ -208,6 +217,7 @@ const getDefaultState = () => {
affiliateCookies: [],
loggingOption: false,
hasAlreadyTriggeredError: false,
bailoutCode: null,
},
idempotencyKeyFields: {
referralCorrelationId: null,
@ -328,6 +338,34 @@ export const mutations = {
updateParentAcctNumber(state, parentAcctNumber) {
state.order.payment.parentAccountNumber = parentAcctNumber;
},
updateAccountName(state, accountName) {
state.order.payment.accountName = accountName;
state.order.policy.insuranceCompanyName = accountName;
},
updateStreetAddress(state, streetAddress) {
state.order.policy.streetAddress = streetAddress;
},
updateApartment(state, apartment) {
state.order.policy.apartment = apartment;
},
updateCity(state, city) {
state.order.policy.city = city;
},
updateState(state, stateValue) {
state.order.policy.state = stateValue;
},
updateZipCode(state, zipCode) {
state.order.policy.zipCode = zipCode;
},
updateClaimNumber(state, claimNumber) {
state.order.policy.claimNumber = claimNumber;
},
updateIsClaimAndCoverage(state, isClaimAndCoverage) {
state.order.payment.isClaimAndCoverage = isClaimAndCoverage;
},
updateCanScheduleOnline(state, canScheduleOnline) {
state.order.payment.canScheduleOnline = canScheduleOnline;
},
updateBillToAcctNumber(state, billToAcctNumber) {
state.order.payment.billToAccountNumber = billToAcctNumber;
},
@ -337,6 +375,26 @@ export const mutations = {
updateIsInsurance(state, isInsurance) {
state.order.payment.isInsurance = isInsurance;
},
resetInsuranceDetails(state) {
state.order.payment.insuranceCoverage = {
isVerified: null,
coverageStatus: null,
coverageSubStatus: null,
coverageType: null,
coverageVerificationType: null,
};
state.order.policy.policyNumber = null;
state.order.policy.claimNumber = null;
state.order.policy.insuranceCompanyName = null;
state.order.policy.streetAddress = null;
state.order.policy.apartment = null;
state.order.policy.city = null;
state.order.policy.state = null;
state.order.policy.zipCode = null;
state.order.damage.dateOfLoss = null;
state.order.damage.damageCause = null;
},
updateIsPia(state, isPia) {
state.order.payment.isPia = isPia;
},
@ -429,9 +487,11 @@ export const mutations = {
state.order.vehicle.registration.licensePlate = registrationInfo?.licensePlate;
},
updateServiceZip(state, serviceZipInfo) {
state.order.serviceLocation.state = serviceZipInfo.state;
state.order.serviceLocation.zipCode = serviceZipInfo.zipCode;
state.order.serviceLocation.zipCodeCtu = serviceZipInfo.zipCodeCtu;
state.order.serviceLocation.state = serviceZipInfo.state || serviceZipInfo.payload?.state;
state.order.serviceLocation.zipCode =
serviceZipInfo.zipCode || serviceZipInfo.payload?.zipCode;
state.order.serviceLocation.zipCodeCtu =
serviceZipInfo.zipCodeCtu || serviceZipInfo.payload?.zipCodeCtu;
},
updateServiceLocation(state, serviceLocationInfo) {
state.order.serviceLocation.address = serviceLocationInfo.address;
@ -482,6 +542,23 @@ export const mutations = {
state.order.customer.isSmsOptIn = customerDetails.isSmsOptIn;
}
},
updateInsuranceDetails(state, insuranceDetails) {
if (insuranceDetails) {
state.order.policy.policyNumber = insuranceDetails.policyNumber;
state.order.policy.streetAddress = insuranceDetails.streetAddress;
state.order.policy.apartment = insuranceDetails.apartment;
state.order.policy.city = insuranceDetails.city;
state.order.policy.state = insuranceDetails.state;
state.order.policy.zipCode = insuranceDetails.zipCode;
state.order.policy.claimNumber = insuranceDetails.claimNumber;
}
},
updateDamageDetails(state, damageDetails) {
if (damageDetails) {
state.order.damage.dateOfLoss = damageDetails.dateOfLoss;
state.order.damage.damageCause = damageDetails.damageCause;
}
},
// applicationUser MUTATIONS
updateSaveSessionPromise(state, saveSessionPromise) {
@ -766,7 +843,10 @@ export const mutations = {
state.order.payment.billToAccountNumber =
sessionInformation.order.payment.billToAccountNumber;
state.order.payment.inactivePromos = sessionInformation.order.payment.inactivePromos;
state.order.payment.isClaimAndCoverage =
sessionInformation.order.payment.isClaimAndCoverage;
state.order.payment.canScheduleOnline = sessionInformation.order.payment.canScheduleOnline;
state.order.payment.accountName = sessionInformation.order.policy.insuranceCompanyName;
//Do not assign default service type once user make service type selection
if (state.order.serviceLocation.appointmentType == null) {
state.order.serviceLocation.address =
@ -863,6 +943,11 @@ export const mutations = {
state.order.policy.policyNumber = sessionInformation.order.policy?.policyNumber;
state.order.policy.insuranceCompanyName =
sessionInformation.order.policy?.insuranceCompanyName;
//state.order.policy.streetAddress = sessionInformation.order.policy?.streetAddress;
//state.order.policy.apartment = sessionInformation.order.policy?.apartment;
//state.order.policy.city = sessionInformation.order.policy?.city;
//state.order.policy.state = sessionInformation.order.policy?.state;
//state.order.policy.zipCode = sessionInformation.order.policy?.zipCode;
state.order.policy.isNoComp =
coverageTypeValue(sessionInformation?.order.insuranceCoverage.coverageType) ===
coverageType.NOCOMP
@ -891,6 +976,9 @@ export const mutations = {
state.idempotencyKeyFields.totalInCents = totalInCents;
state.idempotencyKeyFields.expiryTime = expiryTime;
},
updateBailoutCode(state, bailoutCode) {
state.applicationUser.bailoutCode = bailoutCode;
},
};
// Export Getters
@ -1844,21 +1932,38 @@ export const actions = {
// create a new array to avoid mutating state
const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
const response = await globalMethods.callHttpClient({
method: endpoints.GetPartsOrQuestions.method,
endpoint: endpoints.GetPartsOrQuestions.url,
payload: {
carId: carId,
glassPieces: glassArrayForPayload,
zip: zipCode,
vin: vin,
serviceType: serviceType,
referralSeqNumber: referralSeqNumber,
parentAccountNumber: parentAccountNumber,
},
logApiCall: true,
pageNameToLog: pageNameToLog,
});
const response = await globalMethods
.callHttpClient({
method: endpoints.GetPartsOrQuestions.method,
endpoint: endpoints.GetPartsOrQuestions.url,
payload: {
carId: carId,
glassPieces: glassArrayForPayload,
zip: zipCode,
vin: vin,
serviceType: serviceType,
referralSeqNumber: referralSeqNumber,
parentAccountNumber: parentAccountNumber,
},
logApiCall: true,
pageNameToLog: pageNameToLog,
})
.catch((error) => {
if (error.status == 500) {
return { PartNotFound: true };
}
});
// Triggers bailout
if (response.PartNotFound) {
return response;
}
// Check if we only have MISC parts to trigger bailout
const miscPartsResponse = checkIfMiscParts(response.data.partsOrQuestions);
if (miscPartsResponse.PartNotFound) {
return miscPartsResponse;
}
// Flatten location and name properties
response.data.partsOrQuestions = convertGlassPieceNamingFromApi(
@ -2524,6 +2629,8 @@ export const actions = {
isInsurance: order.payment.isInsurance,
parentAccountNumber: order.payment.parentAccountNumber,
billToAccountNumber: order.payment.billToAccountNumber,
isClaimAndCoverage: order.payment.isClaimAndCoverage,
canScheduleOnline: order.payment.canScheduleOnline,
inactivePromos: order.payment.inactivePromos,
isCreditCard:
order.payment.piaType == paymentMethods.CREDIT_CARD ? true : false,
@ -3040,9 +3147,21 @@ export const actions = {
saveParentAccountNumber(context, parentAccountNumber) {
context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccountNumber);
},
saveAccountName(context, accountName) {
context.commit(storeMutations.UPDATE_ACCOUNT_NAME, accountName);
},
saveIsClaimAndCoverage(context, isClaimAndCoverage) {
context.commit(storeMutations.UPDATE_IS_CLAIM_AND_COVERAGE, isClaimAndCoverage);
},
saveCanScheduleOnline(context, canScheduleOnline) {
context.commit(storeMutations.UPDATE_CAN_SCHEDULE_ONLINE, canScheduleOnline);
},
saveBillToAccountNumber(context, billToAccountNumber) {
context.commit(storeMutations.UPDATE_BILL_TO_ACCT_NUMBER, billToAccountNumber);
},
resetInsuranceDetails(context) {
context.commit(storeMutations.RESET_INSURANCE_DETAILS);
},
saveSupportingItems(context, supportingItems) {
syncLineItemIds(supportingItems, context.state.order.lineItems.supportingItems);
@ -3439,6 +3558,14 @@ export const actions = {
context.commit(storeMutations.UPDATE_CUSTOMER_DETAILS, customerDetails);
},
saveInsuranceDetails(context, insuranceDetails) {
context.commit(storeMutations.UPDATE_INSURANCE_DETAILS, insuranceDetails);
},
saveDamageDetails(context, damageDetails) {
context.commit(storeMutations.UPDATE_DAMAGE_DETAILS, damageDetails);
},
saveServiceZipCodeInfo(context, serviceZipCodeInfo) {
if (
context.state.order.serviceLocation &&
@ -3742,6 +3869,10 @@ export const actions = {
context.commit(storeMutations.UPDATE_IDEMPOTENCY_KEY, newKey);
}
},
saveBailoutCode(context, bailoutCode) {
context.commit(storeMutations.UPDATE_BAILOUT_CODE, bailoutCode);
},
};
export default createStore({
@ -4283,3 +4414,17 @@ const timeSlotCallFlags = {
shop: false,
mobile: false,
};
function checkIfMiscParts(partsOrQuestions) {
if (!partsOrQuestions || partsOrQuestions.length === 0) {
return { PartsNotFound: true };
} else if (
partsOrQuestions.length === 1 &&
partsOrQuestions[0].parts &&
partsOrQuestions[0].parts.length === 1 &&
partsOrQuestions[0].parts[0].partNumber.startsWith("MISC")
) {
return { PartsNotFound: true };
}
return { PartsNotFound: false };
}

3
src/store/store.spec.js
View file

@ -225,6 +225,9 @@ describe("Mutations", () => {
category: "CAR",
registration: {},
},
policy: {
insuranceCompanyName: "LibertyBibity",
},
damage: {
glassToReplace: ["Windshield"],
isRepair: false,