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

Merge branch 'CASH-631' into CASH-642

Browse source
This commit is contained in:
JennyNou 2025-06-04 10:40:20 -04:00
commit 44934a7932
75 changed files with 1108 additions and 436 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Dockerfile.playwright
View file

@ -14,8 +14,5 @@ RUN npm install
# Install Playwright browsers
RUN npx playwright install chromium --with-deps
# Install jq
RUN apt-get install -y jq
# Copy the rest of the application code
COPY . .

21
playwright-tests/business-logic/types/Enums.ts
View file

@ -130,5 +130,26 @@ export enum AppointmentTimeslot{
overnight = "Overnight"
}
export enum ProgressBarPercentages {
VehicleSelectionPage = '4%',
VehicleDamagePage = '16%',
EstimatePage = '28%',
ServiceZipPage = '32%',
VehicleLookupAddressPage = '32%',
VehicleLookupLicensePage = '32%',
VinLookupPage = '32%',
PartQuestionsPage = '40%',
MoldingQuestionsPage = '40%',
CapabilityQuestionsPage = '40%',
VehiclePartsPage = '40%',
ServicePackagePage = '48%',
InsuranceCompanyPage = '52%',
ServiceLocationPage = '60%',
SchedulePage = '72%',
ContactDetailsPage = '84%',
PaymentMethodPage = '92%',
OrderConfirmationPage = '100%'
}

2
playwright-tests/impl/reporter/JiraWritebackReporter.ts
View file

