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

Merge branch 'release/2026.06.04' into nation/CASH-619

Browse source
This commit is contained in:
Carl Nation 2026-05-27 09:28:40 -04:00
commit 2ec1f65f12
30 changed files with 654 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -33,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,
@ -72,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),

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.');
}
}

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

@ -261,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);
}

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

@ -40,7 +40,8 @@ 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";
@ -95,13 +96,13 @@ const allStandardTests = [
// { 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
@ -275,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;

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;

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;

2
src/constants/bailout-codes.js
View file

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

5
src/constants/insurance.js
View file

@ -79,6 +79,9 @@ export function coverageTypeEnum(strCoverageType) {
}
}
export const parentAccountNumbers = {
CONNECT: "560636",
};
export const NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS = [
{ name: "KentuckyFarmBureau", value: "223499" },
];
@ -86,4 +89,4 @@ export const NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS = [
export const PARENT_ACCOUNT_NUMBERS = {
STATE_FARM: "711310",
USAA: "900040",
};
};

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>

17
src/layouts/bailout-success/bailout-success.vue
View file

@ -13,7 +13,8 @@
id="btn-vehicle-not-listed"
:isPrimary="true"
:buttonText="ReturnToHomeButtonText"
class="mb-3"
loaderColor="white"
class="w-100 mb-3"
@click-event="forwardButtonAction" />
</div>
</div>
@ -27,6 +28,8 @@ 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";
@ -39,6 +42,9 @@ export default {
},
async beforeRouteEnter(to, from, next) {
// Clear order
await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_STATE);
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.name);
@ -67,10 +73,11 @@ export default {
},
arePagePrerequisitesValid() {
return (
store.getters.order.customer.firstName &&
store.getters.order.customer.lastName &&
store.getters.order.customer.emailAddress &&
store.getters.order.customer.phoneNumber
(store.getters.order.customer.firstName &&
store.getters.order.customer.lastName &&
store.getters.order.customer.emailAddress &&
store.getters.order.customer.phoneNumber) ||
baseMixin.methods.hasSubmittedOrder()
);
},
},

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

