Merge branch 'CASH-631' into CASH-642

Dockerfile.playwright

@@ -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 . .

playwright-tests/business-logic/types/Enums.ts

@@ -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%'
+        }
+
 
 

playwright-tests/impl/reporter/JiraWritebackReporter.ts

@@ -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,

playwright-tests/pages/BasePage.ts

@@ -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();
+            var text = await element.textContent();
-            await element.fill(value);
+            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) {
+    async validateProgressBar(progressPercentage: string, timeout: number = 60000) {
-        await this.page.locator('button .loader').waitFor({ state: 'hidden', timeout: 60000 });
+        
-        const actualProgressPercentage = await this.progressBar.getAttribute("value") || "Not Found";
+        
+        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}`);
     }
-
 }

playwright-tests/pages/CapabilityQuestionsPage.ts

@@ -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!);
 

playwright-tests/pages/ContactDetailsPage.ts

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

playwright-tests/pages/EstimatePage.ts

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

playwright-tests/pages/InsuranceCompanyPage.ts

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

playwright-tests/pages/MoldingQuestionsPage.ts

@@ -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();

playwright-tests/pages/OrderConfirmationPage.ts

@@ -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.page.waitForURL(new RegExp('(.+)confirmation'), {timeout: 60000});
-        await this.validateProgressBar("100");
+        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}`);
         });
-    }    
+    }
 }

playwright-tests/pages/PartQuestionPage.ts

@@ -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();

playwright-tests/pages/PaymentMethodPage.ts

@@ -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

playwright-tests/pages/PaypalPage.ts

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

playwright-tests/pages/SchedulePage.ts

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

playwright-tests/pages/ServiceLocationPage.ts

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

playwright-tests/pages/ServicePackagesPage.ts

@@ -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,

playwright-tests/pages/ServiceZipPage.ts

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

playwright-tests/pages/VehicleDamagePage.ts

@@ -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) {

playwright-tests/pages/VehicleLookupAddressPage.ts

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

playwright-tests/pages/VehicleLookupLicensePage.ts

@@ -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!);

playwright-tests/pages/VehiclePartsPage.ts

@@ -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();

playwright-tests/pages/VehicleSelectionPage.ts

@@ -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");
+        await this.validateProgressBar(ProgressBarPercentages.VehicleSelectionPage);
-        const { vehicleDetails, isHeavyTruck, customerDetails } = testData;
+        const { vehicleDetails } = testData;
-        const { isHeavyTruckVehicleAlert, isSplitWindshield } = testData.alertFlags || {};
+        const { isHeavyTruckVehicle, isSplitWindshield } = testData.alertFlags || {};
          
         await this.selectVehicle(vehicleDetails!);
 

playwright-tests/pages/VinLookupPage.ts

@@ -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!);

playwright-tests/pages/forms/AddressForm.ts