@ -23,7 +23,7 @@ const reportConfig: OrtoniReportConfig = {
logo: 'playwright-tests/business-logic/data/logo.png',
title: "Test Report",
showProject: false,
projectName: "ISS-Nextgen-Playwright-Report",
projectName: "FMG-Nextgen-Playwright-Report",
testType: `E2E- Environment: ${process.env.NODE_ENV} `,
preferredTheme: "light",
base64Image: true,

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

@ -1,5 +1,6 @@
import { IAppointmentDetails, ICustomerDetails } from '@business-logic/types/CustomerDetails';
import Soft from '@business-logic/validations/Soft';
import { waitUntil } from '@impl/utils/TimingUtils';
import test, { expect, type Locator, type Page } from '@playwright/test';
import { error } from 'console';
@ -24,7 +25,7 @@ export class BasePage {
this.pageSpinner = page.getByRole('status');
this.buttonLoadSpin = page.getByRole('alert');
this.hamburgerMenu = this.page.getByRole('button', { name: 'Hamburger Menu (modal window)' });
this.progressBar = this.page.locator('#progress-bar-container progress');
this.progressBar = this.page.locator('.progress-bar-inner');
}
async nextPage() {
@ -56,8 +57,11 @@ export class BasePage {
async fillAndValidate(element: Locator, value: string){
await expect(async () => {
await element.clear();
await element.fill(value);
var text = await element.textContent();
if(text !== value) {
await element.clear();
await element.fill(value);
}
await expect(element).toHaveValue(value);
}).toPass();
}
@ -129,11 +133,25 @@ export class BasePage {
}
}
async validateProgressBar(progressPercentage: string) {
await this.page.locator('button .loader').waitFor({ state: 'hidden', timeout: 60000 });
const actualProgressPercentage = await this.progressBar.getAttribute("value") || "Not Found";
async validateProgressBar(progressPercentage: string, timeout: number = 60000) {
await waitUntil(async () => {
let loaderElements = await this.page.locator('button .loader, .buy-loader, timeout, .modal-loader').all();
return !(await Promise.any(loaderElements.map(el => el.isVisible())).catch(() => false));
});
// Take a screenshot of the page before validating the progress bar
await this.page.screenshot({ path: `test-results\\ortoni-data\\progress-bar-${Date.now()}.png`, fullPage: true });
// Wait until the progress bar element is attached and visible
const actualProgressPercentage = await this.progressBar.evaluate(
async (element) => {
await new Promise(resolve => setTimeout(resolve, 200));
return element.style.width || "Not Found";
}
);
Soft.expect(actualProgressPercentage).toBe(progressPercentage);
console.log(`Progress Bar Percentage: Actual - ${actualProgressPercentage} vs Expected - ${progressPercentage}`);
}
}

3
playwright-tests/pages/CapabilityQuestionsPage.ts
View file

@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
import { PartQuestionsPage } from "./PartQuestionPage";
import { step } from "@business-logic/types/Step";
import { ITestData } from "@business-logic/types/ITestData";
import { ProgressBarPercentages } from "@business-logic/types/Enums";
export default class CapabilityQuestionsPage extends PartQuestionsPage {
url = process.env['BASE_URL']! + '/fmg/?fmgPage=capability-questions';
@ -14,7 +15,7 @@ export default class CapabilityQuestionsPage extends PartQuestionsPage {
async handleCapabilityQuestionsPage(testCase: Partial<ITestData>) {
const { capabilityQuestions } = testCase;
await this.validateProgressBar("40");
await this.validateProgressBar(ProgressBarPercentages.CapabilityQuestionsPage);
// Validate the capability questions are on the page
await this.validatePartQuestions(capabilityQuestions!);

3
playwright-tests/pages/ContactDetailsPage.ts
View file

@ -3,6 +3,7 @@ import { BasePage } from './BasePage';
import { ICustomerDetails } from '@business-logic/types/CustomerDetails';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
import { ProgressBarPercentages } from '@business-logic/types/Enums';
export class ContactDetailsPage extends BasePage {
readonly page: Page;
@ -46,7 +47,7 @@ export class ContactDetailsPage extends BasePage {
async handleContactDetailsPage(testData: Partial<ITestData>) {
const { customerDetails } = testData;
await this.validateProgressBar("84");
await this.validateProgressBar(ProgressBarPercentages.ContactDetailsPage);
await this.enterContactDetails(customerDetails!);
await this.nextPage();
}

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

@ -1,6 +1,6 @@
import { type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { VehicleLookupType } from '@business-logic/types/Enums';
import { ProgressBarPercentages, VehicleLookupType } from '@business-logic/types/Enums';
import { IVehicleDetails } from '@business-logic/types/CustomerDetails';
import { VinLookupPage } from './VinLookupPage';
import { VehicleLookupAddressPage } from './VehicleLookupAddressPage';
@ -74,7 +74,7 @@ export class EstimatePage extends BasePage {
@step("EstimatePage >> Select Lookup Type")
async handleEstimatePage(testData: Partial<ITestData>) {
const { vehicleDetails } = testData;
await this.validateProgressBar("28");
await this.validateProgressBar(ProgressBarPercentages.EstimatePage);
await this.vehicleLookup(vehicleDetails!);
}
}

3
playwright-tests/pages/InsuranceCompanyPage.ts
View file

@ -4,6 +4,7 @@ import { IClaimDetails } from '@business-logic/types/CustomerDetails';
import { step } from '@business-logic/types/Step';
import TestCase from '@business-logic/types/TestCase';
import { ITestData } from '@business-logic/types/ITestData';
import { ProgressBarPercentages } from '@business-logic/types/Enums';
export class InsuranceCompanyPage extends BasePage {
@ -52,7 +53,7 @@ export class InsuranceCompanyPage extends BasePage {
async handleInsuranceCompanyPage(testData: Partial<ITestData>) {
const { claimDetails } = testData;
await this.validateProgressBar("52");
await this.validateProgressBar(ProgressBarPercentages.InsuranceCompanyPage);
await this.enterInsuranceCompany(claimDetails!.client!);
await this.nextPage();
}

3
playwright-tests/pages/MoldingQuestionsPage.ts
View file

@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
import { PartQuestionsPage } from "./PartQuestionPage";
import { step } from "@business-logic/types/Step";
import { ITestData } from "@business-logic/types/ITestData";
import { ProgressBarPercentages } from "@business-logic/types/Enums";
export default class MoldingQuestionsPage extends PartQuestionsPage {
url = process.env['BASE_URL']! + '/fmg/?fmgPage=molding-questions';
@ -14,7 +15,7 @@ export default class MoldingQuestionsPage extends PartQuestionsPage {
async handleMoldingQuestionsPage(testCase: Partial<ITestData>) {
const { moldingQuestions } = testCase;
await this.validateProgressBar("40");
await this.validateProgressBar(ProgressBarPercentages.MoldingQuestionsPage);
await this.validatePartQuestions(moldingQuestions!);
await this.selectPartQuestionResponses(moldingQuestions!);
await this.nextPage();

10
playwright-tests/pages/OrderConfirmationPage.ts
View file

@ -2,7 +2,7 @@ import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { test } from '@business-logic/types/Test';
import { ICustomerDetails, IVehicleDetails } from '@business-logic/types/CustomerDetails';
import { ServicePackage, PaymentType, PaymentMethod, AppointmentType } from '@business-logic/types/Enums';
import { ServicePackage, PaymentType, PaymentMethod, AppointmentType, ProgressBarPercentages } from '@business-logic/types/Enums';
import { ITestData } from '@business-logic/types/ITestData';
import { step } from '@business-logic/types/Step';
@ -69,7 +69,7 @@ export class OrderConfirmationPage extends BasePage {
expect.soft(servicePackageValue).toContain('New wiper blades');
}
if (servicePackage === ServicePackage.Premium) {
expect.soft(servicePackageValue).toContain('Rain Defense™');
expect.soft(servicePackageValue).toContain('Rain Repel Treatment');
}
// Promo Code Validation
@ -178,12 +178,12 @@ export class OrderConfirmationPage extends BasePage {
@step("OrderConfirmationPage >> Validate order")
async verifyOrderConfirmationPage(testData: Partial<ITestData>) {
await this.validateProgressBar("100");
await this.page.waitForURL(new RegExp('(.+)confirmation'), {timeout: 60000});
await this.validateProgressBar(ProgressBarPercentages.OrderConfirmationPage);
await this.validateOrderConfirmationPage(testData);
const workOrderNumber = await this.logOrderNumber();
await test.step(`Session Storage Work Order Number: ${workOrderNumber}`, async () => {
console.log(`Session Storage Work Order Number: ${workOrderNumber}`);
});
}
}
}

3
playwright-tests/pages/PartQuestionPage.ts
View file

@ -3,6 +3,7 @@ import { BasePage } from './BasePage';
import { IPartQuestion } from '@business-logic/types/CustomerDetails';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
import { ProgressBarPercentages } from '@business-logic/types/Enums';
export class PartQuestionsPage extends BasePage {
readonly page: Page;
@ -63,7 +64,7 @@ export class PartQuestionsPage extends BasePage {
async handlePartQuestionsPage(testData: Partial<ITestData>) {
const { partQuestions } = testData;
await this.validateProgressBar("40");
await this.validateProgressBar(ProgressBarPercentages.PartQuestionsPage);
await this.validatePartQuestions(partQuestions!);
await this.selectPartQuestionResponses(partQuestions!);
await this.nextPage();

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

@ -1,7 +1,7 @@
import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { IPaymentDetails } from '@business-logic/types/CustomerDetails';
import { AppointmentTimeslot, AppointmentType, PaymentMethod, PaymentType, ServicePackage, VehicleDamage } from '@business-logic/types/Enums';
import { AppointmentTimeslot, AppointmentType, PaymentMethod, PaymentType, ProgressBarPercentages, ServicePackage, VehicleDamage } from '@business-logic/types/Enums';
import { PaymentPage } from './PaymentPage';
import { AfterpayPage } from './AfterpayPage';
import { PaypalPage } from './PaypalPage';
@ -148,7 +148,7 @@ export class PaymentMethodPage extends BasePage {
expect.soft(servicePackageValue).toContain('New wiper blades');
}
if (servicePackage === ServicePackage.Premium) {
expect.soft(servicePackageValue).toContain('Rain repel treatment');
expect.soft(servicePackageValue).toContain('Rain Repel Treatment');
}
// Promo Code Validation
@ -159,7 +159,7 @@ export class PaymentMethodPage extends BasePage {
// Early Bird line item validation
if (appointmentDetails?.appointmentTimeSlot == AppointmentTimeslot.EarlyBird) {
expect.soft(servicePackageValue).toContain('Early Bird');
expect.soft(servicePackageValue).toContain('Early bird');
}
}
}
@ -470,7 +470,7 @@ l
async handlePaymentMethodPage(testData: Partial<ITestData>) {
const { servicePackage, isRecalVehicle, paymentDetails } = testData;
await this.validateProgressBar("92");
await this.validateProgressBar(ProgressBarPercentages.PaymentMethodPage);
await this.validatePaymentDetailsPage(testData);
// Verify VAPS wipers on backend for standard and premium packages

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

@ -11,6 +11,7 @@ export class PaypalPage extends BasePage {
readonly passwordTextBox: Locator;
readonly paypalLoginButton: Locator;
readonly completePurchaseButton: Locator;
readonly payWithRadioButton: Locator;
readonly payButton: Locator;
constructor(page: Page) {
@ -23,6 +24,7 @@ export class PaypalPage extends BasePage {
this.passwordTextBox = page.getByPlaceholder('Password');
this.paypalLoginButton = page.getByRole('button', { name: 'Log In', exact: true });
this.completePurchaseButton = page.getByTestId('submit-button-initial')
this.payWithRadioButton = page.locator('.py-4').first();
this.payButton = page.getByRole('button', { name: 'Pay $' });
}
@ -42,6 +44,7 @@ export class PaypalPage extends BasePage {
await this.usePasswordInsteadButton.click();
await this.passwordTextBox.fill(paymentDetails.password!);
await this.paypalLoginButton.click();
await this.payWithRadioButton.click();
await this.payButton.click();
}
}

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

@ -2,7 +2,7 @@ import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { IAppointmentDetails, ICustomerDetails } from '@business-logic/types/CustomerDetails';
import { formatDate, formatTime } from '@impl/utils/DateUtils';
import { AppointmentTimeslot, AppointmentType, ServiceLocation } from '@business-logic/types/Enums';
import { AppointmentTimeslot, AppointmentType, ProgressBarPercentages, ServiceLocation } from '@business-logic/types/Enums';
import { time } from 'console';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
@ -104,7 +104,7 @@ export class SchedulePage extends BasePage {
@step("SchedulePage >> Schedule appointment: ")
async handleSchedulePage(testData: Partial<ITestData>) {
await this.validateProgressBar("72");
await this.validateProgressBar(ProgressBarPercentages.SchedulePage);
await this.scheduleFirstAppointment(testData);
}
}

12
playwright-tests/pages/ServiceLocationPage.ts
View file

@ -1,7 +1,7 @@
import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { IAppointmentDetails } from '@business-logic/types/CustomerDetails';
import { AppointmentTimeslot, AppointmentType } from '@business-logic/types/Enums';
import { AppointmentTimeslot, AppointmentType, ProgressBarPercentages } from '@business-logic/types/Enums';
import { AddressForm } from './forms/AddressForm';
import { faker } from '@faker-js/faker';
import { step } from '@business-logic/types/Step';
@ -48,7 +48,7 @@ export class ServiceLocationPage extends BasePage {
// Initial selection
this.inShopButton = this.page.getByText(/In-shop/);
this.mobileButton = this.page.getByText(/Mobile/).nth(0);
this.mobileButton = this.page.locator('label[buttonlabel="Mobile"]');
this.dropOffButton = this.page.getByText(/Drop-off/);
this.RecalWarningMessage1 = this.page.getByText(/We're not able to provide mobile service/);
this.RecalWarningMessage2 = this.page.getByText(/advanced safety system recalibration needs to be done in our shop./);
@ -63,7 +63,7 @@ export class ServiceLocationPage extends BasePage {
// For mobile
this.enterServiceAddressButton = this.page.getByRole('link', { name: 'Enter your service address' });
this.enterServiceAddressButton = this.page.getByRole('link', { name: 'Enter your service address ' });
this.serviceAddressTextBox = this.page.getByRole('textbox', { name: 'Street Address' });
this.aptNumberTextBox = this.page.getByRole('textbox', { name: 'Apt. number'});
this.cityTextBox = this.page.getByRole('textbox', { name: 'City' });
@ -118,9 +118,7 @@ export class ServiceLocationPage extends BasePage {
const { appointmentDetails, customerDetails } = testData;
if (appointmentDetails?.serviceAddress) {
await this.mobileButton.click();
if (!(await this.serviceAddressTextBox.isVisible())) {
await this.enterServiceAddressButton.click();
}
// await this.enterServiceAddressButton.click();
await this.addressForm.populateAddress({ address: appointmentDetails.serviceAddress! });
if (await this.repeatedClicksModalCloseButton.isVisible()) {
await this.repeatedClicksModalCloseButton.click();
@ -164,7 +162,7 @@ export class ServiceLocationPage extends BasePage {
@step("ServiceLocationPage >> Select service location: ")
async handleServiceLocationPage(testData: Partial<ITestData>) {
await this.validateProgressBar("60");
await this.validateProgressBar(ProgressBarPercentages.ServiceLocationPage);
await this.selectLocation(testData);
await this.nextPage();
}

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

@ -1,6 +1,6 @@
import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { ServicePackage, VehicleDamage } from '@business-logic/types/Enums';
import { ProgressBarPercentages, ServicePackage, VehicleDamage } from '@business-logic/types/Enums';
import { PaymentMethod } from '@business-logic/types/Enums';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
@ -185,7 +185,7 @@ export class ServicePackagesPage extends BasePage {
async handleServicePackagePage(testData: Partial<ITestData>) {
const { customerDetails, paymentMethod, servicePackage, promoCode, canNotRecal, dynamicRecal, hasOemEndorsement, vehicleDamage } = testData;
await this.validateProgressBar("48");
await this.validateProgressBar(ProgressBarPercentages.ServicePackagePage);
// Define repair damage types (vs. replacement types)
const repairTypes: VehicleDamage[] = [
VehicleDamage.WindshieldOneChip,

3
playwright-tests/pages/ServiceZipPage.ts
View file

@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
import { LookupPage } from "./LookupPage";
import { step } from "@business-logic/types/Step";
import { ITestData } from "@business-logic/types/ITestData";
import { ProgressBarPercentages } from "@business-logic/types/Enums";
export class ServiceZipPage extends LookupPage {
@ -14,7 +15,7 @@ export class ServiceZipPage extends LookupPage {
@step("ZipLookupPage >> Lookup by service ZIP: ")
async handleServiceZipPage(testData: Partial<ITestData>) {
const { customerDetails, vehicleDetails, alertFlags } = testData;
await this.validateProgressBar("32");
await this.validateProgressBar(ProgressBarPercentages.ServiceZipPage);
await this.enterZip(customerDetails!.address.postalCode!);
await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);
}

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

@ -1,6 +1,6 @@
import { type Locator, type Page, expect, test } from '@playwright/test';
import { BasePage } from './BasePage';
import { SideDoorDamage, VehicleDamage, WindshieldDamage } from '@business-logic/types/Enums';
import { ProgressBarPercentages, SideDoorDamage, VehicleDamage, WindshieldDamage } from '@business-logic/types/Enums';
import TestSuccessAlert from '@business-logic/types/TestSuccessAlert';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
@ -169,7 +169,7 @@ export class VehicleDamagePage extends BasePage {
const {vehicleDamage} = testData;
const {isRepairReplace, isRepairOnly} = testData.alertFlags || {};
await this.validateProgressBar("16");
await this.validateProgressBar(ProgressBarPercentages.VehicleDamagePage);
await this.selectDamage(vehicleDamage!);
// Handle alert conditions for vehicle damage
if (isRepairReplace) {

3
playwright-tests/pages/VehicleLookupAddressPage.ts
View file

@ -5,6 +5,7 @@ import { VehicleSelectionForm } from './forms/VehicleSelectionForm';
import { ICustomerDetails, IVehicleDetails } from '@business-logic/types/CustomerDetails';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
import { ProgressBarPercentages } from '@business-logic/types/Enums';
export class VehicleLookupAddressPage extends LookupPage {
readonly addressForm: AddressForm;
@ -32,7 +33,7 @@ export class VehicleLookupAddressPage extends LookupPage {
async handleVehicleLookupAddressPage(testData: Partial<ITestData>) {
const { customerDetails, vehicleDetails, alertFlags } = testData;
await this.validateProgressBar("32");
await this.validateProgressBar(ProgressBarPercentages.VehicleLookupAddressPage);
await this.lookupVehicleByAddress(customerDetails!, vehicleDetails!);
await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);
}

3
playwright-tests/pages/VehicleLookupLicensePage.ts
View file

@ -3,6 +3,7 @@ import { LookupPage } from './LookupPage';
import { IVehicleDetails } from '@business-logic/types/CustomerDetails';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
import { ProgressBarPercentages } from '@business-logic/types/Enums';
export class VehicleLookupLicensePage extends LookupPage {
readonly licensePlateNumTextBox: Locator;
@ -31,7 +32,7 @@ export class VehicleLookupLicensePage extends LookupPage {
async handleVehicleLookupLicensePage(testData: Partial<ITestData>) {
const { customerDetails, vehicleDetails, alertFlags } = testData;
await this.validateProgressBar("32");
await this.validateProgressBar(ProgressBarPercentages.VehicleLookupLicensePage);
await this.enterPlateDetails(vehicleDetails!);
await this.enterZip(customerDetails!.address.postalCode!);
await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);

3
playwright-tests/pages/VehiclePartsPage.ts
View file

@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
import { PartQuestionsPage } from "./PartQuestionPage";
import { step } from "@business-logic/types/Step";
import { ITestData } from "@business-logic/types/ITestData";
import { ProgressBarPercentages } from "@business-logic/types/Enums";
export default class VehiclePartQuestionsPage extends PartQuestionsPage{
url = process.env['BASE_URL']! + '/fmg/?fmgPage=vehicle-parts';
@ -14,7 +15,7 @@ export default class VehiclePartQuestionsPage extends PartQuestionsPage{
async handleVehiclePartsPage(testCase: Partial<ITestData>) {
const { vehiclePartQuestions } = testCase;
await this.validateProgressBar("40");
await this.validateProgressBar(ProgressBarPercentages.VehiclePartsPage);
await this.validatePartQuestions(vehiclePartQuestions!);
await this.selectPartQuestionResponses(vehiclePartQuestions!);
await this.nextPage();

7
playwright-tests/pages/VehicleSelectionPage.ts
View file

@ -4,6 +4,7 @@ import { IVehicleDetails } from '@business-logic/types/CustomerDetails';
import TestSuccessAlert from '@business-logic/types/TestSuccessAlert';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
import { ProgressBarPercentages } from '@business-logic/types/Enums';
export class VehicleSelectionPage extends BasePage {
readonly page: Page;
@ -49,9 +50,9 @@ export class VehicleSelectionPage extends BasePage {
@step("VehicleSelectionPage >> Select Vehicle: ")
async handleVehicleSelectionPage(testData: Partial<ITestData>) {
await this.validateProgressBar("4");
const { vehicleDetails, isHeavyTruck, customerDetails } = testData;
const { isHeavyTruckVehicleAlert, isSplitWindshield } = testData.alertFlags || {};
await this.validateProgressBar(ProgressBarPercentages.VehicleSelectionPage);
const { vehicleDetails } = testData;
const { isHeavyTruckVehicle, isSplitWindshield } = testData.alertFlags || {};
await this.selectVehicle(vehicleDetails!);

3
playwright-tests/pages/VinLookupPage.ts
View file

@ -2,6 +2,7 @@ import { type Locator, type Page } from '@playwright/test';
import { LookupPage } from './LookupPage';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
import { ProgressBarPercentages } from '@business-logic/types/Enums';
export class VinLookupPage extends LookupPage {
readonly vinLookupTextBox: Locator;
@ -27,7 +28,7 @@ export class VinLookupPage extends LookupPage {
async handleVehicleLookupVinPage(testData: Partial<ITestData>) {
const { customerDetails, vehicleDetails, alertFlags } = testData;
await this.validateProgressBar("32");
await this.validateProgressBar(ProgressBarPercentages.VinLookupPage);
await this.enterVin(vehicleDetails!.vin!);
await this.enterZip(customerDetails!.address.postalCode!);
await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);

34
playwright-tests/pages/forms/AddressForm.ts
View file

@ -1,7 +1,7 @@
import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from '../BasePage';
import { ICustomerDetails } from '@business-logic/types/CustomerDetails';
import { faker } from '@faker-js/faker/locale/en';
import { waitUntil } from '@impl/utils/TimingUtils';
export class AddressForm extends BasePage {
readonly page: Page;
@ -12,6 +12,7 @@ export class AddressForm extends BasePage {
readonly firstNameTextBox: Locator;
readonly lastNameTextBox: Locator;
readonly addressNotFoundMsg: Locator;
readonly addressSuggestionList: Locator;
constructor(page: Page) {
super(page);
@ -23,6 +24,7 @@ export class AddressForm extends BasePage {
this.firstNameTextBox = page.getByRole('textbox', { name: 'First name' });
this.lastNameTextBox = page.getByRole('textbox', { name: 'Last name' });
this.addressNotFoundMsg = page.getByText('Address not found.');
this.addressSuggestionList = page.locator('.pac-container .pac-item').first();
}
async forceAddressFormToAppear() {
@ -38,13 +40,39 @@ export class AddressForm extends BasePage {
if (customerDetails.address) {
// Force address form to appear
await this.forceAddressFormToAppear();
// await this.forceAddressFormToAppear();
await this.streetAddressTextBox.click();
await this.streetAddressTextBox.pressSequentially(`${customerDetails.address.street}, ${customerDetails.address.city}, ${customerDetails.address.state} ${customerDetails.address.postalCode}`).then( async() => {
await this.streetAddressTextBox.dispatchEvent('keydown', { key: 'ArrowLeft' } );
await this.streetAddressTextBox.dispatchEvent('keyup', { key: 'ArrowLeft' });
});
await waitUntil(async () => {
await this.addressSuggestionList.waitFor({ state: 'visible', timeout: 5000 });
let text = await this.addressSuggestionList.textContent() || '';
return (
text.includes(customerDetails.address!.street) &&
text.includes(customerDetails.address!.city) &&
text.includes(customerDetails.address!.state)
);
});
await this.page.hover(".pac-container .pac-item");
await new Promise(resolve => setTimeout(resolve, 1000));
await this.addressSuggestionList.click(); // Select the first suggestion
//await this.streetAddressTextBox.press('Tab'); // Move focus to ZIP code field
// Fill address
await this.stateDrpDwn.waitFor({ state: 'visible', timeout: 5000 }).then(async () => {
const selectedState = await this.stateDrpDwn.inputValue();
if (selectedState !== customerDetails.address!.state) {
await this.stateDrpDwn.selectOption(customerDetails.address!.state);
}
})
await this.fillAndValidate(this.streetAddressTextBox, customerDetails.address.street);
await this.fillAndValidate(this.zipCodeTextBox, customerDetails.address.postalCode)
await this.fillAndValidate(this.cityTextBox, customerDetails.address.city);
await this.stateDrpDwn.selectOption(customerDetails.address.state);
}
if (customerDetails.firstName) {

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

@ -64,7 +64,7 @@ export default defineConfig({
['junit'],
['list']
],
timeout: 180_000,
timeout: 300_000,
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */

13
playwright-tests/tests/CashRepairMobileCreditCard.ts
View file

@ -12,9 +12,18 @@ setFakerSeedFromTestName("CashRepairMobileCreditCard");
const cashRepairMobileCCData : Partial<ITestData> = {
...getDefaultTestData(), // Get default data with current seed
//Override default vehicle damage (Windshield Crack)
// Override default vehicle damage (Windshield Crack)
vehicleDamage: [VehicleDamage.WindshieldOneChip],
// Override customer postal code
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '91710'
}
},
// Override specific fields with test-specific data
vehicleDetails: {
...getDefaultTestData().vehicleDetails!,

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

@ -17,6 +17,14 @@ const cashReplaceDynamicRecalMobileData: Partial<ITestData> = {
// Flag for dynamic Recalibration vehicle
dynamicRecal: true,
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '21237'
}
},
// Override vehicle details
vehicleDetails: {
@ -37,7 +45,7 @@ const cashReplaceDynamicRecalMobileData: Partial<ITestData> = {
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
serviceAddress: {
// Use street address from current faker seed
street: getDefaultTestData().customerDetails!.address.street,
street: "5050 Silver Oak Dr",
city: 'Rosedale',
state: 'MD',
postalCode: '21237',

8
playwright-tests/tests/CashReplaceMultiGlassMobile.ts
View file

@ -12,13 +12,13 @@ setFakerSeedFromTestName("CashReplaceMultiGlassMobile");
const cashReplaceMultiGlassMobileData: Partial<ITestData> = {
...getDefaultTestData(), // Get default data with current seed
// Override customer postal code
customerDetails: {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '43085'
}
postalCode: '21237'
}// Override customer postal code
},
// Flag for recalibration vehicle
@ -33,7 +33,7 @@ const cashReplaceMultiGlassMobileData: Partial<ITestData> = {
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
serviceAddress: {
// Use street address from current faker seed
street: getDefaultTestData().customerDetails!.address.street,
street: "5050 Silver Oak Dr",
city: 'Rosedale',
state: 'MD',
postalCode: '21237',

4
playwright-tests/tests/CashReplaceSafeliteCanNotRecalMobile.ts
View file

@ -23,7 +23,7 @@ const cashReplaceSafeliteCanNotRecalMobileData: Partial<ITestData> = {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '43085'
postalCode: '21237'
}
},
@ -46,7 +46,7 @@ const cashReplaceSafeliteCanNotRecalMobileData: Partial<ITestData> = {
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
serviceAddress: {
// Use street address from current faker seed
street: getDefaultTestData().customerDetails!.address.street,
street: "5050 Silver Oak Dr",
city: 'Rosedale',
state: 'MD',
postalCode: '21237',

4
playwright-tests/tests/CashReplaceVinMobile.ts
View file

@ -20,7 +20,7 @@ const cashReplaceVinMobileData: Partial<ITestData> = {
...getDefaultTestData().customerDetails!,
address: {
...getDefaultTestData().customerDetails!.address,
postalCode: '43085'
postalCode: '21237'
}
},
@ -43,7 +43,7 @@ const cashReplaceVinMobileData: Partial<ITestData> = {
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
serviceAddress: {
// Use street address from current faker seed
street: getDefaultTestData().customerDetails!.address.street,
street: "5050 Silver Oak Dr",
city: 'Rosedale',
state: 'MD',
postalCode: '21237',

4
playwright-tests/tests/alert-validation/alert0007_VinNotFound.ts
View file

@ -75,9 +75,9 @@ const lookupTypesToTest: LookupTestCase[] = [
},
customerDetails: {
address: {
street: '4076 Spectacle Dr',
street: '4076 Spectacle Drive',
city: 'Columbus',
state: 'Ohio',
state: 'OH',
postalCode: '59261',
country: 'United States'
}

6
src/App.vue
View file

@ -7,6 +7,8 @@
</router-view>
<funnelFooter />
<loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
<salesforceWebchat />
<sierra-webchat />
</template>
<script>
@ -14,6 +16,8 @@ import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper"
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer.vue";
import salesforceWebchat from "./digital-components/salesforce-webchat/salesforce-webchat.vue";
import sierraWebchat from "./digital-components/sierra-webchat/sierra-webchat.vue";
export default {
name: "app",
@ -35,6 +39,8 @@ export default {
components: {
loadingModal,
funnelFooter,
salesforceWebchat,
sierraWebchat,
},
mounted() {
showFmgLoadingModal(true);

BIN
src/assets/img/salesforce-webchat/avatar_webchat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 503 B

BIN
src/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 622 B

BIN
src/assets/img/salesforce-webchat/safelite_logo_webchat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

15
src/digital-components/date-picker/date-picker.vue
View file

@ -859,7 +859,7 @@ export default {
}
.calendar-grid-container {
margin: 0 auto 1rem auto;
max-width: 400px;
max-width: 360px;
position: relative;
transition:
height ease 2s,
@ -869,9 +869,6 @@ export default {
justify-content: center;
align-items: center;
padding: 0;
@include media-breakpoint-up(md) {
padding: 0 0.75rem;
}
opacity: 1;
.grid-item {
@ -1004,6 +1001,7 @@ export default {
min-width: 2.5rem;
width: 2.5rem;
height: 2.5rem;
border: 2px solid transparent;
span {
&.small {
@ -1083,7 +1081,7 @@ export default {
border-radius: 50%;
background-color: $black;
position: absolute;
top: 1.875rem;
top: 1.75rem;
}
.first-day {
color: $blue;
@ -1280,6 +1278,13 @@ export default {
}
}
}
&.selectable-day.current-day {
label {
&:after {
display: none;
}
}
}
}
}
}

44
src/digital-components/salesforce-webchat/salesforce-helper-dev.js
View file

@ -1,24 +1,47 @@
/* eslint-disable */
function setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
) {
modifyEmbeddedSvcCallback();
embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
embedded_svc.addEventHandler("afterDestroy", onWebchatCloseCallback);
}
/*
The code below is generated from salesforce but modified in the following ways:
* Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
* CSS is not copied in
* First <script> tag loading in the file from the CDN is not copied in
* The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
and the wrapper exported function `initializeSalesforceWebChatForDev`
* Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForDev
method and add a call to setupCustomSettings before the 'embedded_svc.init()' method is called
Actual call to paste in:
setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
);
*/
export function initializeSalesforceWebchatForDev() {
export function initializeSalesforceWebchatForDev(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
) {
var initESW = function (gslbBaseURL) {
let embedded_svc = window.embedded_svc;
embedded_svc.settings.displayHelpButton = true; //Or false
embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
//embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
//embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
//embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
//embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
// Settings for Chat
//embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
// Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
@ -31,6 +54,13 @@ export function initializeSalesforceWebchatForDev() {
embedded_svc.settings.enabledFeatures = ["LiveAgent"];
embedded_svc.settings.entryFeature = "LiveAgent";
setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
);
embedded_svc.init(
"https://safelite2--dev.sandbox.my.salesforce.com",
"https://safelite2--dev.sandbox.my.salesforce-sites.com/chat",

40
src/digital-components/salesforce-webchat/salesforce-helper-prod.js
View file

@ -1,13 +1,40 @@
/* eslint-disable */
function setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
) {
modifyEmbeddedSvcCallback();
embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
embedded_svc.addEventHandler("afterDestroy", onWebchatCloseCallback);
}
/*
The code below is generated from salesforce but modified in the following ways:
* Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
* CSS is not copied in
* First <script> tag loading in the file from the CDN is not copied in
* The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
and the wrapper exported function `initializeSalesforceWebChatForProd`
* Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForDev
method and add a call to setupCustomSettings before the 'embedded_svc.init()' method is called
Actual call to paste in:
setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
);
*/
export function initializeSalesforceWebchatForProd(embedded_svc) {
export function initializeSalesforceWebchatForProd(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
) {
var initESW = function (gslbBaseURL) {
let embedded_svc = window.embedded_svc;
embedded_svc.settings.displayHelpButton = true; //Or false
@ -31,6 +58,13 @@ export function initializeSalesforceWebchatForProd(embedded_svc) {
embedded_svc.settings.enabledFeatures = ["LiveAgent"];
embedded_svc.settings.entryFeature = "LiveAgent";
setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
);
embedded_svc.init(
"https://safelite2.my.salesforce.com",
"https://safelite2.my.salesforce-sites.com/chat",

42
src/digital-components/salesforce-webchat/salesforce-helper-qa.js
View file

@ -1,16 +1,41 @@
/* eslint-disable */
function setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
) {
modifyEmbeddedSvcCallback();
embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
embedded_svc.addEventHandler("afterDestroy", onWebchatCloseCallback);
}
/*
The code below is generated from salesforce but modified in the following ways:
* Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
* CSS is not copied in
* First <script> tag loading in the file from the CDN is not copied in
* The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
and the wrapper exported function `initializeSalesforceWebChatForQa`
* Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForQa
method and add a call to setupCustomSettings before the 'embedded_svc.init()' method is called
Actual call to paste in:
setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
);
*/
export function initializeSalesforceWebchatForQa() {
export function initializeSalesforceWebchatForQa(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
) {
var initESW = function (gslbBaseURL) {
let embedded_svc = window.embedded_svc;
embedded_svc.settings.displayHelpButton = true; //Or false
embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
@ -32,6 +57,13 @@ export function initializeSalesforceWebchatForQa() {
embedded_svc.settings.enabledFeatures = ["LiveAgent"];
embedded_svc.settings.entryFeature = "LiveAgent";
setupCustomSettings(
modifyEmbeddedSvcCallback,
finishedLoadingCallback,
onWebchatOpenCallback,
onWebchatCloseCallback
);
embedded_svc.init(
"https://safelite2--safeliteua.sandbox.my.salesforce.com",
"https://safelite2--safeliteua.sandbox.my.salesforce-sites.com/chat",

26
src/digital-components/salesforce-webchat/salesforce-helper.spec.js
View file

@ -2,12 +2,6 @@ import * as salesforceWebchatHelperdev from "./salesforce-helper-dev";
import * as salesforceWebchatHelperqa from "./salesforce-helper-qa";
import * as salesforceWebchatHelperprod from "./salesforce-helper-prod";
const mockEmbeddedSvc = {
settings: {},
init: jest.fn(),
testFlag: true,
};
describe("Salesforce Webchat Helper Tests", () => {
describe("Files and exposed methods exist", () => {
it("exposes initialization methods", () => {
@ -21,23 +15,5 @@ describe("Salesforce Webchat Helper Tests", () => {
"function"
);
});
}),
describe("Custom code added correctly", () => {
it("defines a local variable 'embedded_svc' in the initESW method", () => {
mockEmbeddedSvc.testFlag = "dev";
window.embedded_svc = mockEmbeddedSvc;
salesforceWebchatHelperdev.initializeSalesforceWebchatForDev();
expect(embedded_svc.testFlag).toBe("dev");
mockEmbeddedSvc.testFlag = "qa";
window.embedded_svc = mockEmbeddedSvc;
salesforceWebchatHelperqa.initializeSalesforceWebchatForQa();
expect(embedded_svc.testFlag).toBe("qa");
mockEmbeddedSvc.testFlag = "prod";
window.embedded_svc = mockEmbeddedSvc;
salesforceWebchatHelperprod.initializeSalesforceWebchatForProd();
expect(embedded_svc.testFlag).toBe("prod");
});
});
});
});

5
src/digital-components/salesforce-webchat/salesforce-webchat.spec.js
View file

@ -13,7 +13,10 @@ describe("salesforceWebchat.vue", () => {
it("has the correct default data", () => {
const wrapper = shallowMount(salesforceWebchat);
expect(wrapper.vm.$data).toEqual({});
expect(wrapper.vm.$data).toEqual({
isAgentAvailable: false,
isWebchatOpen: false,
});
});
it("has the correct default props", () => {

102
src/digital-components/salesforce-webchat/salesforce-webchat.vue
View file

@ -1,7 +1,5 @@
<template>
<span class="salesforce-webchat">
<button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
</span>
<span style="display: none"></span>
</template>
<script>
@ -10,11 +8,17 @@ import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
import { applicationConfig } from "@/constants/application-config";
import { webchatHelper } from "@/helpers/webchat-helper";
import analyticsMixin from "@/mixins/analytics-mixin";
export default {
name: "salesforceWebchat",
mixins: [analyticsMixin],
data() {
return {};
return {
isAgentAvailable: false,
isWebchatOpen: false,
};
},
props: {
hideSalesforceWebchatLaunchButton: {
@ -22,29 +26,100 @@ export default {
default: false,
},
},
setup() {
const { webchatGlobalNonpersistedState } = webchatHelper();
return { webchatGlobalNonpersistedState };
},
mounted() {
// Load in script from salesforce CDN
const script = document.createElement("script");
script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
script.onload = this.initializeSalesforceWebchat;
document.body.appendChild(script);
// Notify funnel-header about Salesforce chat open/close state
this._salesforceChatOpenObserver = new MutationObserver(() => {
const isOpen = !!document.querySelector(".embeddedServiceSidebar");
window.dispatchEvent(
new CustomEvent("salesforce-chat-visibility", { detail: { open: isOpen } })
);
});
this._salesforceChatOpenObserver.observe(document.body, {
childList: true,
subtree: true,
});
},
beforeUnmount() {
// Clean up event listeners and observers
window.removeEventListener(
"salesforce-chat-visibility",
this._handleSalesforceChatVisibility
);
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
if (this._salesforceChatOpenObserver) {
this._salesforceChatOpenObserver.disconnect();
}
},
methods: {
initializeSalesforceWebchat() {
switch (applicationConfig.CURRENT_ENVIRONMENT) {
case "Prod":
initializeSalesforceWebchatForProd();
initializeSalesforceWebchatForProd(
this.modifyEmbeddedSvcCallback,
this.finishedLoadingCallback,
this.onWebchatOpenCallback,
this.onWebchatCloseCallback
);
break;
case "QA":
case "SysTest":
initializeSalesforceWebchatForQa();
initializeSalesforceWebchatForQa(
this.modifyEmbeddedSvcCallback,
this.finishedLoadingCallback,
this.onWebchatOpenCallback,
this.onWebchatCloseCallback
);
break;
case "Dev":
case "Localhost":
initializeSalesforceWebchatForDev();
initializeSalesforceWebchatForDev(
this.modifyEmbeddedSvcCallback,
this.finishedLoadingCallback,
this.onWebchatOpenCallback,
this.onWebchatCloseCallback
);
break;
}
},
modifyEmbeddedSvcCallback() {
window.embedded_svc.settings.avatarImgURL = require("@/assets/img/salesforce-webchat/avatar_webchat.png");
window.embedded_svc.settings.prechatBackgroundImgURL = require("@/assets/img/salesforce-webchat/safelite_logo_webchat.png");
window.embedded_svc.settings.smallCompanyLogoImgURL = require("@/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png");
window.embedded_svc.settings.displayHelpButton = false;
window.embedded_svc.addEventHandler("onChatEstablished", () => {
this.pushEventForChatsToGA("support_chat", "chat_opened", "Live Agent", true);
});
},
finishedLoadingCallback(data) {
this.isAgentAvailable = data.isAgentAvailable;
this.updateShouldShowWebchatButton();
},
onWebchatOpenCallback() {
// This could be done on webchatClicked() but this eliminates some of the delay between the button disappearing and the
// prechat form opening
this.isWebchatOpen = true;
this.updateShouldShowWebchatButton();
},
onWebchatCloseCallback() {
this.isWebchatOpen = false;
this.updateShouldShowWebchatButton();
},
updateShouldShowWebchatButton() {
this.webchatGlobalNonpersistedState.showWebchatButton =
!this.hideSalesforceWebchatLaunchButton &&
this.isAgentAvailable &&
!this.isWebchatOpen;
},
},
computed: {},
components: {},
@ -52,19 +127,6 @@ export default {
</script>
<style lang="scss">
.salesforce-webchat {
.salesforce-chat-button {
width: 1.5rem;
height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
background-position: center;
border: none;
background-color: transparent;
}
}
.dockableContainer {
&.showDockableContainer {
font-family: AvertaRegular;

101
src/digital-components/sierra-webchat/sierra-webchat.spec.js Normal file
View file

@ -0,0 +1,101 @@
import { shallowMount } from "@vue/test-utils";
import sierraWebchat from "./sierra-webchat.vue";
jest.mock("@/mixins/analytics-mixin");
// Mock router for analytics-mixin
jest.mock("@/router", () => ({
currentRoute: {
value: {
name: "mockedPageName",
},
},
default: {
currentRoute: {
value: {
name: "mockedPageName",
},
},
},
}));
describe("sierraWebchat.vue", () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(sierraWebchat);
// Mock global window properties
window.sierraChat = { openChatModal: jest.fn(), closeChatModal: jest.fn() };
window.sierra = undefined;
window.SierraChat = undefined;
window.embedded_svc = {
bootstrapEmbeddedService: jest.fn(),
liveAgentAPI: { startChat: jest.fn() },
settings: {},
};
});
afterEach(() => {
wrapper.unmount();
jest.clearAllMocks();
delete window.sierraChat;
delete window.embedded_svc;
});
it("should mount the component", () => {
expect(wrapper.exists()).toBe(true);
});
it("calls openSierraChatModal when launchSierraChat is called and script is loaded", () => {
const spy = jest.spyOn(wrapper.vm, "openSierraChatModal");
// Simulate script already loaded
document.body.appendChild(document.createElement("script")).id = "sierra-chat-embed";
wrapper.vm.launchSierraChat();
expect(spy).toHaveBeenCalled();
document.getElementById("sierra-chat-embed").remove();
});
it("calls closeSierraChat when invoked", () => {
wrapper.vm.closeSierraChat();
expect(window.sierraChat.closeChatModal).toHaveBeenCalled();
});
it("dispatches sierra-chat-closed on handleSierraOnClose", () => {
const eventSpy = jest.spyOn(window, "dispatchEvent");
wrapper.vm.createSierraConfig().onClose();
expect(eventSpy).toHaveBeenCalledWith(
expect.objectContaining({ type: "sierra-chat-closed" })
);
});
it("dispatches sierra-chat-transfer on handleSierraOnTransfer", () => {
const eventSpy = jest.spyOn(window, "dispatchEvent");
const transfer = {
data: { first_name: "A", last_name: "B", email: "a@b.com", chat_summary: "summary" },
};
wrapper.vm.createSierraConfig().onTransfer(transfer);
expect(eventSpy).toHaveBeenCalledWith(
expect.objectContaining({ type: "sierra-chat-transfer" })
);
});
it("handles sierra-chat-transfer event and starts Salesforce chat with prepopulated fields", () => {
const transfer = {
data: {
first_name: "A",
last_name: "B",
email: "a@b.com",
chat_summary: "summary",
},
};
const event = new CustomEvent("sierra-chat-transfer", { detail: transfer });
window.dispatchEvent(event);
expect(window.sierraChat.closeChatModal).toHaveBeenCalled();
expect(window.embedded_svc.settings.prepopulatedPrechatFields).toEqual({
FirstName: "A",
LastName: "B",
Email: "a@b.com",
Subject: "summary",
});
expect(window.embedded_svc.liveAgentAPI.startChat).toHaveBeenCalled();
});
});

132
src/digital-components/sierra-webchat/sierra-webchat.vue Normal file
View file

@ -0,0 +1,132 @@
<template>
<div ref="sierraContainer"></div>
</template>
<script>
import analyticsMixin from "@/mixins/analytics-mixin";
export default {
name: "sierraWebchat",
mixins: [analyticsMixin],
methods: {
openSierraChatModal() {
const sierra = window.sierraChat || window.sierra || window.SierraChat;
if (sierra && typeof sierra.openChatModal === "function") {
sierra.openChatModal();
} else {
const launchLink = document.createElement("a");
launchLink.setAttribute("data-sierra-chat", "modal");
launchLink.style.display = "none";
document.body.appendChild(launchLink);
launchLink.click();
document.body.removeChild(launchLink);
}
this.pushEventForChatsToGA("support_chat", "chat_opened", "Scarlett", true);
},
createSierraConfig() {
return {
variables: { application: "funnel" },
display: "corner",
onLoad: () => this.openSierraChatModal(),
onOpen: () => {},
onClose: () => window.dispatchEvent(new CustomEvent("sierra-chat-closed")),
onTransfer: (transfer) =>
window.dispatchEvent(
new CustomEvent("sierra-chat-transfer", { detail: transfer })
),
};
},
launchSierraChat() {
window.sierraConfig = this.createSierraConfig();
// Preload CSS if not already present
if (!document.getElementById("sierra-chat-embed-css")) {
const link = document.createElement("link");
link.rel = "preload";
link.as = "style";
link.href =
"https://sierra.chat/agent/OxY5TbsBlJZsHxIBlJZsmCiQdcXfa2rePO38ZwOlx40/embed-css";
link.id = "sierra-chat-embed-css";
document.head.appendChild(link);
}
// Load script if not loaded, otherwise open modal directly
if (!document.getElementById("sierra-chat-embed")) {
const script = document.createElement("script");
script.type = "module";
script.id = "sierra-chat-embed";
script.src =
"https://sierra.chat/agent/OxY5TbsBlJZsHxIBlJZsmCiQdcXfa2rePO38ZwOlx40/embed";
document.body.appendChild(script);
} else {
this.openSierraChatModal();
}
},
triggerSierraChat() {
this.launchSierraChat();
},
closeSierraChat() {
const sierra = window.sierraChat || window.sierra || window.SierraChat;
if (sierra && typeof sierra.closeChatModal === "function") {
sierra.closeChatModal();
}
},
},
mounted() {
window.addEventListener("launch-sierra-webchat", this.triggerSierraChat);
// Listen for transfer event to close Sierra chat and open Salesforce chat
this._handleSierraTransfer = (event) => {
const sierra = window.sierraChat || window.sierra || window.SierraChat;
if (sierra && typeof sierra.closeChatModal === "function") {
sierra.closeChatModal();
}
// Pass data to Salesforce chat if available
const transfer = event.detail;
if (
window.embedded_svc &&
typeof window.embedded_svc.bootstrapEmbeddedService === "function"
) {
if (
transfer &&
transfer.data &&
transfer.data.first_name &&
transfer.data.last_name &&
transfer.data.email
) {
window.embedded_svc.settings.prepopulatedPrechatFields = {
FirstName: transfer.data.first_name,
LastName: transfer.data.last_name,
Email: transfer.data.email,
Subject: transfer.data.chat_summary, // for now passing in chat_summery in Subject. But this will be changed in future.
};
if (
window.embedded_svc.liveAgentAPI &&
typeof window.embedded_svc.liveAgentAPI.startChat === "function"
) {
window.embedded_svc.liveAgentAPI.startChat();
return;
}
}
window.embedded_svc.bootstrapEmbeddedService();
}
};
window.addEventListener("sierra-chat-transfer", this._handleSierraTransfer);
// Notify funnel-header about Sierra chat open/close state
this._sierraChatContainerObserver = new MutationObserver(() => {
const isOpen = !!document.querySelector("[data-sierra-chat-container]");
window.dispatchEvent(
new CustomEvent("sierra-chat-visibility", { detail: { open: isOpen } })
);
});
this._sierraChatContainerObserver.observe(document.body, {
childList: true,
subtree: true,
});
},
beforeUnmount() {
window.removeEventListener("launch-sierra-webchat", this.triggerSierraChat);
window.removeEventListener("sierra-chat-transfer", this._handleSierraTransfer);
if (this._sierraChatContainerObserver) {
this._sierraChatContainerObserver.disconnect();
}
},
};
</script>

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

@ -208,8 +208,9 @@ export default {
justify-content: center;
background: $blue-100;
border-radius: 3rem;
box-shadow: 0px 0px 4px 1px rgba(0, 112, 209, 1) inset;
box-shadow: inset 0px 2px 4px 0px rgba(0, 112, 209, 0.2);
font-size: 0.875rem;
border: 1px solid $blue;
.label {
position: relative;
display: inline-flex;
@ -231,7 +232,7 @@ export default {
left: -2rem;
background: $blue;
border-radius: 3rem;
box-shadow: 0px 0px 0px 1px rgba(0, 112, 209, 1) inset;
box-shadow: 0px 3px 4px 0px rgba(66, 68, 90, 0.2);
transition: transform 750ms cubic-bezier(0.02, 0.94, 0.09, 0.97);
transform: translate3d(2rem, 0, 0);
}

6
src/fmg-components/address-questions/address-questions.vue
View file

@ -452,12 +452,6 @@ export default {
this.loadGooglePlacesAutocompleteScript();
}
},
beforeUpdate() {
// It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal.
if (!this.addressField1.matches(":focus")) {
this.addressField1.focus();
}
},
unmounted() {
this.unloadAutocomplete();
},

112
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -2,7 +2,13 @@
<div class="funnel-header" v-if="imageSrc">
<div class="d-flex justify-content-between align-items-center">
<div class="button-container">
<!-- HIDDEN FOR 05.08 <salesforceWebchat hideSalesforceWebchatLaunchButton /> -->
<span class="webchat">
<button
v-show="shouldShowWebchatButton"
v-on:click="webchatClicked"
type="button"
class="chat-button"></button>
</span>
</div>
<div class="site-logo">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
@ -14,7 +20,7 @@
</div>
</div>
<div class="d-flex w-100">
<progressBar />
<progress-bar :page="$route.name" />
</div>
</div>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
@ -36,8 +42,9 @@ import alert from "@/ux-components/alert/alert";
import eventBus from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";
import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
//import salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
import { webchatHelper } from "@/helpers/webchat-helper";
import store from "@/store";
// Constants
const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
@ -47,19 +54,42 @@ export default {
data() {
return {
globalAlertMessages: [],
sierraChatOpen: false,
salesforceChatOpen: false,
isSalesforceTransferInProgress: false,
};
},
props: {
cmsWidgetName: String,
hideSalesforceWebchatLaunchButton: {
shouldHideWebchatButtonOnPage: {
type: Boolean,
default: true,
default: false,
},
},
setup() {
const { webchatGlobalNonpersistedState, launchWebchat } = webchatHelper();
return { webchatGlobalNonpersistedState, launchWebchat };
},
computed: {
imageSrc() {
return this.getCmsContent(this.cmsWidgetName, "LogoImage");
},
shouldShowWebchatButton() {
// Hide the chat icon if Sierra chat is open
if (this.sierraChatOpen) {
return false;
}
// Hide the chat icon if Salesforce chat is open or transfer is in progress
if (this.salesforceChatOpen || this.isSalesforceTransferInProgress) {
return false;
}
// Show if either Sierra is enabled or Salesforce button is available and not hidden by page
return (
(this.webchatGlobalNonpersistedState.shouldLaunchSierra ||
this.webchatGlobalNonpersistedState.showWebchatButton) &&
!this.shouldHideWebchatButtonOnPage
);
},
},
methods: {
pushGlobalAlert(alertToPush, isAutoDismissing) {
@ -74,14 +104,31 @@ export default {
}
this.globalAlertMessages.push(alertToPush);
},
webchatClicked(event) {
event.preventDefault();
this.launchWebchat();
// Only set sierraChatOpen if Sierra experiment is active
if (this.webchatGlobalNonpersistedState.shouldLaunchSierra) {
this.sierraChatOpen = true;
}
},
syncSierraExperimentFlag() {
const experiments = store.getters.applicationUser.experiments;
const sierraExp = experiments?.find(
(exp) =>
exp.universeName === "CONTENT_FMG_SierraWebchat" &&
exp.settings?.UseSierraChat === "true"
);
this.webchatGlobalNonpersistedState.shouldLaunchSierra = !!sierraExp;
},
},
components: {
alert,
menuModal,
//salesforceWebchat,
progressBar,
},
mounted() {
this.syncSierraExperimentFlag();
// Check if alert event is on the bus
const alertEvent = eventBus.readAndPopEventFromBus(
globalEvents.Categories.GLOBAL_ALERT,
@ -103,6 +150,47 @@ export default {
unknownAlertEvent.displayAlert = true;
this.globalAlertMessages.push(unknownAlertEvent);
}
// Listen for Sierra chat open/close events from sierra-webchat
this._handleSierraChatVisibility = (event) => {
this.sierraChatOpen = !!(event.detail && event.detail.open);
if (this.sierraChatOpen) {
this.isSalesforceTransferInProgress = false;
}
};
window.addEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
// Listen for Salesforce chat open/close events from salesforce-webchat
this._handleSalesforceChatVisibility = (event) => {
this.salesforceChatOpen = !!(event.detail && event.detail.open === true);
};
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatVisibility);
// Listen for transfer event to set transfer-in-progress flag
this._handleSierraToSalesforceTransfer = () => {
this.isSalesforceTransferInProgress = true;
};
window.addEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
// Reset transfer flag when Salesforce chat opens
this._handleSalesforceChatOpened = (event) => {
if (event.detail && event.detail.open === true) {
this.isSalesforceTransferInProgress = false;
this.salesforceChatOpen = true;
} else {
this.salesforceChatOpen = false;
}
};
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
},
beforeUnmount() {
window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
window.removeEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
window.removeEventListener(
"salesforce-chat-visibility",
this._handleSalesforceChatVisibility
);
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
},
};
</script>
@ -126,5 +214,17 @@ export default {
:deep(.menu-modal-container) {
display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
}
.webchat {
.chat-button {
width: 1.5rem;
height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
background-position: center;
border: none;
background-color: transparent;
}
}
}
</style>

81
src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
View file

@ -1,81 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import progressBar from "./progress-bar";
import store from "@/store";
describe("progressBar", () => {
test("progress should be 0", () => {
// Arrange
mockMixin.computed = {
pageName: () => undefined,
};
// Act
const wrapper = shallowMount(progressBar, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.progress).toBe(0);
wrapper.unmount();
});
});
describe("progressBar", () => {
test("progress should be 4%", () => {
// Arrange
mockMixin.computed = {
pageName: () => "vehicle",
};
// Act
const wrapper = shallowMount(progressBar, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.progress).toBe(4);
wrapper.unmount();
});
});
describe("progressBar", () => {
test("progress should be 48%", () => {
// Arrange
mockMixin.computed = {
pageName: () => "quote",
};
// Act
const wrapper = shallowMount(progressBar, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.progress).toBe(48);
wrapper.unmount();
});
});
describe("progressBar", () => {
test("progress should be 100%", () => {
// Arrange
mockMixin.computed = {
pageName: () => "confirmation",
};
// Act
const wrapper = shallowMount(progressBar, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.progress).toBe(100);
wrapper.unmount();
});
});
const mockMixin = {
methods: {
getProgress: jest.fn(),
},
};

68
src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js Normal file
View file

@ -0,0 +1,68 @@
import { mount } from "@vue/test-utils";
import ProgressBar from "./progress-bar.vue";
jest.mock("@/constants/progress-bar-mapper", () => ({
getProgressBarPercentage: jest.fn(),
}));
import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
describe("progress-bar.vue", () => {
beforeEach(() => {
jest.useFakeTimers();
getProgressBarPercentage.mockReset();
});
afterEach(() => {
jest.clearAllTimers();
jest.useRealTimers();
});
it("renders with correct initial progress", async () => {
getProgressBarPercentage.mockReturnValueOnce(30);
const wrapper = mount(ProgressBar, {
props: { page: "page1" },
});
// Immediately after mount, width should be lastProgress (0)
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 0%");
// Advance timer to trigger animation
jest.runAllTimers();
await wrapper.vm.$nextTick();
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
});
it("animates to new progress when page prop changes", async () => {
getProgressBarPercentage.mockReturnValueOnce(30);
const wrapper = mount(ProgressBar, {
props: { page: "page1" },
});
jest.runAllTimers();
await wrapper.vm.$nextTick();
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
getProgressBarPercentage.mockReturnValueOnce(60);
await wrapper.setProps({ page: "page2" });
// Before timer, still old value
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
jest.runAllTimers();
await wrapper.vm.$nextTick();
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 60%");
});
it("clears timeout on unmount", async () => {
getProgressBarPercentage.mockReturnValueOnce(50);
const wrapper = mount(ProgressBar, {
props: { page: "page1" },
});
const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
wrapper.unmount();
expect(clearTimeoutSpy).toHaveBeenCalled();
clearTimeoutSpy.mockRestore();
});
});
const mockMixin = {
methods: {
getProgress: jest.fn(),
},
};

65
src/fmg-components/funnel-header/progress-bar/progress-bar.vue
View file

@ -1,6 +1,6 @@
<template>
<div id="progress-bar-container">
<progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
<div class="progress-bar-outer">
<div class="progress-bar-inner" :style="progressStyle"></div>
</div>
</template>
@ -8,20 +8,69 @@
import store from "@/store";
import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
// Module-level variable to persist progress across component lifecycles
let lastProgress = 0;
export default {
name: "progressBar",
data() {},
name: "progress-bar",
props: {
page: {
type: String,
required: true,
},
},
data() {
return {
displayedProgress: lastProgress,
timeoutId: null,
};
},
watch: {
page: {
immediate: true,
handler(newPage) {
const target = getProgressBarPercentage(newPage);
if (this.timeoutId) clearTimeout(this.timeoutId);
// Animate from current value to new value
this.timeoutId = setTimeout(() => {
this.displayedProgress = target;
lastProgress = target; // Update the module-level variable
}, 150);
},
},
},
beforeUnmount() {
if (this.timeoutId) clearTimeout(this.timeoutId);
},
computed: {
progress() {
return getProgressBarPercentage(this.pageName);
progressStyle() {
return {
width: this.displayedProgress + "%",
};
},
},
};
</script>
<style lang="scss">
#progress-bar-container {
padding-top: 0.75rem;
.progress-bar-outer {
background: $blue-100;
height: 10px;
position: relative;
border-radius: 10px;
width: 100%;
margin-top: 1rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
.progress-bar-inner {
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
will-change: width;
height: 10px;
background-color: $blue;
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
}
progress {
height: 10px;

19
src/helpers/webchat-helper.js Normal file
View file

@ -0,0 +1,19 @@
import { reactive } from "vue";
// state encapsulated and managed by the composable
const webchatGlobalNonpersistedState = reactive({
showWebchatButton: false,
shouldLaunchSierra: false,
});
export const webchatHelper = () => {
function launchWebchat() {
if (webchatGlobalNonpersistedState.shouldLaunchSierra) {
window.dispatchEvent(new CustomEvent("launch-sierra-webchat")); // launches the sierra chat
} else {
window.embedded_svc.bootstrapEmbeddedService(); // launches the salesForce prechat form
}
}
return { webchatGlobalNonpersistedState, launchWebchat };
};

37
src/layouts/customer-details/customer-details.spec.js
View file

@ -1,13 +1,5 @@
import { shallowMount, mount } from "@vue/test-utils";
import CustomerDetails from "./customer-details.vue";
import TechNotes from "./tech-notes/tech-notes.vue";
import TextboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
import PhoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question.vue";
import CheckboxQuestion from "@/digital-components/checkbox-question/checkbox-question.vue";
import TextBlock from "@/digital-components/text-block/text-block.vue";
import FunnelHeader from "@/fmg-components/funnel-header/funnel-header.vue";
import FunnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header.vue";
import Navbar from "@/fmg-components/nav-bar/nav-bar.vue";
const mockMixin = {
methods: {
@ -27,18 +19,8 @@ describe("CustomerDetails.vue", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(CustomerDetails, {
wrapper = shallowMount(CustomerDetails, {
global: {
components: {
TechNotes,
TextboxQuestion,
PhoneNumberQuestion,
CheckboxQuestion,
TextBlock,
FunnelHeader,
FunnelSubHeader,
Navbar,
},
mixins: [mockMixin],
mocks: {
storeActions: mockStoreActions,
@ -60,21 +42,4 @@ describe("CustomerDetails.vue", () => {
it("Should render the CustomerDetails component", () => {
expect(wrapper.exists()).toBe(true);
});
it("Should render all child components", () => {
expect(wrapper.findComponent(TechNotes).exists()).toBe(true);
expect(wrapper.findComponent(TextboxQuestion).exists()).toBe(true);
expect(wrapper.findComponent(PhoneNumberQuestion).exists()).toBe(true);
expect(wrapper.findComponent(CheckboxQuestion).exists()).toBe(true);
expect(wrapper.findComponent(TextBlock).exists()).toBe(true);
expect(wrapper.findComponent(FunnelHeader).exists()).toBe(true);
expect(wrapper.findComponent(FunnelSubHeader).exists()).toBe(true);
expect(wrapper.findComponent(Navbar).exists()).toBe(true);
});
it("Should pass the correct props to TechNotes", () => {
const techNotes = wrapper.findComponent(TechNotes);
expect(techNotes.props("modelValue")).toBe("Initial Tech Notes");
expect(techNotes.props("textAreaLabelCopy")).toBe("Mocked CMS Content");
});
});

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

@ -57,7 +57,7 @@
@ForwardClicked="forwardButtonAction" />
<textBlock
class="mb-5"
class="mb-5 disclaimer-block"
cmsWidgetName="DisclaimerCopyWidget"
typeStyle="caption" />
</div>
@ -212,3 +212,10 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.disclaimer-block {
position: relative;
z-index: 2;
}
</style>

7
src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
View file

@ -1,6 +1,9 @@
<template>
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
<component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
<component
:is="'script'"
src="https://js.squarecdn.com/square-marketplace.js"
async></component>
<div class="my-4 alert-heading text-center">
<span v-html="afterpayHeaderCopy" />
<span class="afterpay-amount">{{ this.afterpayPrice }}</span>
@ -10,7 +13,7 @@
<a
id="afterpay-learnmore"
href="#"
data-afterpay-modal="en_US-safelite"
data-afterpay-modal="en_US"
data-bind="click:afterpayLearnMore"
class="afterpay-learn-more">
<img :src="infoIcon" alt="Info Icon" class="info-icon" />

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

@ -813,6 +813,7 @@ export default {
},
isAfterpayBreakoutDisplay() {
return (
this.showInsuranceCoverageAs !== coverageStatus.PENDING &&
(!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
this.hasSettingEqualTo(experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY, "true")
);

33
src/layouts/payment/payment.vue
View file

@ -64,7 +64,7 @@
<div class="payment-method-question">
<buttonQuestion
v-if="!isAfterpay"
v-if="showSwitchPaymentMethod"
groupName="payment-method"
buttonTypeString="payment-method-list-button"
:buttonTypeObject="paymentMethodListButton"
@ -292,6 +292,7 @@ export default {
availableVaps: [],
shouldBlockInteraction: false,
paymentMethodListButton: paymentMethodListButton,
showSwitchPaymentMethod: !this.isAfterpay(),
};
},
props: {
@ -514,12 +515,6 @@ export default {
}
return false;
},
isAfterpay() {
if (this.paymentType == "ap") {
return true;
}
return false;
},
shouldDisplayPiaCCAlert() {
return this.shouldDisplayPiaAlert(paymentMethods.CREDIT_CARD);
},
@ -828,6 +823,12 @@ export default {
this.backButtonAction();
}
if (event.data.indexOf("afterpayOpened") > -1) {
console.log(new Date() + ": Payment method afterpay selected");
this.updatePaymentMethod(paymentMethods.AFTERPAY);
this.showSwitchPaymentMethod = false;
}
if (event.data.indexOf("creditCardSubmit") > -1) {
console.log(new Date() + ": Payment method credit card selected");
this.updatePaymentMethod(paymentMethods.CREDIT_CARD);
@ -865,11 +866,6 @@ export default {
}
},
switchToAfterpay() {
this.dispatchStoreAction(
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
paymentMethods.AFTERPAY,
false
);
const iframe = this.$refs.paymentFrame;
if (iframe) {
iframe.contentWindow.postMessage("afterpay", "*");
@ -892,6 +888,12 @@ export default {
shouldDisplayPiaAlert(payMethod) {
return this.$route?.query?.piaErrorType === payMethod;
},
isAfterpay() {
if (this.paymentType == "ap") {
return true;
}
return false;
},
},
components: {
funnelHeader,
@ -915,6 +917,13 @@ export default {
background-color: red;
}
.payment-method-question {
padding: 0 1.5rem;
.question-text span {
text-align: left;
}
}
.ui-block {
position: fixed;
top: 0;

7
src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
View file

@ -1,6 +1,9 @@
<template>
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
<component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
<component
:is="'script'"
src="https://js.squarecdn.com/square-marketplace.js"
async></component>
<div
class="mx-4 my-0 alert-heading text-center"
@ -17,7 +20,7 @@
<a
id="afterpay-learnmore"
href="#"
data-afterpay-modal="en_US-safelite"
data-afterpay-modal="en_US"
data-bind="click:afterpayLearnMore">
{{ modalCopy }}
</a>

78
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -2,35 +2,14 @@
<transition name="fade" mode="out-in">
<div class="mobile-location-questions">
<div class="text-center" :id="componentId">
<label
for="mobileLocationLinkPromptId"
:aria-label="mobileLocationLinkPromptText"
class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
v-html="mobileLocationLinkPromptText"></label>
<div class="update-mobile-location-text-link">
<textLink
ref="mobileLocationLink"
id="mobileLocationLinkPromptId"
linkType="text"
:text="mobileLocationLinkText"
href="#!"
@click-event="toggleMobileLocation" />
</div>
<div v-show="errorMessage" class="row my-1 form-test-error">
<span
class="d-inline-flex small mt-0 center-error-message"
aria-atomic="true"
aria-live="polite">
{{ errorMessage }}
</span>
</div>
<textBlock
v-if="mobileFeeApplies"
:customText="mobileFeeText"
cmsWidgetName="MobileFeeDisclaimerWidget"
typeStyle="caption" />
typeStyle="caption"
class="ps-4 pe-4 mt-4" />
</div>
<div v-if="isMobileLocationOpened" class="address-questions-container">
<div v-if="this.modelValue.isMobileSelected" class="address-questions-container">
<div v-html="headerText" class="HeaderText" />
<addressQuestions
ref="addressQuestions"
@ -64,7 +43,6 @@
</template>
<script>
// Components
import textLink from "@/ux-components/text-link/text-link";
import textBlock from "@/digital-components/text-block/text-block";
import alert from "@/ux-components/alert/alert";
import addressQuestions from "@/fmg-components/address-questions/address-questions";
@ -97,7 +75,6 @@ export default {
return {
internalModel: deepClone(this.modelValue),
displayInvalidZipAlert: false,
isMobileLocationOpened: false,
displayMismatchStateAndZipAlert: false,
};
},
@ -159,15 +136,6 @@ export default {
mobileFeeApplies: Boolean,
},
computed: {
mobileLocationLinkPromptText() {
return this.getCmsContent(this.linkWidgetName, "HeaderText");
},
mobileLocationLinkText() {
if (this.isMobileAddressComplete()) {
return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
}
return this.getCmsContent(this.linkWidgetName, "BodyText");
},
mobileFeeText() {
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
@ -208,25 +176,6 @@ export default {
},
},
methods: {
isMobileAddressComplete() {
return (
this.addressModel.streetAddress &&
this.addressModel.streetAddress !== "" &&
this.addressModel.city &&
this.addressModel.city !== "" &&
this.addressModel.state &&
this.addressModel.state !== "" &&
this.addressModel.zipCode &&
this.addressModel.zipCode !== "" &&
this.internalModel.isVehicleProtected !== null
);
},
getIsMobleLocationOpened() {
if (this.isServiceAddressFromStoreAvailable) {
return false;
}
return true;
},
setMobileLocationInvalid(isFormInvalid) {
this.$emit("set-mobile-location-invalid", isFormInvalid);
},
@ -235,9 +184,11 @@ export default {
this.displayMismatchStateAndZipAlert = false;
},
async setMobileLocation() {
this.resetAlerts();
// Validate the Zip Code
if (this.internalModel.addressQuestions.zipCode === "") {
if (
this.internalModel.addressQuestions.zipCode === "" ||
this.internalModel.addressQuestions.zipCode.length !== 5
) {
this.setMobileLocationInvalid(true);
return;
}
@ -247,10 +198,12 @@ export default {
);
if (!zipCodeData.isValid) {
this.displayMismatchStateAndZipAlert = false;
this.displayInvalidZipAlert = true;
this.setMobileLocationInvalid(true);
return;
} else if (zipCodeData.state != this.internalModel.addressQuestions.state) {
this.displayInvalidZipAlert = false;
this.displayMismatchStateAndZipAlert = true;
this.setMobileLocationInvalid(true);
return;
@ -258,6 +211,9 @@ export default {
this.internalModel.addressQuestions.zipCode !==
this.modelValue.addressQuestions.zipCode
) {
//reset alerts
this.resetAlerts();
// retrieve mobile fee part
const serviceZipCode = this.internalModel.addressQuestions.zipCode;
const mobileFeePart = await getPricedMobileFeePart(
@ -292,10 +248,6 @@ export default {
}
// update the page level model
this.$emit("setMobileLocation", this.internalModel);
this.setMobileLocationInvalid(false);
},
toggleMobileLocation() {
this.isMobileLocationOpened = !this.isMobileLocationOpened;
},
},
watch: {
@ -318,7 +270,6 @@ export default {
addressQuestions,
vehicleProtectedQuestion,
textBlock,
textLink,
alert,
},
};
@ -344,14 +295,11 @@ export default {
.update-mobile-location-text-link {
white-space: pre-line;
}
.address-questions-container {
margin-top: 1rem;
}
.text-black {
color: $black;
}
.HeaderText {
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.625rem;

2
src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
View file

@ -57,7 +57,7 @@ export default {
</script>
<style lang="scss">
.modal-dialog {
.mobile-location-questions {
.question-text {
& > span {
text-align: left;

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

@ -355,6 +355,7 @@ describe("service-location.vue", () => {
zipCode: "61606",
},
isVehicleProtected: null,
isMobileSelected: false,
};
// Act
@ -468,9 +469,9 @@ describe("service-location.vue", () => {
zipCode: "43054",
},
isVehicleProtected: true,
isMobileSelected: true,
};
//wrapper.vm.closeModalAction = jest.fn();
// Act
// Trigger the event
@ -1434,6 +1435,7 @@ function setupMocks({ mountOptionsMockData = {} }) {
const wrapper = shallowMount(serviceLocation, mountOptions);
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
wrapper.vm.$refs.mobileLocationQuestions.resetAlerts = jest.fn();
wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
return { wrapper, apiPromise };
}

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

@ -174,13 +174,20 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
// DEFINE VALIDATION RULES
defineRule("mobile-location-required", (value) => {
const addressQuestionsValues = Object.values(
[
value.addressQuestions.streetAddress,
value.addressQuestions.city,
value.isVehicleProtected,
] || {}
);
const filledFields = addressQuestionsValues.filter(
(val) => val !== null && val !== undefined && val !== ""
);
if (
(!value.addressQuestions.streetAddress ||
!value.addressQuestions.city ||
!value.addressQuestions.state ||
!value.addressQuestions.zipCode ||
!value.isVehicleProtected) &&
value.isMobileSelected
value.isMobileSelected &&
filledFields.length > 0 &&
filledFields.length < addressQuestionsValues.length
) {
return errorMessages.MOBILE_LOCATION_REQUIRED;
}
@ -305,6 +312,7 @@ export default {
zipCode: this.zipCode,
},
isVehicleProtected: this.isVehicleProtected,
isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
};
},
},
@ -523,6 +531,7 @@ export default {
}
if (this.isServiceableMobile) {
this.setMobileLocation(newValue);
this.setMobileLocationInValid(false);
} else {
await getZipCodeData(newZipCode).then((zipCodeData) => {
this.serviceZipCodeQuestion = {
@ -754,13 +763,6 @@ export default {
setMobileLocationInValid(isMobileLocationInValid) {
this.isMobileAddressValid = !isMobileLocationInValid;
},
displayMobileAddressQuestion(openMobileLocation) {
var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
var isMobileAddressComplete = mobileLocationQuestionsRef.isMobileAddressComplete;
if (isMobileAddressComplete) {
mobileLocationQuestionsRef.isMobileLocationOpened = openMobileLocation;
}
},
},
watch: {
zipCode: {
@ -772,10 +774,8 @@ export default {
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
this.displayMobileAddressQuestion(true);
} else {
this.selectedProvider = new Provider();
this.displayMobileAddressQuestion(false);
}
});
}
@ -787,10 +787,18 @@ export default {
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
this.displayMobileAddressQuestion(true);
if (this.zipCode == this.getServiceZipCodeFromStore()) {
//restore mobile address from store in case user make changes to address but not commit it.
this.streetAddress = this.getServiceAddressFromStore();
this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
this.city = this.getServiceCityFromStore();
this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
} else {
this.resetMobileLocation();
}
this.$refs.mobileLocationQuestions.resetAlerts();
} else {
this.selectedProvider = new Provider();
this.displayMobileAddressQuestion(false);
}
},
},

24
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -225,6 +225,15 @@ export default {
return index;
},
async handleUpdate(selectedShopIndex = null) {
this.resetAnswers();
if (selectedShopIndex >= 3) {
await this.getNextShopsFromList(selectedShopIndex + 1);
} else {
await this.getNextShopsFromList();
await nextTick();
}
},
},
watch: {
selectedAppointmentType: {
@ -233,27 +242,16 @@ export default {
// nothing to do with this component. We could mitigate this by showing / hiding this component with v-if but that messes
// up the component initialization on page load.
async handler() {
await nextTick();
this.resetAnswers();
this.getNextShopsFromList();
this.handleUpdate();
},
},
shopProviders: {
async handler(newValue) {
this.resetAnswers();
await nextTick();
const selectedShopIndex = this.getSelectedProviderIndex(
newValue,
this.selectedProviderNumber
);
if (selectedShopIndex >= 3) {
await this.getNextShopsFromList(selectedShopIndex + 1);
} else {
await this.getNextShopsFromList();
await nextTick();
}
this.handleUpdate(selectedShopIndex);
},
},
},

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

@ -646,6 +646,9 @@ describe("vehicle-damage.vue", () => {
isRepair: null,
numberOfChips: null,
},
externalParameterState: {
isExternalParameter: false,
},
};
var windshieldSelections = wrapper.vm.getWindshieldOptionsFromStore();

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

@ -148,6 +148,13 @@ export default {
if (store.getters.externalParameterState?.isExternalParameter) {
await nextTick();
const isValid = await baseMixin.methods.isFormValid(vm.$refs.theForm);
if (
store.getters.vehicle?.vehicleSubType === "MOTOR HOME" &&
store.getters.externalParameterDamage.damageType?.toUpperCase() ===
"WINDSHIELDREPLACE"
) {
return baseMixin.methods.ResetExternalParamsAndHideModal();
}
if (isValid) {
vm.forwardButtonAction();
} else {
@ -176,6 +183,21 @@ export default {
false
);
}
const selectedGlassToReplace =
resultMap.damageOptions.windshieldOptions.availableReplacementOptions;
if (selectedGlassToReplace == damageLocationsSelected.SINGLE) {
vm.selectedWindshieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
if (
store.getters.externalParameterState.isExternalParameter &&
store.getters.externalParameterDamage.damageType !== "other"
) {
return vm.forwardButtonAction();
}
}
baseMixin.methods.ResetExternalParamsAndHideModal();
}
} else {
@ -322,9 +344,11 @@ export default {
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
if (!store.getters.externalParameterState.isExternalParameter) {
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
}
}
if (

3
src/layouts/vehicle/vehicle.vue
View file

@ -532,6 +532,9 @@ export default {
if (!closestShops || closestShops.data?.providers?.length === 0) {
this.displayNoServiceAlert = true;
if (store.getters.externalParameterState?.isExternalParameter) {
return baseMixin.methods.ResetExternalParamsAndHideModal();
}
return this.$refs.navbar.removeLoader();
}
}

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

@ -30,15 +30,16 @@ import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
import { routeData } from "@/router/constants/routes";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { Variables } from "../constants/analytics";
import router from "@/router";
export default {
methods: {
getPageName() {
return getPageNameByQueryString();
return getPageNameFromRouter();
},
async logPageView(pageEvent) {
const currentPageName = getPageNameByQueryString();
const currentPageName = getPageNameFromRouter();
await this.validateSession();
const submittedOrder = baseMixin.methods.getSubmittedOrder();
@ -71,7 +72,7 @@ export default {
},
async logCustomEvent(category, action, label, value) {
const currentPageName = getPageNameByQueryString();
const currentPageName = getPageNameFromRouter();
await this.validateSession();
const refSequenceNum =
@ -100,8 +101,15 @@ export default {
);
},
async pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
const currentPageName = getPageNameByQueryString();
async pushEventToGA(
category,
action,
label,
pushToLogApp = false,
valueToLogType = null,
value = null
) {
const currentPageName = getPageNameFromRouter();
const labelToLog = getValueToLog(label, valueToLogType);
const eventToBePushed = {
@ -109,8 +117,8 @@ export default {
category: category,
action: action,
label: labelToLog,
value: undefined,
path: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
value: value ?? undefined,
path: `/fmg/${currentPageName}`,
};
pushToDataLayerIfDefined(eventToBePushed);
@ -120,15 +128,21 @@ export default {
}
},
async pushEventForChatsToGA(category, action, label, pushToLogApp = false) {
const currentPageName = getPageNameFromRouter();
const value = `2.0_${currentPageName}`;
await this.pushEventToGA(category, action, label, pushToLogApp, null, value);
},
async pushVariableToDataLayer(data) {
pushToDataLayerIfDefined(data);
},
async pushPageViewToGA() {
const currentPageName = getPageNameByQueryString();
const currentPageName = getPageNameFromRouter();
const pageViewEvent = {
event: GaEvents.PAGE_VIEW_EVENT,
pagePath: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
pagePath: `/fmg/${currentPageName}`,
pageTitle: currentPageName,
};
@ -312,15 +326,7 @@ export default {
}
// Cash Quote or Cash Price Sub Total
if (isPricingAvailable) {
const subtotal = baseMixin.methods
.getTotalPriceOfAllLineItemsAndChildParts(combinedLineItems, false)
.toFixed(2);
payload.cashPriceSubTotal = parseFloat(subtotal);
} else {
payload.cashPriceSubTotal = "";
}
payload.cashPriceSubTotal = store.getters.order?.cashPriceSubTotal ?? "";
//unverified (in scenarios we don’t display the price)
if (
@ -798,13 +804,14 @@ function pushToDataLayerIfDefined(data) {
}
}
function getPageNameByQueryString() {
const params = new URLSearchParams(location.search);
if (params.has(queryStrings.FMG_PAGE)) {
return params.get(queryStrings.FMG_PAGE);
} else {
return "";
function getPageNameFromRouter() {
if (
router &&
router.currentRoute &&
router.currentRoute.value &&
router.currentRoute.value.name
) {
return router.currentRoute.value.name;
}
}

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

@ -151,7 +151,7 @@ describe("analyticsMixin.js", () => {
action: "action",
label: "label",
value: undefined,
path: "/fmg/?fmgPage=",
path: "/fmg/mockedPageName",
});
// Act
@ -172,7 +172,7 @@ describe("analyticsMixin.js", () => {
action: "action",
label: "33333",
value: undefined,
path: "/fmg/?fmgPage=",
path: "/fmg/mockedPageName",
});
const mockData = {
@ -211,7 +211,7 @@ describe("analyticsMixin.js", () => {
action: "action",
label: "111",
value: undefined,
path: "/fmg/?fmgPage=",
path: "/fmg/mockedPageName",
});
const mockData = {
@ -1048,3 +1048,11 @@ describe("analyticsMixin.js", () => {
});
});
});
jest.mock("@/router", () => ({
currentRoute: {
value: {
name: "mockedPageName",
},
},
}));

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

@ -13,6 +13,8 @@ import { checkPagePrerequisites } from "@/router/methods/page-prerequisites";
import { checkLogParam } from "@/helpers/debug-log-helper";
import { debugLog } from "@/helpers/debug-log-helper";
import { handleHeritageReturn } from "@/router/methods/helpers/handle-heritage-return";
import { isVirtualRoute } from "@/router/methods/helpers/is-virtual-route";
import router from "@/router";
export async function beforeEach(to, from) {
try {
@ -45,7 +47,12 @@ export async function beforeEach(to, from) {
// Block navigation if an order has been submitted.
if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
if (to.name !== FUNNEL_START_PAGE.name && to.name !== routeData.CONFIRMATION.name) {
const exceptionPages = [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;
}
}

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

@ -1,17 +1,19 @@
import analyticsMixin from "@/mixins/analytics-mixin";
import { routeData } from "@/router/constants/routes";
import router from "@/router";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
export async function bailout(errorPayload, forceRestart = false) {
if (forceRestart) {
await store.dispatch(storeActions.RESET_STATE);
deleteFunnelCookie();
}
analyticsMixin.methods.pushPageErrorToDataLayer(errorPayload);
if (forceRestart) {
router.push({
name: routeData.RESTART.name,
});
} else {
router.push({
name: routeData.ERROR.name,
});
}
router.push({
name: routeData.ERROR.name,
});
}

7
src/router/methods/helpers/is-virtual-route.js Normal file
View file

@ -0,0 +1,7 @@
import { routeData } from "@/router/constants/routes";
export function isVirtualRoute(routeName) {
const matchedRoute = Object.values(routeData).find((route) => route.name === routeName);
return matchedRoute?.virtual ?? false;
}

8
src/router/methods/route-logic/landing.js
View file

@ -3,6 +3,7 @@ import { routeData } from "@/router/constants/routes";
import { consumeReferralQuerystrings } from "@/router/methods/helpers/consume-referral-info";
import { initializeFromQueryStrings } from "@/router/methods/helpers/initialize-from-querystrings";
import { stashAllQueries } from "@/router/methods/helpers/querystring-stash";
import { queryStrings } from "@/constants/query-strings";
import store from "@/store";
export async function landingBeforeEnter(to, from) {
@ -21,9 +22,10 @@ export async function landingBeforeEnter(to, from) {
};
}
// If a session is still in memory, go to return-user.
if (store.getters.vehicle?.year > 0) {
console.log(`trying to redirect!`);
const fromHeritage = to.query[queryStrings.FROM_HERITAGE];
// If a session is still in memory and not loading a save quote, go to return-user.
if (store.getters.vehicle?.year > 0 && !fromHeritage) {
return {
name: routeData.RETURN_USER.name,
replace: true,

9
src/router/methods/route-logic/payment-method.js Normal file
View file

@ -0,0 +1,9 @@
import { routeData } from "@/router/constants/routes";
import router from "@/router";
export async function paymentMethodBeforeEnter(to, from) {
// Refresh page when navigating back from payment to avoid iframe issues.
if (from.name === routeData.PAYMENT.name) {
router.go(0);
}
}

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

@ -10,6 +10,7 @@ import { loadSessionBeforeEnter } from "@/router/methods/route-logic/load-sessio
import { autoRouteBeforeEnter } from "@/router/methods/route-logic/auto-route";
import { errorBeforeEnter } from "@/router/methods/route-logic/error";
import { restartBeforeEnter } from "@/router/methods/route-logic/restart";
import { paymentMethodBeforeEnter } from "@/router/methods/route-logic/payment-method";
export const routes = [
// Non-virtual pages.
@ -30,7 +31,7 @@ export const routes = [
createRoute(routeData.SERVICE_LOCATION),
createRoute(routeData.SCHEDULE),
createRoute(routeData.CUSTOMER_DETAILS),
createRoute(routeData.PAYMENT_METHOD),
createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),
createRoute(routeData.PAYMENT),
createRoute(routeData.PAYMENT_PIA_RETURN),
createRoute(routeData.CONFIRMATION),

24
src/store/index.js
View file

@ -55,7 +55,6 @@ import {
} from "@/helpers/recal-helper";
import { externalParameterStatus } from "@/constants/external-parameters";
import { experimentSettings } from "@/constants/experiments";
import experimentMixin from "@/mixins/experiment-mixin.js";
// Export State
const getDefaultState = () => {
@ -964,6 +963,8 @@ export const getters = {
funnelServiceState: state.order.serviceLocation.state,
funnelServiceZipCode: state.order.serviceLocation.zipCode,
funnelServiceZipCodeCtu: state.order.serviceLocation.zipCodeCtu,
funnelPolicyIsItac: state.order.policy.isItac ? "true" : "false",
funnelPolicyIsNoComp: state.order.policy.isNoComp ? "true" : "false",
funnelProviderNumber: state.order.serviceLocation.provider.providerNumber,
funnelParentAccountNumber: state.order.payment.parentAccountNumber,
funnelReferralType: state.order.payment.isInsurance ? "INSURANCE" : "CASH QUOTE",
@ -1498,7 +1499,7 @@ export const actions = {
parentAccountNumber,
}
) {
if (!pageName) {
if (!pageName || !category) {
return;
}
@ -2191,6 +2192,7 @@ export const actions = {
serverData: lineItems.serverData,
promos: lineItems.promos,
},
coverageStatus: order.payment.insuranceCoverage.coverageStatus ?? "",
},
logApiCall: true,
pageNameToLog: pageNameToLog,
@ -3629,25 +3631,25 @@ export function mapTaxedLineItemsToStoreFormat(availableLineItems, storeLineItem
export function getArrayOfAllLineItemsAndChildParts(lineItems) {
let consolidatedLineItemsArray = [];
if (lineItems.glassParts != null)
if (lineItems?.glassParts != null)
consolidatedLineItemsArray = [
...consolidatedLineItemsArray,
...getFlattenedArrayOfLineItemsWithChildParts(lineItems.glassParts),
];
if (lineItems.supportingItems != null)
if (lineItems?.supportingItems != null)
consolidatedLineItemsArray = [
...consolidatedLineItemsArray,
...getFlattenedArrayOfLineItemsWithChildParts(lineItems.supportingItems),
];
if (lineItems.vaps != null)
if (lineItems?.vaps != null)
consolidatedLineItemsArray = [
...consolidatedLineItemsArray,
...getFlattenedArrayOfLineItemsWithChildParts(lineItems.vaps),
];
if (lineItems.promos != null)
if (lineItems?.promos != null)
consolidatedLineItemsArray = [
...consolidatedLineItemsArray,
...getFlattenedArrayOfLineItemsWithChildParts(lineItems.promos),
@ -3797,7 +3799,15 @@ function supportingItemsEqual(supportingItemsA, supportingItemsB) {
// if so, make sure it's not in the past. if in the past, clear schedule info in store.
// if date not in past, then call schedule service to verify appointment is still available.
async function resetScheduleIfUnavailable(context, order, pageNameToLog) {
if (!order.schedule?.date) {
// lineItems empty can happen when a customer goes all the way through scheduling as cash but then
// switches to insurance AND also switches vehicles during policy lookup. If you call shop-time-slots
// without parts, you get 500 errors so skip the call.
const lineItems = getArrayOfAllLineItemsAndChildParts(order.lineItems);
if (!order.schedule?.date || lineItems.length === 0) {
console.log(new Date() + " no schedule date or lineItems. skip resetSchedule logic.");
console.log(new Date() + " schedule.schedule.date" + JSON.stringify(order.schedule));
console.log(new Date() + " lineItems" + JSON.stringify(order.lineItems));
return;
}

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

@ -930,6 +930,7 @@ describe("Actions", () => {
pageName: "pageName",
sessionId: "sessionId",
customEvent: customEvent,
category: "category",
shouldUseSessionId: false,
});
expect(response).toEqual({});
@ -3758,6 +3759,8 @@ describe("Getters", () => {
funnelServiceState: "OH-IO",
funnelServiceZipCode: 43215,
funnelParentAccountNumber: "999999",
funnelPolicyIsItac: "false",
funnelPolicyIsNoComp: "false",
funnelIsCoverageVerified: true,
funnelGlassParts: null,
funnelSupportingItems: null,
@ -3809,6 +3812,8 @@ describe("Getters", () => {
funnelServiceState: mockStateValues.funnelServiceState,
funnelServiceZipCode: mockStateValues.funnelServiceZipCode,
funnelParentAccountNumber: mockStateValues.funnelParentAccountNumber,
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
funnelIsCoverageVerified: mockStateValues.funnelIsCoverageVerified,
funnelOrderPartNumbers: [],
funnelOrderPartTypes: [],
@ -3839,6 +3844,8 @@ describe("Getters", () => {
funnelServiceState: "OH-IO",
funnelServiceZipCode: 43215,
funnelParentAccountNumber: "999999",
funnelPolicyIsItac: "false",
funnelPolicyIsNoComp: "false",
funnelIsCoverageVerified: true,
funnelGlassParts: [],
funnelOtherParts: [],
@ -3889,6 +3896,8 @@ describe("Getters", () => {
funnelServiceState: mockStateValues.funnelServiceState,
funnelServiceZipCode: mockStateValues.funnelServiceZipCode,
funnelParentAccountNumber: mockStateValues.funnelParentAccountNumber,
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
funnelIsCoverageVerified: mockStateValues.funnelIsCoverageVerified,
funnelOrderPartNumbers: [],
funnelOrderPartTypes: [],
@ -3919,6 +3928,8 @@ describe("Getters", () => {
serviceState: "OH-IO",
serviceZipCode: 43215,
parentAccountNumber: "999999",
funnelPolicyIsItac: "false",
funnelPolicyIsNoComp: "false",
isCoverageVerified: false,
glassParts: [
{
@ -3979,6 +3990,8 @@ describe("Getters", () => {
funnelServiceState: mockStateValues.serviceState,
funnelServiceZipCode: mockStateValues.serviceZipCode,
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
funnelOrderPartNumbers: ["WINDSHIELDPARTNUMBER"],
funnelOrderPartTypes: ["ADAS, maybe"],
@ -4009,6 +4022,8 @@ describe("Getters", () => {
serviceState: "OH-IO",
serviceZipCode: 43215,
parentAccountNumber: "999999",
funnelPolicyIsItac: "false",
funnelPolicyIsNoComp: "false",
isCoverageVerified: false,
glassParts: [
{
@ -4084,6 +4099,8 @@ describe("Getters", () => {
funnelServiceState: mockStateValues.serviceState,
funnelServiceZipCode: mockStateValues.serviceZipCode,
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
funnelOrderPartNumbers: ["WINDSHIELDPARTNUMBER"],
funnelOrderPartTypes: ["ADAS, maybe"],
@ -4114,6 +4131,8 @@ describe("Getters", () => {
serviceState: "OH-IO",
serviceZipCode: 43215,
parentAccountNumber: "999999",
funnelPolicyIsItac: "false",
funnelPolicyIsNoComp: "false",
isCoverageVerified: false,
glassParts: [
{
@ -4200,6 +4219,8 @@ describe("Getters", () => {
funnelServiceState: mockStateValues.serviceState,
funnelServiceZipCode: mockStateValues.serviceZipCode,
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
funnelOrderPartNumbers: ["BACKGLASS_PN", "DRIVERGLASS_PN", "PASSENGERGLASS_PN"],
funnelOrderPartTypes: [],