@ -36,9 +36,21 @@ describe("bailout.vue", () => {
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();

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

@ -43,6 +43,8 @@
validationRules="phone-number-required" />
<textboxQuestion
isRequired
v-if="!serviceZipCode"
class="mb-4"
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
@ -242,14 +244,14 @@ export default {
}
},
arePagePrerequisitesValid() {
return true;
return this.getBailoutCodeFromStore() !== null;
},
},
computed: {
getSubHeaderWidget() {
switch (this.bailoutCode) {
case bailoutCodes.PARTS_NOT_FOUND:
case bailoutCodes.PART_NOT_FOUND:
return "PartsNotFoundSubHeaderWidget";
default:
return "FunnelSubHeaderWidget";

22
src/layouts/coverage-statement/coverage-statement.spec.js
View file

@ -62,6 +62,28 @@ function setupMocks() {
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);

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

@ -4,10 +4,56 @@
<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.
-->
<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"
@ -28,6 +74,13 @@ 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",
@ -43,6 +96,12 @@ export default {
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) {
@ -98,6 +157,38 @@ export default {
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>

10
src/layouts/policy-info/policy-info.spec.js
View file

@ -55,6 +55,15 @@ function setupMocks() {
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, fieldName) => {
return mockCmsContent?.[widgetName]?.[fieldName] ?? "";
}),
setCmsContent: jest.fn(),
},
};
const mountOptions = getMountOptions({
route: { name: "policy-info", query: {}, params: {} },
router: {
@ -62,6 +71,7 @@ function setupMocks() {
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
mixins: [mockMixin],
});
const wrapper = shallowMount(policyInfo, mountOptions);

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

@ -8,7 +8,7 @@
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<textBlock
cmsWidgetName="PageTitleWidget"
typeStyle="h1"
@ -28,7 +28,10 @@
v-model="policyNumber"
inputId="policyNumber"
validationRules="policy-number-required" />
<span v-if="displayPolicyHelperText" class="d-block mb-5 helper-text" v-html="policyHelperText"></span>
<span
v-if="displayPolicyHelperText"
class="d-block mb-5 helper-text"
v-html="policyHelperText"></span>
<datePickerPopup
v-if="displayDateOfBirth"
@ -144,7 +147,7 @@
isRequired
validationRules="subrogation-required"
v-model="subrogationSelectedValue" />
<dropdownQuestion
v-if="displayLossState"
class="mb-4"
@ -185,7 +188,7 @@
ref="morePolicyQuestions"
cmsWidgetName="MorePolicyQuestionsWidget"
v-model="morePolicyQuestions"
groupName="MorePolicyQuestionsQuestion" />
groupName="MorePolicyQuestionsQuestion" />
<navbar
cmsWidgetName="FunnelFooterWidget"
@ -194,7 +197,10 @@
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<span v-if="displayDisclaimerText" class="d-block mb-5 disclaimer-text" v-html="disclaimerText"></span>
<span
v-if="displayDisclaimerText"
class="d-block mb-5 disclaimer-text"
v-html="disclaimerText"></span>
</div>
</div>
</div>
@ -284,10 +290,16 @@ export default {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
pageTitleText() {
return this.clientConfig?.PageTitleOverrideWidget?.Text || this.getCmsContent("PageTitleWidget", "Text");
return (
this.clientConfig?.PageTitleOverrideWidget?.Text ||
this.getCmsContent("PageTitleWidget", "Text")
);
},
pageInstructionsText() {
return this.clientConfig?.PageInstructionsOverrideWidget?.Text || this.getCmsContent("PageInstructionsWidget", "Text");
return (
this.clientConfig?.PageInstructionsOverrideWidget?.Text ||
this.getCmsContent("PageInstructionsWidget", "Text")
);
},
isUSAA() {
return (
@ -341,7 +353,7 @@ export default {
for (const answer of answers) {
options[answer.Name] = answer.Text;
}
return options;
},
parsedClientConfig() {
@ -539,4 +551,4 @@ export default {
color: $gray-600;
line-height: 1.625;
}
</style>
</style>

15
src/layouts/policy-vehicle/policy-vehicle.spec.js
View file

@ -50,11 +50,18 @@ function setupMocks() {
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: {
@ -64,7 +71,13 @@ function setupMocks() {
},
});
mountOptions.global = mountOptions.global || {};
mountOptions.global.mocks = {
...(mountOptions.global.mocks || {}),
getCmsContent: getCmsContentMock,
};
const wrapper = shallowMount(policyVehicle, mountOptions);
return { wrapper };
return { wrapper, getCmsContentMock };
}

64
src/layouts/policy-vehicle/policy-vehicle.vue
View file

@ -4,16 +4,31 @@
<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.
-->
<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>
@ -24,6 +39,11 @@
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";
@ -40,6 +60,8 @@ export default {
funnelHeader,
navbar,
funnelSubHeader,
textLink,
buttonMain,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
@ -57,7 +79,34 @@ export default {
});
},
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,
@ -76,3 +125,10 @@ export default {
},
};
</script>
<style lang="scss" scoped>
#btn-vehicle-not-listed {
background-color: $blue;
color: $white;
}
</style>

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

@ -398,6 +398,13 @@ export default {
payload.orderNumber = "";
}
// Referral Sequence Number
if (order.referralSequenceNumber) {
payload.referralSequenceNumber = order.referralSequenceNumber;
} else {
payload.referralSequenceNumber = "";
}
// Pricing
// Only fire for completed orders?

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

@ -423,6 +423,7 @@ describe("analyticsMixin.js", () => {
},
workOrderNumber: "01820-111111",
workOrderId: "222222222222",
referralSequenceNumber: "1234567",
};
store.getters.isRecalibrationOnOrder = true;
store.getters.isRecalibrationOnSubmittedState = false;
@ -667,6 +668,14 @@ describe("analyticsMixin.js", () => {
expect(glassString).toMatch(/(\w+\/\w+)?(,\w+\/\w+)*/);
expect(promoString).toMatch(/(\w+)?(,\w+)*/);
});
test("Pushes referralSequenceNumber when present on order", () => {
window.dataLayer = [];
analyticsMixin.methods.pushOrderToDataLayer();
expect(window.dataLayer[0].referralSequenceNumber).toBe("1234567");
});
});
test("Obj is not null after action prepended", () => {

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

@ -7,7 +7,7 @@ describe("bailout-mixin.js", () => {
test("navigateToBailoutPage: dispatches SAVE_BAILOUT_CODE action with bailout code", async () => {
// Arrange
const mockVm = createMockVm();
const bailoutCode = bailoutCodes.PARTS_NOT_FOUND;
const bailoutCode = bailoutCodes.PART_NOT_FOUND;
// Act
await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);
@ -22,7 +22,7 @@ describe("bailout-mixin.js", () => {
test("navigateToBailoutPage: navigates to bailout page after saving bailout code", async () => {
// Arrange
const mockVm = createMockVm();
const bailoutCode = bailoutCodes.PARTS_NOT_FOUND;
const bailoutCode = bailoutCodes.PART_NOT_FOUND;
// Act
await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);
@ -46,7 +46,7 @@ describe("bailout-mixin.js", () => {
pageName: "test-page",
};
const bailoutCode = bailoutCodes.PARTS_NOT_FOUND;
const bailoutCode = bailoutCodes.PART_NOT_FOUND;
// Act
await bailoutMixin.methods.navigateToBailoutPage.call(mockThis, undefined, bailoutCode);
@ -78,7 +78,7 @@ describe("bailout-mixin.js", () => {
const mockVm = createMockVm();
const mockPageName = "vehicle-damage";
mockVm.pageName = mockPageName;
const bailoutCode = bailoutCodes.PARTS_NOT_FOUND;
const bailoutCode = bailoutCodes.PART_NOT_FOUND;
// Act
await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);

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

@ -37,8 +37,8 @@ export default {
pageNameToLog: pageName,
});
if (result.PartsNotFound) {
bailoutMixin.methods.navigateToBailoutPage(this, bailoutCodes.PARTS_NOT_FOUND);
if (result.PartNotFound) {
bailoutMixin.methods.navigateToBailoutPage(this, bailoutCodes.PART_NOT_FOUND);
}
const partsOrQuestions = result.data.partsOrQuestions;

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

@ -12,6 +12,7 @@ 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",

15
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,
},
],
},
{
@ -483,6 +492,10 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.POLICY_DRIVER,
},
{
scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
destinationPageData: routeData.INSURANCE_COMPANY,
},
],
},
{
@ -820,7 +833,7 @@ const routingTable = function () {
maps: [
{
scenario: navigationScenarios.CLICKED_BACK_TO_HOMEPAGE,
destinationPageData: routeData.RESTART,
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;
}

12
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 });
}
}
}

20
src/store/index.js
View file

@ -1971,21 +1971,21 @@ export const actions = {
pageNameToLog: pageNameToLog,
})
.catch((error) => {
if (error.status == 500) {
return { PartsNotFound: true };
}
// if (error.status == 500) {
// return { PartNotFound: true };
// }
});
// Triggers bailout
if (response.PartsNotFound) {
return response;
}
// if (response.PartNotFound) {
// return response;
// }
// Check if we only have MISC parts to trigger bailout
const miscPartsResponse = checkIfMiscParts(response.data.partsOrQuestions);
if (miscPartsResponse.PartsNotFound) {
return miscPartsResponse;
}
// const miscPartsResponse = checkIfMiscParts(response.data.partsOrQuestions);
// if (miscPartsResponse.PartNotFound) {
// return miscPartsResponse;
// }
// Flatten location and name properties
response.data.partsOrQuestions = convertGlassPieceNamingFromApi(