Merge branch 'develop' into feature/CASH-848

jest.config.js

@@ -43,7 +43,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 66,
+      statements: 64,
     },
   },
   // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit

playwright-tests/framework/TestPages.ts

@@ -30,6 +30,7 @@ import { VerifyDetailsPage } from "../pages/VerifyDetailsPage"
 import { EndorsementsPage } from "../pages/EndorsementsPage"
 import { PolicyDriverPage } from "../pages/PolicyDriverPage"
 import { ServiceZipPage } from "../pages/ServiceZipPage"
+import { MobileDetailsPage } from "pages/MobileDetailsPage";
 
 export interface ITestPages {
     capabilityQuestionsPage: CapabilityQuestionsPage,
@@ -49,6 +50,7 @@ export interface ITestPages {
     policyVehiclesPage: PolicyVehiclesPage,
     recalibrationInfoPage: RecalibrationInfoPage,
     schedulePage: SchedulePage,
+    mobileDetailsPage: MobileDetailsPage,
     serviceLocationPage: ServiceLocationPage,
     servicePackagesPage: ServicePackagesPage,
     serviceZipPage: ServiceZipPage,
@@ -83,6 +85,7 @@ export const createTestPages: TestPagesFactory<ITestPages> = (page: Page) => {
         policyVehiclesPage: new PolicyVehiclesPage(page),
         recalibrationInfoPage: new RecalibrationInfoPage(page),
         schedulePage: new SchedulePage(page),
+        mobileDetailsPage: new MobileDetailsPage(page),
         serviceLocationPage: new ServiceLocationPage(page),
         servicePackagesPage: new ServicePackagesPage(page),
         serviceZipPage: new ServiceZipPage(page),

playwright-tests/framework/localTypes/Enums.ts

@@ -19,7 +19,8 @@ export enum ProgressBarPercentages {
     ServicePackagePage = '48%',
     InsuranceCompanyPage = '52%',
     ServiceLocationPage = '60%',
-    SchedulePage = '72%',
+    SchedulePage = '64%',
+    MobileDetailsPage = '76%',
     ContactDetailsPage = '84%',
     PaymentMethodPage = '92%',
     OrderConfirmationPage = '100%'

playwright-tests/pages/AfterpayPage.ts

@@ -28,7 +28,7 @@ export class AfterpayPage extends BasePage {
         this.expirationDateTextBox = page.getByTestId('payment-method-cardExpiry-input');
         this.cvvTextBox = page.getByTestId('payment-method-cardCvv-input');
 
-        this.confirmButton = page.getByRole('button', { name: 'Confirm' });
+        this.confirmButton = page.getByRole('button').filter({hasText: 'Confirm'});
     }
 
     async login(password: string) {
@@ -47,8 +47,6 @@ export class AfterpayPage extends BasePage {
     async executeAfterpayPayment(paymentDetails: IPaymentDetails) {
         await this.login(paymentDetails.password!);
         
-        await this.populateCardDetails(paymentDetails);
-        
         await this.confirmButton.click();
     }
 

playwright-tests/pages/BasePage.ts

@@ -103,32 +103,31 @@ export class BasePage {
     }
 
     async mockScheduleResponseForEarlyBird(customerDetails: ICustomerDetails) {
-    {
+
         const apiUrl = `https://digitalapi.${process.env['NODE_ENV']!.replace('sys', 'test').toLowerCase()}.safelite.io/schedule/api/v1/schedule/mobile-time-slots`;
         await this.page.route(apiUrl, async (route) => {
-            const response = await route.fetch();
+            const currentDate = new Date().toISOString().split('T')[0]; // e.g., "2025-07-23"
-            const responseBody = await response.json();
+            if(route.request().postDataJSON().startDate === currentDate) {
+                const response = await route.fetch();
+                const responseBody = await response.json();
 
-            
+                responseBody.days.forEach((day: any) => {
-            responseBody.days.forEach((day: any) => {
+                    day.timeSlots.forEach((slot: any) => {
-                day.timeSlots.forEach((slot: any) => {
+                        if (slot.id.includes("AM")) {
-                    if (slot.id.includes("AM")) {
+                            slot.offerPremium = true;
-                        slot.offerPremium = true;
+                        }
-                    }
+                    });
                 });
-            });
 
-            customerDetails.apptDate = responseBody.days.find((day: any) => 
+                customerDetails.apptDate = responseBody.days.find((day: any) => day.timeSlots.some((slot: any) => slot.offerPremium === true)).date || undefined;
-                day.timeSlots.some((slot: any) => slot.offerPremium === true)
-            ).date || undefined;
     
-            // Mock the response
+                // Mock the response
-            await route.fulfill({
+                await route.fulfill({
-                response,
+                    response,
-                body: JSON.stringify(responseBody),
+                    body: JSON.stringify(responseBody),
-            });
+                });
-          });
+            }
-        }        
+        });       
     }
 
     async validateProgressBar(progressPercentage: string, timeout: number = 60000) {

playwright-tests/pages/CoverageStatementPage.ts

@@ -56,7 +56,7 @@ export class CoverageStatementPage extends InsuranceBasePage {
 
         if (await unverifiedDeductibleElement.isVisible() || await this.noCompText.isVisible()) {
             // Click on continue button if unverified header is visible
-            await this.continueButton.click();
+            // await this.continueButton.click();
         }
     }
     

playwright-tests/pages/MobileDetailsPage.ts

@@ -0,0 +1,54 @@
+import { type Locator, type Page } from '@playwright/test';
+import { BasePage } from './BasePage';
+import { VehicleLookupType } from 'safelite-playwright-core';
+import { ProgressBarPercentages } from 'framework/localTypes/Enums';
+import { IVehicleDetails } from 'safelite-playwright-core';
+import { VinLookupPage } from './VinLookupPage';
+import { VehicleLookupAddressPage } from './VehicleLookupAddressPage';
+import { VehicleLookupLicensePage } from './VehicleLookupLicensePage';
+import { step } from 'framework/localTypes/Step';
+import { ITestData } from 'framework/TestData';
+import { faker } from '@faker-js/faker';
+
+export class MobileDetailsPage extends BasePage {
+    readonly page: Page;
+    readonly streetAddressInputBox: Locator;
+    readonly CityInputBox: Locator; 
+    readonly YesButton: Locator;
+    readonly NoButton: Locator;
+
+
+    constructor(page: Page) {
+        super(page);
+        this.page = page;
+        this.streetAddressInputBox = page.locator('#streetAddress');
+        this.CityInputBox = page.locator('#city');
+        this.YesButton = page.locator('label[buttonlabel="Yes"]');
+        this.NoButton = page.locator('label[buttonlabel="No"]');
+    }
+
+    async enterMobileDetails(testData: Partial<ITestData>) {
+        const { appointmentDetails, customerDetails } = testData;
+        if (appointmentDetails?.serviceAddress) {
+            await this.streetAddressInputBox.fill(appointmentDetails.serviceAddress!.street);
+            await this.CityInputBox.fill(appointmentDetails.serviceAddress!.city);
+        }
+        else 
+        {
+            console.error('ServiceLocationPage >> Please supply an address')
+        }
+        
+        if (faker.datatype.boolean()) {
+                await this.YesButton.check();
+            } else {
+                await this.NoButton.check();
+            }
+    }
+
+    @step("MobileDetailsPage >> Enter service address: ")
+    async handleMobileDetailsPage(testData: Partial<ITestData>) {
+        await this.validateProgressBar(ProgressBarPercentages.MobileDetailsPage);
+        await this.enterMobileDetails(testData);
+        await this.nextPage();
+    }
+}

playwright-tests/pages/PaymentMethodPage.ts

@@ -206,7 +206,7 @@ export class PaymentMethodPage extends BasePage {
                 break;
             case PaymentType.AfterPay:
                 await this.payInFourButton.click();
-                await this.nextPage();
+                await this.continueButton.click();
 
                 // Capture popup
                 const afterpayPopup = await browserContext.waitForEvent('page');

playwright-tests/pages/SchedulePage.ts

@@ -1,6 +1,6 @@
 import { expect, type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
-import { IAppointmentDetails } from 'safelite-playwright-core';
+import { IAppointmentDetails, ServiceLocation } from 'safelite-playwright-core';
 import { formatDate, formatTime } from 'safelite-playwright-core';
 import { AppointmentTimeslot  } from 'safelite-playwright-core';
 import { ProgressBarPercentages } from 'framework/localTypes/Enums';
@@ -10,6 +10,18 @@ import { ITestData } from 'framework/TestData';
 
 export class SchedulePage extends BasePage {
     readonly page: Page;
+    readonly inShopButton: Locator;
+    readonly mobileButton: Locator;
+    readonly RecalWarningMessage1: Locator;
+    readonly RecalWarningMessage2: Locator;
+    readonly militaryWarningMessage: Locator;
+    readonly changeZipButton: Locator;
+    readonly updateZipTextBox: Locator;
+    readonly saveZipButton: Locator;
+    readonly changeShopLocationLink: Locator;
+    readonly selectAShopOptions: Locator;
+    readonly yourSafeliteShop: Locator;
+
     readonly firstAvailableDate: Locator;
     readonly firstAvailableTime: Locator;
     readonly modalContinueButton: Locator;
@@ -18,11 +30,28 @@ export class SchedulePage extends BasePage {
     readonly viewMoreDatesLink: Locator;
     readonly appointmentDuration: Locator;
     readonly timeSlots: Locator;
+    readonly allDayDropOffButton: Locator;
+    readonly pickATimeButton: Locator;
 
     constructor(page: Page) {
         super(page);
         this.page = page;
-        this.firstAvailableDate = this.page.locator('.selectable-day').locator('nth=0');
+        
+        this.inShopButton = this.page.getByText(/In-shop/);
+        this.mobileButton = this.page.locator('label[buttonlabel="Mobile"]');
+        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./);
+        this.militaryWarningMessage = this.page.locator('[class*="widget-name-AlertMilitaryBaseZipWidget"]');
+        this.changeZipButton = this.page.locator('a:has(span.sr-only:has-text("edit zip code"))');
+        this.updateZipTextBox = this.page.locator('#serviceZipCode').filter({ visible: true });
+        this.saveZipButton = this.page.getByText('Save ZIP code', { exact: true });
+        this.changeShopLocationLink = this.page.locator(".shop-question a").filter({ hasText: "Change shop location " });
+        this.selectAShopOptions = this.page.locator('[class="shop-question"]');
+        this.yourSafeliteShop = this.page.locator("fieldset:has(#chooseShop) label");
+
+        this.allDayDropOffButton = this.page.locator("label[buttonlabel='Drop off all day']");
+        this.pickATimeButton = this.page.locator("label[buttonlabel='Pick a time']");
+        this.firstAvailableDate = this.page.locator('.selectable-day').filter({ visible: true}).locator('nth=0');
         this.firstAvailableTime = this.page.locator('label').filter({ hasText: /AM|PM/ }).locator('div').locator('nth=0');
         this.modalContinueButton = this.page.getByRole('dialog').getByRole('button', { name: 'Continue' });
         this.dropOffButton = this.page.getByText('Drop off your vehicle', { exact: true });
@@ -32,6 +61,49 @@ export class SchedulePage extends BasePage {
         this.timeSlots = this.page.locator('fieldset[aria-labelledby=\'chooseTimeSlot\'] label');
     }
 
+    async selectLocation(testData: Partial<ITestData>) {
+        const { appointmentDetails, customerDetails } = testData;
+    
+        switch(appointmentDetails?.serviceLocation) {
+            case ServiceLocation.Mobile:
+                await this.scheduleMobile(testData);
+                break;
+            case ServiceLocation.InShop:
+            case ServiceLocation.DropOff:
+                await this.scheduleInShop(appointmentDetails);
+                break;
+        }
+    }
+
+    async scheduleInShop(appointmentDetails?: IAppointmentDetails) {
+        await this.inShopButton.click();
+        if (appointmentDetails && appointmentDetails.shopAddress) {
+            const zipCodeMatch = appointmentDetails.shopAddress.match(/\b\d{5}$/);
+            if (zipCodeMatch) {
+                const zipCode = zipCodeMatch[0];
+                // Enter the ZIP code into the updateZipTextBox
+                await this.changeZipButton.click();
+                await this.page.waitForTimeout(500);
+                await this.updateZipTextBox.fill(zipCode);
+                await this.saveZipButton.click();
+            }
+
+            await this.inShopButton.click();
+            // await this.selectAShopOptions.locator(`[buttonbodycopy="${appointmentDetails.shopAddress}"]`).scrollIntoViewIfNeeded().then(() => this.selectAShopOptions.locator(`[buttonbodycopy="${appointmentDetails.shopAddress}"]`).click());
+        }
+
+        if (appointmentDetails && (appointmentDetails.shopAddress === "" || appointmentDetails.shopAddress === undefined )) {
+            appointmentDetails.shopAddress = await this.yourSafeliteShop.getAttribute("buttonbodycopy") || "";
+        }
+    }
+
+    async scheduleMobile(testData: Partial<ITestData>) {
+        const { appointmentDetails, customerDetails } = testData;
+        if (appointmentDetails?.serviceAddress) {
+            await this.mobileButton.click();
+        }
+    }
+
     async scheduleAppointment(appointmentDetails: IAppointmentDetails) {
         const formattedDate = formatDate(appointmentDetails.appointmentDate!);
         const formattedTime = formatTime(appointmentDetails.appointmentDate!);
@@ -49,26 +121,60 @@ export class SchedulePage extends BasePage {
 
     async scheduleFirstAppointment(testData: Partial<ITestData>) {
         const { appointmentDetails, customerDetails } = testData;
+        // await this.page.waitForTimeout(1000);
+        await this.page.waitForSelector('.date-picker', { state: 'visible' });
+        await this.page.locator('#date-picker-fieldset .loader').filter({visible: true}).waitFor({ state: 'hidden' });
         while (!(await this.firstAvailableDate.isVisible())) {
 
-            if (appointmentDetails?.appointmentTimeSlot == AppointmentTimeslot.EarlyBird) {
+            if (appointmentDetails?.appointmentTimeSlot === AppointmentTimeslot.EarlyBird) {
                 await this.mockScheduleResponseForEarlyBird(customerDetails!);
             }
             await this.viewMoreDatesLink.click();
         }
 
+        switch(appointmentDetails?.serviceLocation) {
+            case ServiceLocation.InShop:
+                await this.firstAvailableDate.click().then(async () => {
+                    customerDetails!.apptDate = `${await this.firstAvailableDate.getAttribute("id")}`
+                });
+                if (await this.pickATimeButton.isVisible()) {
+                    await this.pickATimeButton.click();
+                }
+                break;
+            case  ServiceLocation.DropOff:
+                const inshopAvailableDates = this.page.locator('.selectable-day').filter({ visible: true}).all();
+                    for (const inshopAvailableDate of await inshopAvailableDates) {
+                        await inshopAvailableDate.click();
+                        if (await this.allDayDropOffButton.isVisible()) {
+                            customerDetails!.apptDate = `${await inshopAvailableDate.getAttribute("id")}`;
+                            break;
+                        }
+                    }
+                break;
+            case ServiceLocation.Mobile:
+                if (appointmentDetails?.appointmentTimeSlot === AppointmentTimeslot.EarlyBird) {
+                    await this.page.locator(`.selectable-days, [id='${customerDetails?.apptDate}-mobile']`).click();
+                } else {
+                    await this.firstAvailableDate.click().then(async () => {
+                        customerDetails!.apptDate = `${await this.firstAvailableDate.getAttribute("id")}`.replace("-mobile", "");
+                    });
+                }
+            break;
+        }
+
         if (appointmentDetails?.appointmentTimeSlot == AppointmentTimeslot.EarlyBird) {
-            await this.page.locator(`.selectable-days, [id='${customerDetails?.apptDate}']`).click();
             const earlyBirdTimeSlot = this.timeSlots.filter({ hasText: "Earlybird" }).first();
             await earlyBirdTimeSlot.click().then(async () => {
                 customerDetails!.apptTime = await this.getFormattedTimeSlot(earlyBirdTimeSlot);
+            })
+        } 
+        else if (appointmentDetails?.serviceLocation == ServiceLocation.DropOff) 
+        {
+            await this.allDayDropOffButton.click().then(async () => {
+                customerDetails!.apptTime = await this.getFormattedTimeSlot(this.allDayDropOffButton);
             });
         }
         else {
-            await this.firstAvailableDate.click().then(async () => {
-                customerDetails!.apptDate = `${await this.firstAvailableDate.getAttribute("id")}`
-            });
-    
             // const timeSlots = this.timeSlots;
             const timeSlotCount = await this.timeSlots.count();
             const randomIndex = Math.floor(Math.random() * timeSlotCount);
@@ -80,7 +186,6 @@ export class SchedulePage extends BasePage {
 
         // appointmentmentDetails.serviceLocation === ServiceLocation.DropOff ? await this.dropOffButton.click() : await this.firstAvailableTime.click();
         customerDetails!.apptDuration = (await this.appointmentDuration.innerText()).replace("Duration: ", "");
-        await this.nextPage();
     }
 
     async getFormattedTimeSlot(timeSlot: Locator) {
@@ -103,8 +208,10 @@ export class SchedulePage extends BasePage {
 
     @step("SchedulePage >> Schedule appointment: ")
     async handleSchedulePage(testData: Partial<ITestData>) {
-
+        const { appointmentDetails } = testData;
         await this.validateProgressBar(ProgressBarPercentages.SchedulePage);
+        await this.selectLocation(testData);
         await this.scheduleFirstAppointment(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 'safelite-playwright-core';
+import { AppointmentTimeslot, ServicePackage, VehicleDamage } from 'safelite-playwright-core';
 import { ProgressBarPercentages } from 'framework/localTypes/Enums';
 import { PaymentMethod } from "framework/localTypes/Enums";
 import { step } from 'framework/localTypes/Step';
@@ -189,7 +189,7 @@ export class ServicePackagesPage extends BasePage {
 
     @step("ServicePackagePage >> Select Payment Method and Service Type: ")
     async handleServicePackagePage(testData: Partial<ITestData>) {
-        const { customerDetails, paymentMethod, paymentDetails, servicePackage, isCanNotRecal, isDynamicRecal, hasOemEndorsement, vehicleDamage } = testData;
+        const { customerDetails, paymentMethod, paymentDetails, servicePackage, isCanNotRecal, isDynamicRecal, hasOemEndorsement, vehicleDamage, appointmentDetails } = testData;
         
         await this.validateProgressBar(ProgressBarPercentages.ServicePackagePage);
         // Define repair damage types (vs. replacement types)
@@ -235,6 +235,10 @@ export class ServicePackagesPage extends BasePage {
         if (hasOemEndorsement) {
             await this.verifyOEMPart();
         }
+
+        if (appointmentDetails?.appointmentTimeSlot === AppointmentTimeslot.EarlyBird) {
+            await this.mockScheduleResponseForEarlyBird(customerDetails!);
+        }
     
         await this.nextPage();
     }

playwright-tests/tests/0000__M.test.ts

@@ -1,5 +1,5 @@
 import { Page } from "@playwright/test";
-import { addSmokeTagToRandomTest, Flow } from 'safelite-playwright-core';
+import { addSmokeTagToRandomTest, Flow, ServiceLocation } from 'safelite-playwright-core';
 import { ValidationOptions } from 'safelite-playwright-core';
 import heavyTruckTests from "./alert-validation/alert0001_HeavyTruck";
 import repairAndReplaceTests from "./alert-validation/alert0002_RepairAndReplace";
@@ -288,14 +288,19 @@ async function runWorkflow(page: Page, testCase: TestCase) {
     //============================= SERVICE SCHEDULING =============================
     
     // Select service location
-    let serviceLocationPage = testCase.pages.serviceLocationPage;
+    // let serviceLocationPage = testCase.pages.serviceLocationPage;
-    await serviceLocationPage.handleServiceLocationPage(testCase.testData);
+    // await serviceLocationPage.handleServiceLocationPage(testCase.testData);
 
 
     // Schedule appointment
     let schedulePage = testCase.pages.schedulePage;
     await schedulePage.handleSchedulePage(testCase.testData);
 
+    if (testCase.testData.appointmentDetails?.serviceLocation === ServiceLocation.Mobile) {
+        let mobileDetailsPage = testCase.pages.mobileDetailsPage;
+        await mobileDetailsPage.handleMobileDetailsPage(testCase.testData);
+    }
+
     // Enter contact details
     let contactDetailsPage = testCase.pages.contactDetailsPage;
     await contactDetailsPage.handleContactDetailsPage(testCase.testData);
@@ -376,12 +381,14 @@ export async function handleInsuranceFlow(testCase: TestCase) {
         // Handle scenario where user selected Cash to Insurance and needs to go back through the flow
         // right now we are choosing pay at appointment as payment method for this scenario
         if (isCashInsuranceFlow) {
-            let serviceLocationPage = testCase.pages.serviceLocationPage;
+            // Schedule appointment
-            await serviceLocationPage.nextPage();
-
-            //schedule
             let schedulePage = testCase.pages.schedulePage;
-            await schedulePage.nextPage();
+            await schedulePage.handleSchedulePage(testCase.testData);
+
+            if (testCase.testData.appointmentDetails?.serviceLocation === ServiceLocation.Mobile) {
+                let mobileDetailsPage = testCase.pages.mobileDetailsPage;
+                await mobileDetailsPage.handleMobileDetailsPage(testCase.testData);
+        }
             //customer dertails
             let contactDetailsPage = testCase.pages.contactDetailsPage;
             await contactDetailsPage.nextPage();

playwright-tests/tests/CashRepairInShopAfterPay.ts

@@ -31,7 +31,6 @@ const cashRepairInShopAfterPayData : Partial<ITestData> = {
     // Override appointment details
     appointmentDetails: {
         ...getDefaultTestData().appointmentDetails!,
-        shopAddress: "6826 Sawmill Rd, Columbus, OH 43235"
     },
     
     // Use predefined payment data

playwright-tests/tests/CashReplaceGlassPromoInshop.ts

@@ -15,7 +15,17 @@ const cashReplaceGlassPromoInshopData: Partial<ITestData> = {
 
     // CASH Client
     paymentMethod: PaymentMethod.SelfPay,
-   
+    
+    customerDetails: {
+        ...getDefaultTestData().customerDetails!,
+        address: {
+            street: '4076 Spectacle Dr',
+            city: 'Columbus',
+            state: 'Ohio',
+            postalCode: '43235',
+        }
+    },
+
     // Flag for recalibration vehicle
     isRecalVehicle: true,
    

playwright-tests/tests/CashReplaceMultiSlidingGlassDropoff.ts

@@ -34,7 +34,8 @@ const cashReplaceMultiSlidingGlassDropoffData: Partial<ITestData> = {
     // Override for drop-off service
     appointmentDetails: {
         serviceLocation: ServiceLocation.DropOff,
-        appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate
+        appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
+        shopAddress: "6826 Sawmill Rd, Columbus, OH 43235"
     },
    
     // Override vehicle details

playwright-tests/tests/CashReplaceSwitchToInsuranceProgressiveNoComp.ts

@@ -1,9 +1,10 @@
 //Imports here
 import { ITestData } from 'framework/TestData'
-import { ServiceLocation } from "safelite-playwright-core";
+import { Flow, ServiceLocation } from "safelite-playwright-core";
 import { DamageType, PartQuestionType, PaymentType } from 'safelite-playwright-core'
 import { ITestCase } from '../framework/Typedefs'
 import { getDefaultTestData, setFakerSeedFromTestName } from 'safelite-playwright-core';
+import { PaymentMethod } from 'framework/localTypes/Enums';
 
 // Set the seed for consistent data generation
 setFakerSeedFromTestName("CashReplaceSwitchToInsuranceProgressiveNoComp");
@@ -13,6 +14,10 @@ const cashReplaceSwitchToInsuranceProgressiveNoCompData: Partial<ITestData> = {
     ...getDefaultTestData(),
 
     isCashInsuranceFlow: true,
+    flow: Flow.Managed,
+
+    // CASH Client
+    paymentMethod: PaymentMethod.SelfPay,
 
     // Override customer details based on provided ZIP code
     customerDetails: {

playwright-tests/tests/CashReplaceWiperDropoff.ts

@@ -48,7 +48,8 @@ const cashReplaceWiperDropoffData: Partial<ITestData> = {
     // Override for drop-off service
     appointmentDetails: {
         serviceLocation: ServiceLocation.DropOff,
-        appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate
+        appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate,
+        shopAddress: "6826 Sawmill Rd, Columbus, OH 43235"
     },
    
     // Payment at service

src/constants/progress-bar-mapper.js

@@ -1,35 +1,35 @@
 export const pageProgressMapper = {
     //Combine progress bar slide percent and button steps
     vehicle: {
-        percent: 7,
-        step: 1,
-    },
-    "vehicle-damage": {
         percent: 10,
         step: 1,
     },
-    estimate: {
+    "vehicle-damage": {
         percent: 14,
         step: 1,
     },
-    "service-zip": {
+    estimate: {
         percent: 18,
         step: 1,
     },
+    "service-zip": {
+        percent: 22,
+        step: 1,
+    },
     "vin-lookup": {
-        percent: 18,
+        percent: 22,
         step: 1,
     },
     "license-plate-lookup": {
-        percent: 18,
+        percent: 22,
         step: 1,
     },
     "address-lookup": {
-        percent: 18,
+        percent: 22,
         step: 1,
     },
     "address-vehicles": {
-        percent: 25,
+        percent: 26,
         step: 1,
     },
     "part-questions": {
@@ -49,7 +49,7 @@ export const pageProgressMapper = {
         step: 1,
     },
     quote: {
-        percent: 39, //Must be 39
+        percent: 39, //The first Step 2 must be 39 so the animated bar lines up with the dot
         step: 2,
     },
     "insurance-company": {
@@ -61,7 +61,7 @@ export const pageProgressMapper = {
         step: 2,
     },
     schedule: {
-        percent: 70.5, //Must be 70.5
+        percent: 70.5, //The first Step 3 must be 70.5 so the animated bar lines up with the dot
         step: 3,
     },
     "mobile-details": {
@@ -73,7 +73,7 @@ export const pageProgressMapper = {
         step: 3,
     },
     "payment-method": {
-        percent: 92, //Must be 92
+        percent: 92, //The first Step 4 must be 92 so the animated bar lines up with the dot
         step: 3,
     },
     payment: {

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

@@ -7,7 +7,6 @@
             <textBlock
                 v-show="durationTextBlockCopy"
                 :customText="durationTextBlockCopy"
-                justifyText="center"
                 typeStyle="small"
                 marginTopSizeOverride="0"
                 class="duration-text-block" />
@@ -1027,6 +1026,10 @@ export default {
     display: flex;
     flex-direction: column;
 
+    .duration-text-block {
+        text-align: left;
+    }
+
     .date-picker-header {
         margin-bottom: 1.5rem;
     }
@@ -1050,7 +1053,6 @@ export default {
     }
     .calendar-grid-container {
         margin: 0 auto 1rem auto;
-        max-width: 360px;
         position: relative;
         transition:
             height ease 2s,
@@ -1188,8 +1190,6 @@ export default {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                min-width: 2.5rem;
-                width: 2.5rem;
                 height: 2.5rem;
                 border: 2px solid transparent;
 
@@ -1227,14 +1227,8 @@ export default {
             &.selectable-day {
                 label {
                     background-color: $blue-100;
-                    min-width: 2.75rem;
-                    width: 2.75rem;
                     border-radius: 50%;
                     cursor: pointer;
-                    @include media-breakpoint-up(md) {
-                        min-width: 3rem;
-                        width: 3rem;
-                    }
                     &:hover {
                         border: 2px solid $blue;
                     }
@@ -1413,18 +1407,13 @@ export default {
                 line-height: 1.2;
                 justify-content: center;
                 padding: 0.25rem;
+                margin: 0.15rem;
             }
             &.selectable-day {
                 label {
                     color: $black;
                     background-color: $blue-100;
-                    min-width: 2.75rem;
-                    width: 2.75rem;
                     border-radius: 0.25rem;
-                    @include media-breakpoint-up(md) {
-                        min-width: 3rem;
-                        width: 3rem;
-                    }
                 }
             }
             &.current-day {
@@ -1432,7 +1421,6 @@ export default {
                     font-weight: 600;
                     font-family: "UrbanistSemibold";
                     color: $black;
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
                 }
             }
         }
@@ -1443,7 +1431,6 @@ export default {
                     color: $black;
                     font-weight: 400;
                     font-family: "UrbanistSemibold";
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
 
                     &.price {
                         font-weight: 400;

src/experiment-components/donation-block.vue

@@ -317,10 +317,18 @@ export default {
         }
     }
     .custom-secondary {
-        &:hover {
+        border-radius: 0.5rem;
+        color: $blue;
+        border: 1px solid $blue;
+        &:hover,
+        &:focus,
+        &:active {
             color: $blue;
             background: transparent;
             border: 1px solid $blue;
+            box-shadow:
+                0 0 0 3px #ffffff,
+                0 0 0 5.5px $blue;
         }
     }
 }

src/experiment-components/service-package-radio-for-afterpay.vue

@@ -218,14 +218,17 @@ export default {
 
                 &.has-subheader {
                     & > .package-specs {
-                        & > div:first-of-type {
+                        display: inline-flex;
-                            display: flex;
+                        @include media-breakpoint-up(md) {
+                            & > div:first-of-type {
+                                display: flex;
+                            }
                         }
                     }
                 }
 
                 &.has-package-discount {
-                    min-height: 150px;
+                    min-height: 170px;
                 }
 
                 &:before {
@@ -267,10 +270,6 @@ export default {
                 + .package-label {
                     .package-specs {
                         max-height: 1000px;
-
-                        .sub-label {
-                            background-color: $green-200;
-                        }
                     }
                 }
                 + .package-label {
@@ -281,11 +280,10 @@ export default {
                     }
                 }
                 + .package-label {
-                    background-color: $blue-100;
                     border: 1px solid $blue;
                     max-height: 500px;
                     .special-save-box {
-                        background-color: $green-200;
+                        background-color: $green-100;
                     }
                 }
                 + .package-label {
@@ -336,12 +334,16 @@ export default {
 
                 &.sub-label {
                     color: $green;
-                    background-color: $green-100;
+
-                    padding: 0.25rem 0.5rem;
+                    padding: 0.25rem 0;
-                    border-radius: 0.75rem;
                     text-transform: uppercase;
                     font-size: 0.75rem;
                     margin-left: auto;
+                    @include media-breakpoint-up(md) {
+                        background-color: $green-100;
+                        padding: 0.25rem 0.5rem;
+                        border-radius: 0.75rem;
+                    }
                 }
             }
             span {
@@ -429,14 +431,17 @@ export default {
             background-color: $green-100;
             display: flex;
             flex-direction: row;
-            margin: 0.5rem auto 1rem -1.25rem;
+            margin: 0.25rem auto 0 -1.25rem;
-            padding: 0.5rem 1rem;
+            padding: 0.25rem 1rem;
             border-radius: 0.25rem;
             span {
                 color: $green;
                 font-size: 0.875rem;
                 font-weight: 600;
             }
+            @include media-breakpoint-up(md) {
+                margin: 1rem auto 0 -1.25rem;
+            }
         }
         .pricing-info {
             color: $green;
@@ -447,6 +452,7 @@ export default {
             margin-left: 1.25rem;
             font-weight: 600;
             line-height: 20px;
+            font-size: 1.25rem;
 
             span.strikethrough-price {
                 text-decoration: line-through;

src/experiment-components/service-package-radio.vue

@@ -318,7 +318,6 @@ export default {
                     }
                 }
                 + .package-label {
-                    background-color: $blue-100;
                     border: 1px solid $blue;
                     max-height: 500px;
                     .special-save-box {

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -19,10 +19,10 @@
                             v-if="showThisQuestionChain(questionsDatum, i)"
                             :answerKey="questionsDatum.answerKey"
                             :validationRules="validationRules" />
+                        <!-- Save your progress slot -->
+                        <slot></slot>
                     </div>
 
-                    <slot></slot>
-
                     <navbar
                         ref="navbar"
                         cmsWidgetName="FunnelFooterWidget"
@@ -88,6 +88,12 @@ export default {
 </script>
 
 <style lang="scss">
+.nav-bar {
+    margin-top: 1rem;
+}
+.save-progress-modal-question {
+    margin: 2rem 0;
+}
 .questions-page {
     .question-text {
         margin-bottom: 1.5rem;

src/fmg-components/nav-bar/nav-bar.vue

@@ -14,7 +14,7 @@
                 <buttonMain
                     ref="buttonMain"
                     isPrimary
-                    :buttonText="buttonText"
+                    :buttonText="overrideButtonText || buttonText"
                     loaderColor="white"
                     :class="isForwardActionDisabled && 'form-test-invalid'"
                     :aria-disabled="isForwardActionDisabled"
@@ -28,7 +28,7 @@
             <div
                 v-if="!isBackButtonHidden"
                 class="col-auto link-col py-1 text-break"
-                :class="[buttonSize ? 'back-centered-below mt-5' : '']">
+                :class="[buttonSize ? 'mt-5' : '']">
                 <textLink
                     linkType="navigation"
                     :text="backLink"
@@ -56,6 +56,7 @@ export default {
         cmsWidgetName: String,
         buttonSize: { type: Boolean, default: false },
         isSubmitHidden: { type: Boolean, default: false },
+        overrideButtonText: String,
     },
     components: {
         textLink,
@@ -134,11 +135,6 @@ export default {
         width: 100%;
     }
 
-    .back-centered-below {
-        display: flex;
-        justify-content: center;
-    }
-
     @media only screen and (min-width: 340px) {
         .col,
         .col-auto,
@@ -147,11 +143,6 @@ export default {
             justify-content: flex-end;
         }
 
-        .back-centered-below {
-            display: flex;
-            justify-content: center;
-        }
-
         .btn-primary {
             width: auto;
         }

src/layouts/confirmation/confirmation.vue

@@ -1,15 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles position-relative">
+        <loadingModal notFullScreen ref="loadingModal" />
-            <div>
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                <div class="container-fluid pb-2">
+        <div class="container page-container-grouped-styles">
-                    <div class="row justify-content-center">
+            <div class="row">
-                        <div class="col-md-6">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                            <funnelHeader
+                    <div class="header-container">
-                                cmsWidgetName="FunnelHeaderWidget"
+                        <img :src="ScheduleConfirmationImage" />
-                                ref="funnelHeader"
+                        <span v-html="ScheduleConfirmationText"></span>
-                                hideSalesforceWebchatLaunchButton />
-                        </div>
                     </div>
                     <div class="row justify-content-center">
                         <div class="col-md-6 col-xl-4">
@@ -85,7 +83,63 @@
 
                             <hr class="mb-5" />
                         </div>
+
+                        <addToCalendar
+                            mobileWidgetName="AddToCalendar_Mobile"
+                            inShopWidgetName="AddToCalendar_InShop"
+                            dropOffWidgetName="AddToCalendar_DropOff"
+                            overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
+                            allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
+                            sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
+                            :serviceLocationFullAddress="ServiceLocationFullAddress"
+                            :providerFullAddress="ProviderFullAddress"
+                            :appointmentType="AppointmentType"
+                            :scheduleDate="ScheduleDate"
+                            :scheduleStartTime="ScheduleStartTime"
+                            :scheduleEndTime="ScheduleEndTime" />
+
+                        <div class="appointment-text" v-html="AppointmentWordingText"></div>
+
+                        <textBlock
+                            :customText="AppointmentDuration"
+                            justifyText="center"
+                            typeStyle="medium"
+                            class="duration-text-block" />
                     </div>
+
+                    <div class="mt-3" v-if="shouldDisplayFosterLove">
+                        <donationBlock
+                            cmsWidgetName="DonationWidget"
+                            v-model="donationAmount"
+                            :donationValues="donationValues"
+                            :showDonationSuccess="showDonationSuccess"
+                            :showDonationError="showDonationError"
+                            @DonationAddedEvent="addDonationToOrder"
+                            ref="donationBlock" />
+                    </div>
+
+                    <hr class="mt-5 mb-0" />
+
+                    <cart
+                        v-if="ShowCart"
+                        :damage="damageInfo"
+                        :availableVaps="vaps"
+                        :allowItemRemoval="false"
+                        v-model="lineItemsWithoutDonation"
+                        :donationCartItem="donationLineItem"
+                        :showAsPaid="isPia"
+                        servicePackageOptionsCmsName="ServicePackageTitle"
+                        :isInsurance="isInsurance"
+                        :insuranceDeductible="currentDeductible"
+                        :insuranceCompanyName="insuranceCompanyName"
+                        :showInsuranceCoverageAs="showInsuranceCoverageAs"
+                        :shouldHideRecalibration="shouldHideRecalibration"
+                        :isExpandedOnLoad="false"
+                        :isItac="isItac"
+                        :isNoComp="isNoComp"
+                        :isMSRFeeApplicable="isMSRFeeApplicable" />
+
+                    <hr class="mt-4 mb-5" />
                 </div>
             </div>
         </div>
@@ -94,7 +148,6 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import navbar from "@/fmg-components/nav-bar/nav-bar";
 import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
 import cart from "@/fmg-components/cart/cart";
 import textBlock from "@/digital-components/text-block/text-block";
@@ -620,7 +673,8 @@ export default {
 .header-container {
     display: flex;
     align-items: center;
-    padding: 1rem 0;
+    justify-content: flex-start;
+    padding: 1.5rem 0 0.5rem 0;
 
     p {
         display: inline-block;

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

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

src/layouts/mobile-details/mobile-address-questions/mobile-address-questions.vue

@@ -44,7 +44,7 @@
         </transition>
         <transition name="fade" mode="out-in">
             <div class="row mb-4" aria-live="polite">
-                <div class="col">
+                <div class="col-8">
                     <dropdownQuestion
                         customDropdownId="state"
                         cmsWidgetName="StateQuestionWidget"
@@ -56,7 +56,7 @@
                         :labelBold="labelBold"
                         :isDisabled="this.isStateDisabled" />
                 </div>
-                <div class="col">
+                <div class="col-4">
                     <textboxQuestion
                         customInputId="zipCode"
                         cmsWidgetName="ZipQuestionWidget"

src/layouts/mobile-details/mobile-details.vue

@@ -1,15 +1,15 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-            <div class="row justify-content-center">
+        <div class="container position-relative">
-                <div class="col-md-6">
+            <div class="row">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <hr class="my-3" />
+                    <textBlock cmsWidgetName="AppointmentTimeOfService" class="time-header" />
+                    <textBlock cmsWidgetName="AppointmentDateAndTime" />
+                    <hr class="my-3" />
                     <div class="mobile-location-questions">
                         <div class="address-questions-container">
                             <mobileAddressQuestions
@@ -150,8 +150,11 @@ export default {
         },
     },
     computed: {
-        headerText() {
+        AppointmentDateAndTime() {
-            return this.getCmsContent("MobileLocationModalWidget", "HeaderText");
+            return this.getCmsContent("AppointmentDateAndTime", "Text");
+        },
+        AppointmentTimeOfService() {
+            return this.getCmsContent("AppointmentDateAndTime", "Text");
         },
     },
     components: {
@@ -166,3 +169,11 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.time-header {
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+    font-weight: 600;
+    color: $black;
+}
+</style>

src/layouts/quote/quote.spec.js

@@ -963,5 +963,6 @@ function setupMocks({ customMountOptions }) {
 
     const wrapper = shallowMount(quote, mountOptions);
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.getCmsContent = jest.fn();
     return { wrapper };
 }

src/layouts/quote/quote.vue

@@ -4,7 +4,7 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container quote position-relative">
             <div class="row justify-content-center">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                <div class="col-12">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
                 </div>
             </div>
@@ -78,7 +78,10 @@
                         :isForwardActionDisabled="!meta.valid"
                         :isBackButtonHidden="shouldHideBackButton"
                         @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
+                        @ForwardClicked="forwardButtonAction"
+                        :overrideButtonText="
+                            isInsuranceSelected ? isInsuranceContinueButtonText : ''
+                        " />
 
                     <saveProgressModalQuestion
                         modalWidgetName="SaveProgressModalWidget"
@@ -567,6 +570,9 @@ export default {
         this.$refs?.servicePackage?.savePackageInfoToPageData?.();
     },
     computed: {
+        isInsuranceContinueButtonText() {
+            return this.getCmsContent("isInsuranceContinueButtonText", "Text");
+        },
         lineItemsCloneForWatcher() {
             return Object.assign({}, this.lineItems);
         },
@@ -616,7 +622,7 @@ export default {
     methods: {
         getColCount() {
             if (this.packageNumber > 2) {
-                return "col-xl-10";
+                return "col-xl-12";
             } else {
                 return "col-xl-6";
             }
@@ -927,6 +933,9 @@ export default {
 }
 
 .funnel-sub-header {
+    :deep(h5) {
+        text-align: center;
+    }
     p {
         font-size: 1rem;
     }

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue

@@ -246,7 +246,6 @@ export default {
                     }
                 }
                 + .package-label {
-                    background-color: $blue-100;
                     border: 1px solid $blue;
                     max-height: 500px;
                     .special-save-box {

src/layouts/return-user/return-user.vue

@@ -117,4 +117,10 @@ export default {
         margin-top: 14rem;
     }
 }
+:deep(.menu-modal-container) {
+    display: none;
+}
+:deep(.progress-bar-outer) {
+    opacity: 0;
+}
 </style>

src/layouts/schedule/schedule.vue

@@ -60,8 +60,8 @@
                         alertClass="alert-success" />
                 </div>
             </div>
-            <div class="row justify-content-center appointment-type">
+            <div class="row appointment-type">
-                <div class="col-md-6">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <appointmentTypeQuestion
                         v-model="appointmentTypeFromAppointmentTypeQuestion"
                         v-show="isAppointmentTypeDisplayed"
@@ -78,9 +78,9 @@
                 </div>
             </div>
             <div
-                class="row justify-content-center your-shop-location"
+                class="row your-shop-location"
                 v-if="appointmentType && appointmentType !== appointmentTypeStrings.MOBILE">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <button-question
                         class="shop-question-button"
                         ref="buttonQuestion"
@@ -91,9 +91,8 @@
                         :questionText="questionText"
                         buttonTypeString="shopListButton"
                         :buttonTypeObject="shopListButton"
-                        groupName="chooseShop"
+                        groupName="chooseShop" />
-                        textPosition="text-start" />
+                    <div>
-                    <div class="text-center">
                         <textBlock
                             v-if="mobileFeeApplies && isMobileSelected"
                             :customText="mobileFeeText"
@@ -113,8 +112,8 @@
                     <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
                 </div>
             </div>
-            <div class="row justify-content-center date-picker-wrapper">
+            <div class="row date-picker-wrapper">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
                     <datePicker
                         :currentZip="zipCode"
@@ -1169,7 +1168,7 @@ export default {
 
             if (this.preSelectedDate) this.selectedDate = this.preSelectedDate;
 
-            if (!this.selectedDate) {
+            if (!this.preSelectedDate) {
                 // if no date is preselected on load, then select the first available
                 let selectedDateMobile = this.getSelectedDateForMobile();
                 let selectedDateInshop = this.getSelectedDateForInshop();
@@ -1656,6 +1655,17 @@ export default {
                         AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) &&
                     this.selectedProvider
                 ) {
+                    this.selectedTimeSlotInfo = {
+                        timeSlot: {
+                            date: null,
+                            routeCode: null,
+                            startTime: null,
+                            endTime: null,
+                            jobMaxMinutes: null,
+                            jobMinMinutes: null,
+                        },
+                        isPremiumAppointment: null,
+                    };
                     this.lastSelectedInshopOrDropoffProvider = this.selectedProvider;
                 }
                 this.appointmentType = AppointmentTypeStrings.MOBILE;
@@ -1737,7 +1747,7 @@ export default {
 </script>
 
 <style lang="scss">
-.container-fluid {
+.container {
     &.page-schedule {
         padding: 0 1rem;
         .text-link-small {
@@ -1774,6 +1784,10 @@ export default {
             padding: 0 0.75rem;
         }
     }
+    .question-text > span {
+        display: flex;
+        justify-content: flex-start;
+    }
 }
 .shop-question-button .list-button-content {
     background: $blue-100;

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -187,10 +187,14 @@ export default {
             let appointmentTypeCmsWidgetName;
 
             if (
+                this.selectedDate == null ||
                 this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
                 this.appointmentType === AppointmentTypeStrings.IN_SHOP ||
                 this.appointmentType === AppointmentTypeStrings.DROP_OFF
             ) {
+                if (!this.selectedAnswerForTimeSlots && !this.selectedAnswerForDropOffOrInshop) {
+                    this.autoSelectTimeSlotIfOnlyOneIsAvailable();
+                }
                 return null;
                 // This is planned to be used again for drop-off
                 // Wrote this to be ready for that eventuality, is untested and no HTML work done yet
@@ -205,6 +209,10 @@ export default {
                 //         );
                 // }
             } else {
+                if (!this.selectedAnswerForTimeSlots && this.selectedRouteCode) {
+                    // Clearing selectedRouteCode if no time slot is selected
+                    this.resetSelectedTimeSlot();
+                }
                 appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
                     PREMIUM_TIME_SLOT_ID_FLAG
                 )
@@ -394,6 +402,8 @@ export default {
             this.setSelectedRouteCodeFromParent();
         },
         async setSelectedTimeSlot() {
+            this.selectedRouteCode =
+                this.selectedAnswerForTimeSlots || this.selectedAnswerForDropOffOrInshop;
             this.$emit(
                 "update:modelValue",
                 this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
@@ -483,12 +493,13 @@ export default {
         },
         autoSelectTimeSlotIfOnlyOneIsAvailable() {
             const numberOfOptions = this.timeSlotsForSelectedDate?.timeSlots?.length;
-            if (numberOfOptions === 1) {
+            if (this.appointmentType && numberOfOptions === 1) {
                 if (this.availableTimeSlots.length > 0) {
                     this.selectedAnswerForTimeSlots = this.availableTimeSlots[0].value;
                 } else {
                     this.selectedAnswerForDropOffOrInshop = this.answersForDropOffQuestion[0].value;
                 }
+                this.setSelectedTimeSlot();
             }
         },
         addPremiumFlagToInput(routeCode) {

src/layouts/vin-lookup/vin-information/vin-information.vue

@@ -57,6 +57,9 @@ export default {
         font-size: 0.875rem;
     }
     .vin-toggle {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         &:after {
             content: "";
             transition: all 0.5s ease;

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -135,7 +135,7 @@ export default {
                 outline: none;
                 box-shadow: none;
                 color: $white;
-                background: linear-gradient(84.45deg, #125b7e 0%, #3b8fb8 100%);
+                background: $blue;
                 border-radius: 0.5rem;
                 z-index: 2;
             }