@@ -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) {

playwright-tests/playwright.config.ts

@@ -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('/')`. */

playwright-tests/tests/CashRepairMobileCreditCard.ts

@@ -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!,

playwright-tests/tests/CashReplaceDynamicRecalMobile.ts

@@ -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',

playwright-tests/tests/CashReplaceMultiGlassMobile.ts

@@ -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',

playwright-tests/tests/CashReplaceSafeliteCanNotRecalMobile.ts

@@ -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',

playwright-tests/tests/CashReplaceVinMobile.ts

@@ -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',

playwright-tests/tests/alert-validation/alert0007_VinNotFound.ts

@@ -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'
             }

src/App.vue

@@ -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);

src/digital-components/date-picker/date-picker.vue

@@ -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;
+                        }
+                    }
+                }
             }
         }
     }

src/digital-components/salesforce-webchat/salesforce-helper-dev.js

@@ -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
+  * Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForDev
-	  and the wrapper exported function `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",

src/digital-components/salesforce-webchat/salesforce-helper-prod.js

@@ -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
+  * Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForDev
-	  and the wrapper exported function `initializeSalesforceWebChatForProd`
+      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",

src/digital-components/salesforce-webchat/salesforce-helper-qa.js

@@ -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
+  * Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForQa
-	  and the wrapper exported function `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",

src/digital-components/salesforce-webchat/salesforce-helper.spec.js

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

src/digital-components/salesforce-webchat/salesforce-webchat.spec.js

@@ -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", () => {

src/digital-components/salesforce-webchat/salesforce-webchat.vue

@@ -1,7 +1,5 @@
 <template>
-    <span class="salesforce-webchat">
+    <span style="display: none"></span>
-        <button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
-    </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;

src/digital-components/sierra-webchat/sierra-webchat.spec.js

@@ -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();
+    });
+});

src/digital-components/sierra-webchat/sierra-webchat.vue

@@ -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>

src/experiment-components/donation-block.vue

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

src/fmg-components/address-questions/address-questions.vue

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

src/fmg-components/funnel-header/funnel-header.vue

@@ -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>

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

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

src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js

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

src/fmg-components/funnel-header/progress-bar/progress-bar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div id="progress-bar-container">
+    <div class="progress-bar-outer">
-        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
+        <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",
+    name: "progress-bar",
-    data() {},
+    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() {
+        progressStyle() {
-            return getProgressBarPercentage(this.pageName);
+            return {
+                width: this.displayedProgress + "%",
+            };
         },
     },
 };
 </script>
 <style lang="scss">
-#progress-bar-container {
+.progress-bar-outer {
-    padding-top: 0.75rem;
+    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;

src/helpers/webchat-helper.js

@@ -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 };
+};

src/layouts/customer-details/customer-details.spec.js

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

src/layouts/customer-details/customer-details.vue

@@ -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>

src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue

@@ -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" />

src/layouts/payment-method/payment-method.vue

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

src/layouts/payment/payment.vue

@@ -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;

src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue

@@ -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>

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -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;

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

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

src/layouts/service-location/service-location.spec.js

@@ -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 };
 }

src/layouts/service-location/service-location.vue

@@ -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.isMobileSelected &&
-            !value.addressQuestions.city ||
+        filledFields.length > 0 &&
-            !value.addressQuestions.state ||
+        filledFields.length < addressQuestionsValues.length
-            !value.addressQuestions.zipCode ||
-            !value.isVehicleProtected) &&
-        value.isMobileSelected
     ) {
         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);
                 }
             },
         },

src/layouts/service-location/shop-question/shop-question.vue

@@ -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.handleUpdate();
-                this.resetAnswers();
-                this.getNextShopsFromList();
             },
         },
         shopProviders: {
             async handler(newValue) {
-                this.resetAnswers();
-
-                await nextTick();
                 const selectedShopIndex = this.getSelectedProviderIndex(
                     newValue,
                     this.selectedProviderNumber
                 );
-
+                this.handleUpdate(selectedShopIndex);
-                if (selectedShopIndex >= 3) {
-                    await this.getNextShopsFromList(selectedShopIndex + 1);
-                } else {
-                    await this.getNextShopsFromList();
-                    await nextTick();
-                }
             },
         },
     },

src/layouts/vehicle-damage/vehicle-damage.spec.js

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

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -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(
+                    if (!store.getters.externalParameterState.isExternalParameter) {
-                        damageLocationsSelected.SINGLE
+                        windShieldOptions.selectedWindshieldReplaceOptions.push(
-                    );
+                            damageLocationsSelected.SINGLE
+                        );
+                    }
                 }
 
                 if (

src/layouts/vehicle/vehicle.vue

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

src/mixins/analytics-mixin.js

@@ -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) {
+        async pushEventToGA(
-            const currentPageName = getPageNameByQueryString();
+            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,
+                value: value ?? undefined,
-                path: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
+                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) {
+            payload.cashPriceSubTotal = store.getters.order?.cashPriceSubTotal ?? "";
-                const subtotal = baseMixin.methods
-                    .getTotalPriceOfAllLineItemsAndChildParts(combinedLineItems, false)
-                    .toFixed(2);
-
-                payload.cashPriceSubTotal = parseFloat(subtotal);
-            } else {
-                payload.cashPriceSubTotal = "";
-            }
 
             //unverified (in scenarios we don’t display the price)
             if (
@@ -798,13 +804,14 @@ function pushToDataLayerIfDefined(data) {
     }
 }
 
-function getPageNameByQueryString() {
+function getPageNameFromRouter() {
-    const params = new URLSearchParams(location.search);
+    if (
-
+        router &&
-    if (params.has(queryStrings.FMG_PAGE)) {
+        router.currentRoute &&
-        return params.get(queryStrings.FMG_PAGE);
+        router.currentRoute.value &&
-    } else {
+        router.currentRoute.value.name
-        return "";
+    ) {
+        return router.currentRoute.value.name;
     }
 }
 

src/mixins/analytics-mixin.spec.js

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

src/router/methods/before-each.js

@@ -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;
             }
         }

src/router/methods/error.js

@@ -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({
-        router.push({
+        name: routeData.ERROR.name,
-            name: routeData.RESTART.name,
+    });
-        });
-    } else {
-        router.push({
-            name: routeData.ERROR.name,
-        });
-    }
 }

src/router/methods/helpers/is-virtual-route.js

@@ -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;
+}

src/router/methods/route-logic/landing.js

@@ -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.
+    const fromHeritage = to.query[queryStrings.FROM_HERITAGE];
-    if (store.getters.vehicle?.year > 0) {
+
-        console.log(`trying to redirect!`);
+    // 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,

src/router/methods/route-logic/payment-method.js

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

src/router/methods/routes.js

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

src/store/index.js

@@ -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;
     }
 

src/store/store.spec.js

@@ -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: [],