Merge branch 'develop' into schedule-refactor/post-parity

azure-pipelines-automated-testing.yml

@@ -33,6 +33,7 @@ stages:
     # TODO: Change to ADO Playwright template
     - template: temp/playwright-test.yml
       parameters:
+        applicationType: 'vue'
         totalShards: ${{ variables.totalShards }}
         targetUrl: $(BASE_URL)
         dockerFileName: 'Dockerfile.playwright'

azure-pipelines.yml

@@ -31,7 +31,7 @@ resources:
           type: github
           name: Safelite/AzureDevOps
           endpoint: Safelite
-          ref: refs/tags/t5.6.41
+          ref: refs/tags/t5.7.24
 
 variables:
     - group: Digital-Infrastructure
@@ -51,19 +51,11 @@ stages:
                         displayName: Run Prettier check
 
           - stage: TestPr
-            displayName: Run Unit Tests For PullRequest
+            displayName: Run Tests For PullRequest
-            jobs:
-                - template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps
-                  parameters:
-                      nodeContainer: node
-                      npmLocation: $(Build.SourcesDirectory)
-                      testResultsFile: junit.xml
-                      summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml
-          - stage: TestPrPlaywright
-            displayName: Run Playwright Tests For PullRequest
             jobs:
                 - template: temp/playwright-test.yml
                   parameters:
+                      applicationType: 'vue'
                       totalShards: 2
                       targetUrl: $(BASE_URL)
                       dockerFileName: 'Dockerfile.playwright'
@@ -75,6 +67,12 @@ stages:
                       secrets:
                           CCIS_API_AUTH: $(CCIS_API_AUTH)
                           JIRA_API_KEY: $(JIRA_API_KEY)
+                - template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps
+                  parameters:
+                      nodeContainer: node
+                      npmLocation: $(Build.SourcesDirectory)
+                      testResultsFile: junit.xml
+                      summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml
     - ${{ else }}:
           # Dev Build/Deploy
           - stage: Dev
@@ -323,4 +321,5 @@ stages:
                   parameters:
                       dependsOn: prodBuildDeployment
                       userName: SafeliteAzureDevops
-                      userEmail: githubazuredevops@safelite.com
+                      userEmail: githubazuredevops@safelite.com
+                      environment: digitalCloud-prod

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/.env

@@ -2,7 +2,7 @@
 # Environment configuration
 
 # Environment type
-NODE_ENV="qa"
+PLAYWRIGHT_ENV="qa"
 
 # Skip content site
 SKIP_CONTENT_SITE=false

playwright-tests/.env.dev

@@ -2,7 +2,7 @@
 # Environment configuration
 
 # Environment type
-NODE_ENV="qa"
+PLAYWRIGHT_ENV="qa"
 
 # Skip content site
 SKIP_CONTENT_SITE=false
@@ -27,4 +27,3 @@ ADMIN_SERVICE_API_URL="https://issadminapi.dev.sagaws.net/iss-admin/api/v1/"
 
 # API authentication (replace with actual value when running tests)
 CCIS_API_AUTH="undefined"
-

playwright-tests/.env.example

@@ -2,7 +2,7 @@
 # Environment configuration
 
 # Environment type
-NODE_ENV="qa"
+PLAYWRIGHT_ENV="qa"
 
 # Skip content site
 SKIP_CONTENT_SITE=false

playwright-tests/README.md

@@ -260,7 +260,6 @@ ADMIN_SERVICE_API_URL= <br>
 SAUCE_USERNAME= <br>
 SAUCE_ACCESS_KEY= <br>
 
-
 ## CI/CD Integration
 The project uses Azure Pipelines for continuous integration with configurations defined in azure-pipelines.yml.
 

playwright-tests/framework/localTypes/Enums.ts

@@ -5,23 +5,23 @@ export enum PaymentMethod {
 }
 
 export enum ProgressBarPercentages {
-    VehicleSelectionPage = '4%',
+    VehicleSelectionPage = '8%',
-    VehicleDamagePage = '16%',
+    VehicleDamagePage = '11%',
-    EstimatePage = '28%',
+    EstimatePage = '18%',
-    ServiceZipPage = '32%',
+    ServiceZipPage = '22%',
-    VehicleLookupAddressPage = '32%',
+    VehicleLookupAddressPage = '22%',
-    VehicleLookupLicensePage = '32%',
+    VehicleLookupLicensePage = '22%',
-    VinLookupPage = '32%',
+    VinLookupPage = '22%',
-    PartQuestionsPage = '40%',
+    PartQuestionsPage = '30%',
-    MoldingQuestionsPage = '40%',
+    MoldingQuestionsPage = '30%',
-    CapabilityQuestionsPage = '40%',
+    CapabilityQuestionsPage = '30%',
-    VehiclePartsPage = '40%',
+    VehiclePartsPage = '30%',
-    ServicePackagePage = '48%',
+    ServicePackagePage = '62%',
     InsuranceCompanyPage = '52%',
-    ServiceLocationPage = '60%',
+    ServiceLocationPage = '76%',
-    SchedulePage = '64%',
+    SchedulePage = '76%',
     MobileDetailsPage = '76%',
     ContactDetailsPage = '84%',
-    PaymentMethodPage = '92%',
+    PaymentMethodPage = '97%',
     OrderConfirmationPage = '100%'
 }

playwright-tests/package-lock.json

@@ -22,7 +22,7 @@
         "eslint": "^9.28.0",
         "luxon": "^3.6.1",
         "ortoni-report": "^3.0.2",
-        "playwright-jira-reporter": "^1.0.4",
+        "playwright-jira-reporter": "^1.0.9",
         "safelite-playwright-core": "^1.0.26",
         "typescript": "^5.8.3"
       }
@@ -3006,9 +3006,9 @@
       }
     },
     "node_modules/playwright-jira-reporter": {
-      "version": "1.0.4",
+      "version": "1.0.9",
-      "resolved": "https://pkgs.dev.azure.com/Safelite/Digital/_packaging/DigitalQA/npm/registry/playwright-jira-reporter/-/playwright-jira-reporter-1.0.4.tgz",
+      "resolved": "https://pkgs.dev.azure.com/Safelite/Digital/_packaging/DigitalQA/npm/registry/playwright-jira-reporter/-/playwright-jira-reporter-1.0.9.tgz",
-      "integrity": "sha1-uwnLFtj3Pnq5XXMFotlfHItucAw=",
+      "integrity": "sha1-o6+EHQlQ/jY4BtWKA6gSJ5mwK6A=",
       "dev": true,
       "license": "ISC",
       "dependencies": {

playwright-tests/package.json

@@ -30,7 +30,7 @@
     "eslint": "^9.28.0",
     "luxon": "^3.6.1",
     "ortoni-report": "^3.0.2",
-    "playwright-jira-reporter": "^1.0.4",
+    "playwright-jira-reporter": "^1.0.9",
     "safelite-playwright-core": "^1.0.26",
     "typescript": "^5.8.3"
   },

playwright-tests/pages/AfterpayPage.ts

@@ -10,6 +10,8 @@ export class AfterpayPage extends BasePage {
     readonly passwordTextBox: Locator;
 
     // Card details
+    readonly paymentOptionsButton: Locator;
+    readonly continueButtonAfterpay: Locator;
     readonly cardholderNameTextBox: Locator;
     readonly cardNumberTextBox: Locator;
     readonly expirationDateTextBox: Locator;
@@ -23,6 +25,8 @@ export class AfterpayPage extends BasePage {
         this.passwordTextBox = page.getByTestId('login-password-input');
         this.submitButton = page.getByRole('button', { name: 'Continue' });
 
+        this.paymentOptionsButton = page.locator('div:has(>input[id*=\'payment-types\']) label').nth(1);
+        this.continueButtonAfterpay = page.getByRole('button').filter({hasText: 'Continue'});
         this.cardholderNameTextBox = page.getByTestId('payment-method-cardHolderName-input');
         this.cardNumberTextBox = page.getByTestId('payment-method-cardNumber-input');
         this.expirationDateTextBox = page.getByTestId('payment-method-cardExpiry-input');
@@ -46,7 +50,12 @@ export class AfterpayPage extends BasePage {
 
     async executeAfterpayPayment(paymentDetails: IPaymentDetails) {
         await this.login(paymentDetails.password!);
-        
+        await this.page.locator('div[data-testid=\'loading-icon-svg\']').filter({ visible: true}).first().waitFor({ state: 'hidden' });
+        if  (await this.paymentOptionsButton.isVisible())
+        {
+            await this.paymentOptionsButton.click();
+            await this.continueButtonAfterpay.click();
+        }
         await this.confirmButton.click();
     }
 

playwright-tests/pages/BasePage.ts

@@ -25,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-inner');
+        this.progressBar = this.page.locator('.progress-bar-outer.progress-bar-inner');
     }
     
     async nextPage() {
@@ -104,7 +104,7 @@ 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`;
+        const apiUrl = `https://digitalapi.${process.env['PLAYWRIGHT_ENV']!.replace('sys', 'test').toLowerCase()}.safelite.io/schedule/api/v1/schedule/mobile-time-slots`;
         await this.page.route(apiUrl, async (route) => {
             const currentDate = new Date().toISOString().split('T')[0]; // e.g., "2025-07-23"
             if(route.request().postDataJSON().startDate === currentDate) {
@@ -131,24 +131,24 @@ export class BasePage {
     }
 
     async validateProgressBar(progressPercentage: string, timeout: number = 60000) {
+        // This section has been commented out until progress bar work is completed for parity.
         
-        
+        // await waitUntil(async () => {
-        await waitUntil(async () => {
+        //                 let loaderElements = await this.page.locator('button .loader, .buy-loader, timeout, .modal-loader').all();
-                        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));
-                        return !(await Promise.any(loaderElements.map(el => el.isVisible())).catch(() => false));
+        //             });
-                    });
 
-        // Take a screenshot of the page before validating the progress bar
+        // // 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 });
+        // 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
+        // // Wait until the progress bar element is attached and visible
     
-        const actualProgressPercentage = await this.progressBar.evaluate(
+        // const actualProgressPercentage = await this.progressBar.evaluate(
-            async (element) => {
+        //     async (element) => {
-                await new Promise(resolve => setTimeout(resolve, 200));
+        //         await new Promise(resolve => setTimeout(resolve, 200));
-                return element.style.width || "Not Found";
+        //         return element.style.width || "Not Found";
-            }
+        //     }
-        );
+        // );
-        Soft.expect(actualProgressPercentage).toBe(progressPercentage);
+        // Soft.expect(actualProgressPercentage).toBe(progressPercentage);
-        console.log(`Progress Bar Percentage: Actual - ${actualProgressPercentage} vs Expected - ${progressPercentage}`);
+        // console.log(`Progress Bar Percentage: Actual - ${actualProgressPercentage} vs Expected - ${progressPercentage}`);
     }
 }

playwright-tests/pages/PaymentMethodPage.ts

@@ -56,7 +56,7 @@ export class PaymentMethodPage extends BasePage {
         this.payNowButton = this.page.locator('[buttonlabel="Pay now"]');
         this.payInFourButton = this.page.locator('[buttonlabel="Pay in 4 installments"]');
         this.submitButton = this.page.locator('[data-test-id="nav-bar-main-button"]');
-        this.recalibrationCheckbox = this.page.getByLabel('I understand after windshield');
+        this.recalibrationCheckbox = this.page.locator('label:has(>input[name=\'recalAckOptIn\'])');
         // this.creditCardButton = page.locator('div').filter({ hasText: /^Credit or Debit$/ }).nth(1);
         this.paymentPage = new PaymentPage(page);
         this.paypalPage = new PaypalPage(page);
@@ -101,7 +101,7 @@ export class PaymentMethodPage extends BasePage {
         let expectedAppointmentDetails = new Map<string, string[]>();
         expectedAppointmentDetails = await this.getExpectedVehicleDetails(testData, expectedAppointmentDetails);
         expectedAppointmentDetails = await this.getExpectedVehicleDamage(testData, expectedAppointmentDetails);
-        expectedAppointmentDetails = await this.expectedServicePackageDetails(testData, expectedAppointmentDetails);
+        // expectedAppointmentDetails = await this.expectedServicePackageDetails(testData, expectedAppointmentDetails);
         expectedAppointmentDetails = await this.getExpectedServiceLocation(testData, expectedAppointmentDetails);
         expectedAppointmentDetails = await this.getExpectedAppointmentDate(testData, expectedAppointmentDetails);
         expectedAppointmentDetails = await this.getExpectedCustomerDetails(testData, expectedAppointmentDetails);
@@ -403,7 +403,7 @@ l
         const { appointmentDetails } = testData;
         let serviceLocationTitle = appointmentDetails?.serviceLocation == ServiceLocation.Mobile
         ? "We're coming to you"
-        : "You're going to a Safelite shop";
+        : "You're coming to us";
         let serviceLocation: string[] = [];
 
         serviceLocation.push(
@@ -443,7 +443,7 @@ l
             customerDetails?.apptDuration ? "Estimated appointment length: " + customerDetails.apptDuration : ""
         );
 
-        expectedServicePackageDetails["Appointment date + time"] = appointmentDateText;
+        expectedServicePackageDetails["Appointment Date + Time"] = appointmentDateText;
         return expectedServicePackageDetails;
     }
 
@@ -452,7 +452,7 @@ l
         let customerDetailsText: string[] = [];
 
         customerDetailsText.push(
-            customerDetails?.firstName.toUpperCase() + " " + customerDetails?.lastName.toUpperCase(),
+            // customerDetails?.firstName.toUpperCase() + " " + customerDetails?.lastName.toUpperCase(),
             customerDetails?.email ? customerDetails?.email.toUpperCase() : "",
             customerDetails?.phoneNumber ? customerDetails?.phoneNumber : "",
             "Opted out of text message updates"

playwright-tests/pages/PaypalPage.ts

@@ -24,8 +24,8 @@ 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.payWithRadioButton = page.getByRole('button').filter({ hasText: 'Pay with' });
-        this.payButton = page.getByRole('button', { name: 'Pay $' });
+        this.payButton = page.locator('#one-time-cta');
     }
 
     async completePaypalPurchase(paymentDetails: IPaymentDetails){
@@ -45,7 +45,8 @@ export class PaypalPage extends BasePage {
             await this.passwordTextBox.fill(paymentDetails.password!);
             await this.paypalLoginButton.click();
             await this.payWithRadioButton.click();
-            await this.payButton.click();
+            await this.page.waitForTimeout(2000); // wait for 2 seconds to ensure the Pay button is clickable
+            await this.payButton.dblclick();
         }
     }
 }

playwright-tests/pages/SchedulePage.ts

@@ -17,8 +17,11 @@ export class SchedulePage extends BasePage {
     readonly militaryWarningMessage: Locator;
     readonly changeZipButton: Locator;
     readonly updateZipTextBox: Locator;
-    readonly saveZipButton: Locator;
+    readonly safeliteShopsList: Locator;
-    readonly changeShopLocationLink: Locator;
+    readonly searchButton: Locator;
+    readonly storeAddressText: Locator;
+    readonly saveLocationButton: Locator;
+    readonly moreLocationsButton: Locator;
     readonly selectAShopOptions: Locator;
     readonly yourSafeliteShop: Locator;
 
@@ -37,19 +40,22 @@ export class SchedulePage extends BasePage {
         super(page);
         this.page = page;
         
-        this.inShopButton = this.page.getByText(/In-shop/);
+        this.inShopButton = this.page.locator('label[buttonlabel="You come to our store"]');
-        this.mobileButton = this.page.locator('label[buttonlabel="Mobile"]');
+        this.mobileButton = this.page.locator('label[buttonlabel="Our mobile shop comes to you"]');
         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.safeliteShopsList = this.page.locator('fieldset:has(#chooseShop) label');
-        this.changeShopLocationLink = this.page.locator(".shop-question a").filter({ hasText: "Change shop location " });
+        this.searchButton = this.page.locator('.search-icon-button');
+        this.storeAddressText = this.page.locator('#shop-location label:not(:first-child)');
+        this.saveLocationButton = this.page.getByText('Save location', { exact: true });
+        this.moreLocationsButton = this.page.locator(".shop-question a").filter({ hasText: "More locations " });
         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.allDayDropOffButton = this.page.locator("label[buttonlabel*='Drop']");
         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');
@@ -58,7 +64,7 @@ export class SchedulePage extends BasePage {
         this.dateText = this.page.locator('label.modal-title');
         this.viewMoreDatesLink = this.page.getByText(/View more dates/).first();
         this.appointmentDuration = this.page.locator('.duration-text-block');
-        this.timeSlots = this.page.locator('fieldset[aria-labelledby=\'chooseTimeSlot\'] label');
+        this.timeSlots = this.page.locator('fieldset:has(>legend#chooseTimeSlot) label').filter({ visible: true});
     }
 
     async selectLocation(testData: Partial<ITestData>) {
@@ -76,24 +82,36 @@ export class SchedulePage extends BasePage {
     }
 
     async scheduleInShop(appointmentDetails?: IAppointmentDetails) {
-        await this.inShopButton.click();
+
+        await this.inShopButton.isVisible() ? await this.inShopButton.click() : null;
         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.moreLocationsButton.click();
                 await this.page.waitForTimeout(500);
                 await this.updateZipTextBox.fill(zipCode);
-                await this.saveZipButton.click();
+                await this.searchButton.click().then( async() => await this.page.locator('loader-wrapper').waitFor({state: 'hidden'}));
+                await this.safeliteShopsList.first().click();
+                // Click the save location button
+                await this.saveLocationButton.click();
             }
 
-            await this.inShopButton.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") || "";
+            appointmentDetails.shopAddress = '';
+            await this.storeAddressText.first().waitFor({ state: 'visible' });
+            const elements = await this.storeAddressText.all();
+            
+            for (let element of elements) {
+                let addressLine = await element.textContent() || "";
+                appointmentDetails.shopAddress += addressLine + ", "
+            };
+            appointmentDetails.shopAddress = appointmentDetails.shopAddress?.slice(0, -2);
         }
     }
 
@@ -145,6 +163,7 @@ export class SchedulePage extends BasePage {
                 const inshopAvailableDates = this.page.locator('.selectable-day').filter({ visible: true}).all();
                     for (const inshopAvailableDate of await inshopAvailableDates) {
                         await inshopAvailableDate.click();
+                        await this.page.waitForTimeout(500);
                         if (await this.allDayDropOffButton.isVisible()) {
                             customerDetails!.apptDate = `${await inshopAvailableDate.getAttribute("id")}`;
                             break;
@@ -185,13 +204,13 @@ 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: ", "");
+        customerDetails!.apptDuration = (await this.appointmentDuration.innerText()).replace("Your service will take approximately ", "").replace("Duration: ", "");
     }
 
-    async getFormattedTimeSlot(timeSlot: Locator) {
+    async getFormattedTimeSlot(timeSlot: Locator) {  
         const selectedTimeSlot = await timeSlot.innerText();
         let formattedTimeSlot: string = "";
-        if (selectedTimeSlot.toLowerCase().includes("drop off"))
+        if (selectedTimeSlot.toLowerCase().includes("drop"))
         {
             formattedTimeSlot = selectedTimeSlot.includes("overnight") ? "drop off by 5:30 pm on the night of your scheduled appointment. Pick-up time dependent on shop schedule" : "drop off before 9:30 AM";
         }

playwright-tests/pages/ServicePackagesPage.ts

@@ -37,7 +37,7 @@ export class ServicePackagesPage extends BasePage {
         this.iHavePromoCodeButton = this.page.getByRole('link', { name: 'I have a promo code' });
         this.skipQuoteEmailButton = this.page.getByRole('button', { name: 'Skip' });
         this.emailInput = this.page.getByRole('textbox', { name: 'Enter your email address' });
-        this.getMyQuoteButton = this.page.getByRole('button', { name: 'Get my quote' });
+        this.getMyQuoteButton = this.page.getByRole('button', { name: 'Send' });
         this.closeButton = this.page. getByRole('dialog').locator('button').filter({ hasText: 'Close' });
         this.promoCodeTextbox = this.page.getByLabel('Enter a promo code');
         this.applyPromoButton = this.page.getByRole('button', { name: 'Apply promo code' });

playwright-tests/pages/VehicleDamagePage.ts

@@ -39,9 +39,9 @@ export class VehicleDamagePage extends BasePage {
         super(page);
         this.page = page;
         this.windshieldChkBox = this.page.locator('[buttonlabel="Windshield"]');
-        this.crackButton = this.page.locator('[buttonlabel="Crack"]');
+        this.crackButton = this.page.locator('[buttonlabelsubcopy="Replace my windshield"]');
-        this.chipButton = this.page.locator('[buttonlabel="Chip(s)"]');
+        this.chipButton = this.page.locator('[buttonlabelsubcopy="Repair my windshield"]');
-        this.sideDoorButton = this.page.locator('[buttonlabel="Side door"]');
+        this.sideDoorButton = this.page.locator('[buttonlabel="Side window"]');
         this.driverSideButton = this.page.locator('[buttonlabel="Driver side"]');
         this.passengerSideButton = this.page.locator('[buttonlabel="Passenger side"]');
         this.driverQuarterPanelChkBox = this.page.locator('[aria-labelledby="driverSideOptions"]').locator('[buttonlabel="Quarter panel"]');

playwright-tests/playwright.config.ts

@@ -9,7 +9,7 @@ if (!process.env.CI) {
   // Environment variables are present in CI environment, no need to read from file
   const basePath = __dirname; // This gets the directory where the config file is located
   
-  if (process.env.NODE_ENV == 'undefined' || process.env.NODE_ENV == null) {
+  if (process.env.PLAYWRIGHT_ENV == 'undefined' || process.env.PLAYWRIGHT_ENV == null) {
     dotenv.config({ 
       path: path.join(basePath, '.env.dev'), 
       example: path.join(basePath, '.env.example') 
@@ -17,7 +17,7 @@ if (!process.env.CI) {
   }
   else {
     dotenv.config({ 
-      path: path.join(basePath, `.env.${process.env.NODE_ENV}`), 
+      path: path.join(basePath, `.env.${process.env.PLAYWRIGHT_ENV}`), 
       example: path.join(basePath, '.env.example') 
     });
   }
@@ -42,7 +42,7 @@ const ortoniReportConfig: OrtoniReportConfig = {
   filename: `ortoni_report_${formatDateForFilename(new Date())}.html`,
   showProject: false,
   projectName: "FMG-Nextgen-Playwright-Report",
-  testType: `E2E- Environment: ${process.env.NODE_ENV} `,
+  testType: `E2E- Environment: ${process.env.PLAYWRIGHT_ENV} `,
   preferredTheme: "light",
   base64Image: true,
 }

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

@@ -291,7 +291,6 @@ async function runWorkflow(page: Page, testCase: TestCase) {
     // let serviceLocationPage = testCase.pages.serviceLocationPage;
     // await serviceLocationPage.handleServiceLocationPage(testCase.testData);
 
-
     // Schedule appointment
     let schedulePage = testCase.pages.schedulePage;
     await schedulePage.handleSchedulePage(testCase.testData);

playwright-tests/tests/CashRepairMobileCreditCard.ts

@@ -55,7 +55,7 @@ const cashRepairMobileCCTests: ITestCase[] = [];
 
 const tc = {
     name: `CashRepairMobileCreditCard`,
-    tags: ['@E2E','@CashRepairMobileCreditCard', '@test_report', '@CASH'],
+    tags: ['@E2E','@CashRepairMobileCreditCard', '@test_report', '@CASH', '@CASH-848'],
     testData: cashRepairMobileCCData
 };
 cashRepairMobileCCTests.push(tc);

playwright-tests/tests/CashReplaceGlassAddressLookupInshopAfterPay.ts

@@ -42,14 +42,6 @@ const cashReplaceGlassAddressLookupInshopAfterPayData: Partial<ITestData> = {
         vehicleLookupType: VehicleLookupType.Address
     },
    
-    // No need to override vehicleDamage as it already defaults to WindshieldCrack
-   
-    // Override appointment details
-    appointmentDetails: {
-        ...getDefaultTestData().appointmentDetails!,
-        shopAddress: "6826 Sawmill Rd, Columbus, OH 43235"
-    },
-   
     // Override payment details
     paymentDetails: ClientData.getDefaultAfterpayDetails()
 }
@@ -58,7 +50,7 @@ const cashReplaceGlassAddressLookupInshopAfterPayTests: ITestCase[] = [];
 
 const tc = {
     name: `CashReplaceGlassAddressLookupInshopAfterPay`,
-    tags: ['@E2E','@CashReplaceGlassAddressLookupInshopAfterPay', '@test_report', '@CASH'],
+    tags: ['@E2E','@CashReplaceGlassAddressLookupInshopAfterPay', '@test_report', '@CASH', '@CASH-848'],
     testData: cashReplaceGlassAddressLookupInshopAfterPayData
 };
 cashReplaceGlassAddressLookupInshopAfterPayTests.push(tc);

playwright-tests/tests/CashReplaceGlassPromoInshop.ts

@@ -60,7 +60,7 @@ const cashReplaceGlassPromoInshopTests: ITestCase[] = [];
 
 const tc = {
     name: `CashReplaceGlassPromoInshop`,
-    tags: ['@E2E','@CashReplaceGlassPromoInshop', '@test_report', '@CASH'],
+    tags: ['@E2E','@CashReplaceGlassPromoInshop', '@test_report', '@CASH', '@CASH-1182'],
     testData: cashReplaceGlassPromoInshopData
 };
 cashReplaceGlassPromoInshopTests.push(tc);

playwright-tests/tests/CashReplaceMultiGlassMobile.ts

@@ -95,7 +95,7 @@ const cashReplaceMultiGlassMobileTests: ITestCase[] = [];
 
 const tc = {
     name: `CashReplaceMultiGlassMobile`,
-    tags: ['@E2E','@CashReplaceMultiGlassMobile', '@test_report', '@CASH'],
+    tags: ['@E2E','@CashReplaceMultiGlassMobile', '@test_report', '@CASH', '@CASH-1182'],
     testData: cashReplaceMultiGlassMobileData
 };
 cashReplaceMultiGlassMobileTests.push(tc);

playwright-tests/tests/CashReplaceMultiGlassPromoInshop.ts

@@ -101,7 +101,7 @@ const cashReplaceMultiGlassPromoInshopTests: ITestCase[] = [];
 
 const tc = {
     name: `CashReplaceMultiGlassPromoInshop`,
-    tags: ['@E2E','@CashReplaceMultiGlassPromoInshop', '@test_report', '@CASH'],
+    tags: ['@E2E','@CashReplaceMultiGlassPromoInshop', '@test_report', '@CASH', '@CASH-1182'],
     testData: cashReplaceMultiGlassPromoInshopData
 };
 cashReplaceMultiGlassPromoInshopTests.push(tc);

playwright-tests/tests/CashReplaceMultiSlidingGlassDropoff.ts

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

playwright-tests/tests/CashReplaceSafeliteCanNotRecalMobile.ts

@@ -77,7 +77,7 @@ const cashReplaceSafeliteCanNotRecalMobileTests: ITestCase[] = [];
 
 const tc = {
     name: `CashReplaceSafeliteCanNotRecalMobile`,
-    tags: ['@E2E','@CashReplaceSafeliteCanNotRecalMobile', '@test_report', '@CASH'],
+    tags: ['@E2E','@CashReplaceSafeliteCanNotRecalMobile', '@test_report', '@CASH', '@CASH-1182'],
     testData: cashReplaceSafeliteCanNotRecalMobileData
 };
 cashReplaceSafeliteCanNotRecalMobileTests.push(tc);

playwright-tests/tests/CashReplaceSplitWindshield.ts

@@ -66,7 +66,7 @@ const CashReplaceSplitWindshieldTests: ITestCase[] = [];
 
 const tc = {
     name: `CashReplaceSplitWindshield`,
-    tags: ['@E2E','@CashReplaceSplitWindshield', '@test_report', '@CASH'],
+    tags: ['@E2E','@CashReplaceSplitWindshield', '@test_report', '@CASH', '@CASH-848'],
     testData: CashReplaceSplitWindshieldData
 };
 CashReplaceSplitWindshieldTests.push(tc);

playwright-tests/tests/CashReplaceVinMobile.ts

@@ -66,7 +66,7 @@ const cashReplaceVinMobileTests: ITestCase[] = [];
 
 const tc = {
     name: `CashReplaceVinMobile`,
-    tags: ['@E2E','@CashReplaceVinMobile', '@test_report', '@CASH'],
+    tags: ['@E2E','@CashReplaceVinMobile', '@test_report', '@CASH', '@CASH-1182'],
     testData: cashReplaceVinMobileData
 };
 cashReplaceVinMobileTests.push(tc);

playwright-tests/tests/CashReplaceWiperDropoff.ts

@@ -20,7 +20,7 @@ const cashReplaceWiperDropoffData: Partial<ITestData> = {
     servicePackage: ServicePackage.Standard,
    
     // Special flags
-    isSkipEstimatePage: true,
+    isSkipEstimatePage: false,
     isRecalVehicle: true,
    
     // Override customer postal code
@@ -28,7 +28,7 @@ const cashReplaceWiperDropoffData: Partial<ITestData> = {
         ...getDefaultTestData().customerDetails!,
         address: {
             ...getDefaultTestData().customerDetails!.address,
-            postalCode: '43085'
+            postalCode: '43235'
         }
     },
    

playwright-tests/tests/InsuranceAcuityPaypal.ts

@@ -90,7 +90,7 @@ const insuranceAcuityPaypalTests: ITestCase[] = [];
 
 const tc = {
     name: `InsuranceAcuityPaypal`,
-    tags: ['@E2E','@InsuranceAcuityPaypal', '@test_report', '@Insurance', '@CASH-1187'],
+    tags: ['@E2E','@InsuranceAcuityPaypal', '@test_report', '@Insurance', '@CASH-1187', '@CASH-848'],
     testData: insuranceAcuityPaypalData
 };
 insuranceAcuityPaypalTests.push(tc);

public/css/hop-styling.css

@@ -18,7 +18,7 @@ body .validation-info {
   display: none;
 }
 body .italicSmall {
-  font-style: normal;
+  font-style: italic;
   font-size: 14px;
 }
 body span {
@@ -37,7 +37,7 @@ body .headerlinecontainer .headerline1 {
   line-height: 32px;
   font-weight: 400;
   margin: 24px 0;
-  text-align: center;
+  text-align: left;
 }
 body input,
 body select {
@@ -137,9 +137,9 @@ body .buttonContainer {
 }
 body .buttonContainer button {
   position: relative;
-  background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
+  background: #db0020;
   border: none;
-  border-radius: 8px;
+  border-radius: 50rem;
   color: #fff;
   justify-content: center;
   font-family: Urbanist, Arial, Helvetica, sans-serif;
@@ -149,18 +149,17 @@ body .buttonContainer button {
 }
 @media (hover: hover) {
   body .buttonContainer button {
-    background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
     cursor: pointer;
   }
 }
 body .buttonContainer button:focus {
-  box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+  box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
 }
 body .buttonContainer button:focus, body .buttonContainer button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+  box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
   color: #fff;
-  background: linear-gradient(270deg, rgb(6, 87, 124) 0%, rgb(6, 87, 124) 100%);
+  background: #db0020;
 }
 body .buttonContainer button:disabled {
   background: #e3e4e4 !important;
@@ -275,7 +274,7 @@ body .cc-error-container #alert-message {
 #fmg-checkout-shared #other-payments-container label span.paymentOptionText {
   margin: auto 0;
   padding-left: 0;
-  font-weight: 400;
+  font-weight: 600;
 }
 #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
   width: 100%;
@@ -298,7 +297,7 @@ body .cc-error-container #alert-message {
   text-align: right;
 }
 #fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
-  width: 20%;
+  width: 12%;
 }
 #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
   padding: 0 2%;
@@ -310,11 +309,13 @@ body .cc-error-container #alert-message {
   margin-top: 24px;
   margin-bottom: 24px;
   font-size: 14px;
+  font-weight: 600;
   color: #525656;
 }
 #fmg-checkout-shared #other-payments-container .disclaimerContainerv2 {
   margin-bottom: 24px;
   font-size: 14px;
+  font-weight: 600;
   color: #525656;
 }
 @media only screen and (max-device-width: 767px) {

public/scss/hop-styling.scss

@@ -20,7 +20,7 @@ body {
     }
 
     .italicSmall {
-        font-style: normal;
+        font-style: italic;
         font-size: 14px;
     }
 
@@ -44,7 +44,7 @@ body {
             line-height: 32px;
             font-weight: 400;
             margin: 24px 0;
-            text-align: center;
+            text-align: left;
         }
     }
 
@@ -148,9 +148,9 @@ body {
         height: 48px;
         button {
             position: relative;
-            background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
+            background: #db0020;
             border: none;
-            border-radius: 8px;
+            border-radius: 50rem;
             color: #fff;
             justify-content: center;
             font-family: Urbanist, Arial, Helvetica, sans-serif;
@@ -158,19 +158,18 @@ body {
             font-size: 16px;
             height: 48px;
             @media (hover: hover) {
-                background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
                 cursor: pointer;
             }
             &:focus {
-                box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+                box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
             }
             &:focus, // Mouse, touch, stylus focus
             &:focus-visible {
                 // Keyboard focus for accessibility
                 outline: none;
-                box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+                box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
                 color: #fff;
-                background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+                background: #db0020;
             }
             &:disabled {
                 background: #e3e4e4 !important;
@@ -333,7 +332,7 @@ body {
 				&.paymentOptionText {
 					margin: auto 0;
 					padding-left: 0;
-                    font-weight: 400;
+                    font-weight: 600;
 				}
 			}
 		}
@@ -373,7 +372,7 @@ body {
 					text-align: right;
 
 					> img {
-						width: 20%;
+						width: 12%;
 					}
 				}
 			}
@@ -391,12 +390,14 @@ body {
 			margin-top: 24px;
             margin-bottom: 24px;
             font-size: 14px;
+            font-weight: 600;
             color: #525656;
 		}
 
         .disclaimerContainerv2 {
             margin-bottom: 24px;
             font-size: 14px;
+            font-weight: 600;
             color: #525656;
         }
 	}

src/constants/error-messages.js

@@ -26,7 +26,7 @@ const errorMessages = {
     VIN_FORMAT:
         "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",
-    RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert",
+    RECAL_ACK_REQUIRED: "You must agree to the terms to submit",
     VEHICLE_REQUIRED: "Please select a vehicle",
     MOBILE_LOCATION_REQUIRED: "Please enter your service address",
     DATE_REQUIRED: "Please select a date",
@@ -37,6 +37,7 @@ const errorMessages = {
     MODEL_REQUIRED: "Please select your vehicle model",
     STYLE_REQUIRED: "Please select your vehicle style",
     PROMO_REQUIRED: "Please enter a promo code",
+    INSURANCE_COMPANY_REQUIRED: "Please select an insurance company",
 };
 
 export { errorMessages };

src/constants/progress-bar-mapper.js

@@ -1,31 +1,31 @@
 export const pageProgressMapper = {
     //Combine progress bar slide percent and button steps
     vehicle: {
-        percent: 10,
+        percent: 5,
         step: 1,
     },
     "vehicle-damage": {
-        percent: 14,
+        percent: 9,
         step: 1,
     },
     estimate: {
-        percent: 18,
+        percent: 12,
         step: 1,
     },
     "service-zip": {
-        percent: 22,
+        percent: 20,
         step: 1,
     },
     "vin-lookup": {
-        percent: 22,
+        percent: 15,
         step: 1,
     },
     "license-plate-lookup": {
-        percent: 22,
+        percent: 20,
         step: 1,
     },
     "address-lookup": {
-        percent: 22,
+        percent: 20,
         step: 1,
     },
     "address-vehicles": {
@@ -33,15 +33,15 @@ export const pageProgressMapper = {
         step: 1,
     },
     "part-questions": {
-        percent: 30,
+        percent: 15,
         step: 1,
     },
     "molding-questions": {
-        percent: 30,
+        percent: 26,
         step: 1,
     },
     "vehicle-parts": {
-        percent: 30,
+        percent: 20,
         step: 1,
     },
     "capability-questions": {
@@ -49,11 +49,11 @@ export const pageProgressMapper = {
         step: 1,
     },
     quote: {
-        percent: 39, //The first Step 2 must be 39 so the animated bar lines up with the dot
+        percent: 60,
         step: 2,
     },
     "insurance-company": {
-        percent: 52,
+        percent: 60,
         step: 2,
     },
     "service-location": {
@@ -61,7 +61,7 @@ export const pageProgressMapper = {
         step: 2,
     },
     schedule: {
-        percent: 70.5, //The first Step 3 must be 70.5 so the animated bar lines up with the dot
+        percent: 76,
         step: 3,
     },
     "mobile-details": {
@@ -69,15 +69,15 @@ export const pageProgressMapper = {
         step: 3,
     },
     "customer-details": {
-        percent: 84,
+        percent: 85,
         step: 3,
     },
     "payment-method": {
-        percent: 92, //The first Step 4 must be 92 so the animated bar lines up with the dot
+        percent: 98.5,
-        step: 3,
+        step: 4,
     },
     payment: {
-        percent: 96,
+        percent: 98.5,
         step: 4,
     },
     confirmation: {

src/digital-components/button-question/button-question.vue

@@ -12,6 +12,10 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
             <span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
                 {{ questionText }}
             </span>
+            <p
+                v-if="questionTextDescription"
+                class="question-text-description"
+                v-html="questionTextDescription"></p>
         </div>
 
         <div class="w-100 d-flex justify-content-center">
@@ -60,6 +64,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                             :isInsuranceSelected="isInsuranceSelected"
                             :suppressError="suppressError"
                             :labelBold="labelBold"
+                            :isHidden="setIsHidden(index)"
                             @buttonEvent="handleButtonEvent"
                             v-model="selectedValues" />
                         <!-- For nested questions -->
@@ -92,6 +97,11 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                 :name="formatString(groupName)"
                 v-if="!suppressError"></error-message>
         </div>
+        <div v-if="lazyLoad.isLazyLoad && !showAllButtons" id="show-more-button">
+            <button class="btn btn-link" type="button" @click="toggleShowAllButtons">
+                View more times
+            </button>
+        </div>
     </div>
 </template>
 
@@ -118,6 +128,7 @@ export default {
         isMultiSelect: Boolean,
         groupName: String,
         questionText: String,
+        questionTextDescription: String,
         answers: Array,
         textPosition: {
             type: String,
@@ -158,6 +169,13 @@ export default {
             required: false,
             default: false,
         },
+        lazyLoad: {
+            type: Object,
+            default: () => ({
+                isLazyLoad: false,
+                amountToLoad: null,
+            }),
+        },
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -189,6 +207,7 @@ export default {
     data() {
         return {
             lastValuePushedToGa: null,
+            showAllButtons: false,
         };
     },
     computed: {
@@ -284,6 +303,15 @@ export default {
                 this.$emit("update:modelValue", selectedAnswers);
             },
         },
+        setIsHidden() {
+            return (index) => {
+                return (
+                    this.lazyLoad.isLazyLoad &&
+                    index >= this.lazyLoad.amountToLoad &&
+                    !this.showAllButtons
+                );
+            };
+        },
     },
     methods: {
         formatString(str) {
@@ -296,6 +324,9 @@ export default {
             const eventName = event.eventName;
             this.$emit(`buttonEvent.${eventName}`, event.args);
         },
+        toggleShowAllButtons() {
+            this.showAllButtons = true;
+        },
     },
     watch: {
         modelValue(newValue, oldValue) {
@@ -357,6 +388,28 @@ export default {
     font-family: UrbanistSemibold;
     color: $black;
 
+    &.timeslots {
+        .col {
+            & > label[isHidden="true"] {
+                display: none;
+            }
+        }
+        #show-more-button {
+            width: 100%;
+            text-align: center;
+            margin-top: 0.5rem;
+
+            button {
+                color: $blue;
+                text-underline-offset: 4px;
+
+                &:active {
+                    background: unset;
+                }
+            }
+        }
+    }
+
     .radio-button-container {
         &:not(:last-child) {
             padding-bottom: map-get($spacers, 2);
@@ -376,6 +429,13 @@ export default {
         font-weight: 600;
     }
 }
+.question-text-description {
+    font-family: UrbanistRegular;
+    & > sup {
+        font-size: 0.5rem;
+        top: -0.4rem;
+    }
+}
 .small-question-text {
     &.question-text {
         span {

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

@@ -883,6 +883,12 @@ export default {
     flex-grow: 0;
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+
+    .duration-text-block {
+        text-align: left;
+    }
 
     .date-picker-header {
         margin-bottom: 1.5rem;
@@ -891,9 +897,11 @@ export default {
     fieldset {
         flex-grow: 1;
         position: relative;
+        width: 100%;
 
         .view-more-dates {
             color: $blue;
+            font-family: UrbanistSemiBold;
         }
     }
     .loader {
@@ -907,7 +915,6 @@ export default {
     }
     .calendar-grid-container {
         margin: 0 auto 1rem auto;
-        max-width: 360px;
         position: relative;
         transition:
             height ease 2s,
@@ -961,10 +968,11 @@ export default {
 
         .month-year {
             grid-area: 1 / 1 / 2 / 5;
-            font-family: UrbanistBold;
+            font-family: UrbanistRegular;
             color: $black;
-            justify-content: center;
+            justify-content: left;
             margin-bottom: 0.5rem;
+            font-weight: 600;
         }
         .legend {
             grid-area: 1 / 5 / 2 / 8;
@@ -1045,8 +1053,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;
 
@@ -1084,14 +1090,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;
                     }
@@ -1270,18 +1270,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 {
@@ -1289,7 +1284,6 @@ export default {
                     font-weight: 600;
                     font-family: "UrbanistSemibold";
                     color: $black;
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
                 }
             }
         }
@@ -1300,7 +1294,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;
@@ -1338,19 +1331,8 @@ export default {
         display: flex;
         max-width: 100%;
         flex-wrap: wrap;
-        gap: 0 0.5rem;
 
         & > div {
-            flex: 0 0 calc(50% - 0.25rem);
-        }
-    }
-    :deep(.button-question.is-mobile-appointment) {
-        .button-inner-wrapper > div {
-            flex: 0 0 100%;
-        }
-    }
-    :deep(.button-question.is-drop-off-appointment) {
-        .button-inner-wrapper > div {
             flex: 0 0 100%;
         }
     }
@@ -1360,6 +1342,8 @@ export default {
     display: block;
     position: relative;
     height: 2rem;
+    font-size: 0.875rem;
+    padding-top: 0;
     width: 100%;
     justify-content: center;
     background: transparent;

src/digital-components/dropdown-question/dropdown-question.vue

@@ -19,7 +19,9 @@
             :validationRules="validationRules"
             :placeHolderText="placeHolderText"
             :valueAsKey="valueAsKey">
-            <option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
+            <option v-if="placeHolderText && !isDisabled" value="" selected>
+                {{ placeHolderText }}
+            </option>
             <option
                 v-for="(value, name, index) in options"
                 :value="valueAsKey == true ? value : name"
@@ -152,7 +154,7 @@ export default {
         border: 1px solid $gray-500;
         border-radius: 0.5rem;
         min-height: 3rem;
-        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
         @include media-breakpoint-up(md) {
             min-height: 3.5rem;
         }

src/digital-components/modal/modal.vue

@@ -2,7 +2,7 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        :class="modalId"
+        :class="[modalId, { 'recall-show': isRecal }]"
         v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
         :data-bs-backdrop="backdropSetting"
         :id="modalId"
@@ -10,7 +10,8 @@
         aria-labelledby="ModalComponentLabel"
         @keypress.enter="onEnter"
         aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
+        <!--Close modal when clicking other than close button-->
+        <div class="modal-dialog" :class="{ 'modal-dialog-centered': !isRecal }">
             <div class="modal-content">
                 <div class="modal-header mb-0 mt-6">
                     <label
@@ -31,7 +32,7 @@
                 <div class="modal-footer">
                     <slot name="modal-footer-slot"></slot>
                     <modalButtonMain
-                        isPrimary
+                        :isPrimary="isFooterButtonPrimary"
                         class="w-100 modal-footer-button"
                         :id="modalId + '-modalbtn'"
                         ref="modalButtonMain"
@@ -64,12 +65,17 @@ export default {
         suppressPageScroll: Boolean,
         staticBackdrop: Boolean,
         footerButtonDisabled: Boolean,
+        isFooterButtonPrimary: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },
         onModalClosedCallback: {
             type: Function,
         },
+        isRecal: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup() {
         const uuid = uuidv4();
@@ -194,6 +200,19 @@ export default {
         background-color: $white;
     }
     &.modal-component {
+        &.recall-show {
+            .modal-dialog {
+                transform: translateX(-50%);
+                left: 50%;
+                right: auto;
+                width: auto;
+                max-width: 600px;
+                @include media-breakpoint-up(md) {
+                    top: 10%;
+                }
+            }
+        }
+
         .modal-dialog {
             max-width: 767px;
             margin: 0 auto;
@@ -248,6 +267,7 @@ export default {
 
             button {
                 margin: 0;
+                border-radius: 50rem;
             }
         }
     }

src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue

@@ -115,14 +115,16 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
+        border: 1px solid $blue;
         color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
-        &:hover {
+        &:hover,
+        &:active {
             color: $white;
-            @include blue-gradient;
+            background: $blue;
+            border: none;
         }
         &:focus, // Mouse, touch, stylus focus
         &:focus-visible {
@@ -130,16 +132,18 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue;
-            color: $white;
+            color: $blue;
-            @include blue-gradient;
+            &:active {
+                color: $white;
+            }
         }
         &:disabled {
             background: transparent;
             color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $red;
+            border: 1px solid $blue;
             cursor: pointer;
             pointer-events: all;
         }

src/digital-components/phone-number-question/phone-number-question.vue

@@ -6,6 +6,7 @@
             :max-length="12"
             v-model="selectedValue"
             :mask="mask"
+            placeholderText="###-###-####"
             :isRequired="isRequired"
             :validationRules="validationRulesForTextBoxQuestion"
             :cmsWidgetName="cmsWidgetName" />

src/digital-components/textbox-question/textbox-question.vue

@@ -337,7 +337,7 @@ export default {
         border-radius: 0.5rem;
         min-height: 3rem;
         padding: 0.75rem 1rem;
-        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
         @include media-breakpoint-up(md) {
             padding: 1rem;
             min-height: 3.5rem;

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;
-                        }
                     }
                 }
 
+                //Package container height with package discount AND "most popular" label
+                &.has-package-discount.has-subheader {
+                    min-height: 170px;
+                }
+                //Package container height with package discount only
                 &.has-package-discount {
-                    min-height: 150px;
+                    min-height: 136px;
                 }
 
                 &: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 {
@@ -328,7 +326,6 @@ export default {
             }
 
             p {
-                font-weight: 600;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -336,9 +333,8 @@ export default {
 
                 &.sub-label {
                     color: $green;
-                    background-color: $green-100;
+                    display: inline-flex;
-                    padding: 0.25rem 0.5rem;
+                    padding: 0.25rem 0;
-                    border-radius: 0.75rem;
                     text-transform: uppercase;
                     font-size: 0.75rem;
                     margin-left: auto;
@@ -368,6 +364,8 @@ export default {
                     }
                     div.discount-price {
                         color: $green;
+                        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+                        font-weight: 600;
                     }
                     @include media-breakpoint-up(md) {
                         position: absolute;
@@ -429,14 +427,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 +448,9 @@ export default {
             margin-left: 1.25rem;
             font-weight: 600;
             line-height: 20px;
+            font-size: 1.25rem;
+            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+            font-weight: 600;
 
             span.strikethrough-price {
                 text-decoration: line-through;

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

@@ -291,6 +291,12 @@ export default {
                     height: 10px;
                     min-width: 10px;
                 }
+
+                &.has-subheader {
+                    & > .package-specs {
+                        display: inline-flex;
+                    }
+                }
             }
 
             &:hover {
@@ -318,7 +324,6 @@ export default {
                     }
                 }
                 + .package-label {
-                    background-color: $blue-100;
                     border: 1px solid $blue;
                     max-height: 500px;
                     .special-save-box {

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

@@ -9,7 +9,7 @@
                     v-model="addressModel.streetAddress"
                     ref="autocomplete"
                     customInputId="streetAddress"
-                    placeholderText="Search"
+                    placeholderText="Start typing address"
                     aria-haspopup=""
                     hasIcon
                     validationRules="street-address-required"

src/fmg-components/cart/cart.vue

@@ -3,13 +3,15 @@
         <div class="px-0" v-if="isCartReadyToLoad">
             <div
                 class="row vin-toggle flex align-items-center pt-4"
-                :class="[isExpanded ? 'expanded' : '']"
+                :class="[
+                    isCollapsible ? (isExpanded ? 'expanded' : '') : 'expanded non-collapsible',
+                ]"
                 @click="toggleIsExpanded()">
                 <a
                     aria-label="expand cart"
                     href="javascript:void(0)"
                     class="col d-flex justify-content-between py-0">
-                    <span class="label">{{ OrderDetailsText }}</span>
+                    <span class="label">{{ cartHeaderText }}</span>
                     <span class="label amount-due larger">
                         {{ getLineItemAmount(amountDue, showCoverageAsPending) }}
                     </span>
@@ -208,6 +210,7 @@ export default {
         isItac: Boolean,
         isNoComp: Boolean,
         isExpandedOnLoad: Boolean,
+        isCollapsible: { type: Boolean, default: true },
         isMSRFeeApplicable: Boolean,
         donationCartItem: Object,
     },
@@ -1094,9 +1097,19 @@ export default {
         amountDueText() {
             return this.getCmsContent("AmountDueTextWidget", "Text");
         },
-        OrderDetailsText() {
+        orderDetailsText() {
             return this.getCmsContent("OrderDetailsTextWidget", "Text");
         },
+        estimateDetailsText() {
+            return this.getCmsContent("EstimateDetailsTextWidget", "Text");
+        },
+        cartHeaderText() {
+            if (!this.isInsurance && this.shouldHideRecalibration) {
+                return this.estimateDetailsText;
+            } else {
+                return this.orderDetailsText;
+            }
+        },
         amountPaidText() {
             return this.getCmsContent("AmountPaidTextWidget", "Text");
         },
@@ -1182,6 +1195,11 @@ export default {
         font-weight: 500;
         line-height: 1.625;
     }
+    .non-collapsible {
+        .amount-due {
+            display: none;
+        }
+    }
     .amount-due {
         color: $green;
 
@@ -1283,23 +1301,26 @@ export default {
         margin-top: 0.5rem;
     }
     .vin-toggle {
-        &:after {
+        &:not(.non-collapsible) {
-            content: "";
+            &:after {
-            transition: all 0.5s ease;
+                content: "";
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
+                transition: all 0.5s ease;
-            background-repeat: no-repeat;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
-            background-position: right center;
+                background-repeat: no-repeat;
-            width: 24px;
+                background-position: right center;
-            height: 24px;
+                width: 24px;
-            display: inline-flex;
+                height: 24px;
-            position: relative;
+                display: inline-flex;
-            right: 0.75rem;
+                position: relative;
-            margin: 0.5rem 0 0.5rem 1rem;
+                right: 0.75rem;
-            cursor: pointer;
+                margin: 0.5rem 0 0.5rem 1rem;
-        }
+                cursor: pointer;
-        &.expanded:after {
+            }
-            transform: rotate(180deg);
+            &.expanded:after {
+                transform: rotate(180deg);
+            }
         }
+
         &.expanded + .cart-panel {
             max-height: 650px;
             transition: all 150ms ease-in;
@@ -1307,6 +1328,13 @@ export default {
             padding: 1rem 0 0.5rem;
             visibility: visible;
         }
+
+        &.non-collapsible {
+            & > a {
+                cursor: default;
+            }
+        }
+
         a {
             font-family: UrbanistSemibold;
             text-decoration: none;

src/fmg-components/content-group-modal/content-group-modal.vue

@@ -3,7 +3,8 @@
         :ref="ModalName"
         :modalId="ModalName"
         :footerButtonText="ModalCloseButtonText"
-        @footer-button-event="footerButtonClick">
+        @footer-button-event="footerButtonClick"
+        :isRecal="isRecal">
         <div :class="[isRecal ? 'recal-modal' : '']">
             <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
             <h5 class="mb-4" v-html="ModalHeadline"></h5>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="funnel-header" v-if="imageSrc">
+    <div class="funnel-header" :class="{ scrolled: isScrolled }" v-if="imageSrc">
         <div class="d-flex w-100">
             <progress-bar :page="$route.name" />
         </div>
@@ -15,7 +15,9 @@
                         v-show="shouldShowWebchatButton"
                         v-on:click="webchatClicked"
                         type="button"
-                        class="chat-button"></button>
+                        class="chat-button">
+                        <span>Chat Now</span>
+                    </button>
                 </span>
             </div>
             <div class="button-container">
@@ -24,16 +26,18 @@
         </div>
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
-        <transition name="fade" mode="out-in">
+        <div class="container d-flex global-alert-wrapper">
-            <alert
+            <transition name="fade" mode="out-in">
-                v-if="globalAlert.displayAlert"
+                <alert
-                class="rounded-0 w-100 border-0 shadow-sm"
+                    v-if="globalAlert.displayAlert"
-                cmsWidgetName="GlobalAlert"
+                    class="rounded-0 w-100 border-0 shadow-sm"
-                :manualHeadline="globalAlert.messageHeadline"
+                    cmsWidgetName="GlobalAlert"
-                :manualCopy="globalAlert.messageCopy"
+                    :manualHeadline="globalAlert.messageHeadline"
-                :alertClass="globalAlert.type"
+                    :manualCopy="globalAlert.messageCopy"
-                v-bind:isDismissible="globalAlert.isDismissible" />
+                    :alertClass="globalAlert.type"
-        </transition>
+                    v-bind:isDismissible="globalAlert.isDismissible" />
+            </transition>
+        </div>
     </template>
 </template>
 
@@ -57,6 +61,7 @@ export default {
             sierraChatOpen: false,
             salesforceChatOpen: false,
             isSalesforceTransferInProgress: false,
+            isScrolled: false,
         };
     },
     props: {
@@ -181,6 +186,12 @@ export default {
             }
         };
         window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
+
+        // Add scroll listener for header shadow effect
+        this._handleScroll = () => {
+            this.isScrolled = window.scrollY > 0;
+        };
+        window.addEventListener("scroll", this._handleScroll);
     },
     beforeUnmount() {
         window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
@@ -191,6 +202,7 @@ export default {
         );
         window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
         window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
+        window.removeEventListener("scroll", this._handleScroll);
     },
 };
 </script>
@@ -205,15 +217,21 @@ export default {
             padding: 2rem 0.75rem;
         }
     }
-    position: relative;
+    position: sticky;
-    padding: 0 0 1rem 0;
+    top: 0;
+    z-index: 1000;
+    background-color: white;
+    box-shadow: none;
+    transition: box-shadow 0.3s ease-in-out;
+    padding: 0;
+
+    &.scrolled {
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+    }
 
     .button-container {
         &.webchat {
-            margin-right: 1rem;
+            margin-right: 0.875rem;
-            @include media-breakpoint-up(md) {
-                margin-right: 2rem;
-            }
         }
     }
 
@@ -232,15 +250,37 @@ export default {
 
     .webchat {
         .chat-button {
-            width: 1.5rem;
+            text-transform: uppercase;
-            height: 1.5rem;
+            width: 7.5rem;
+            height: 2rem;
             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-size: 2rem 2rem;
-            background-position: center;
+            background-position: right;
             border: none;
             background-color: transparent;
+            padding-right: 2rem;
+            font-size: 0.875rem;
+            font-weight: 600;
+            font-family: "UrbanistSemibold";
+            color: $blue;
+            @include media-breakpoint-down(md) {
+                width: 2rem;
+                padding-right: 0;
+            }
+            span {
+                @include media-breakpoint-down(md) {
+                    display: none;
+                }
+            }
         }
     }
 }
+.global-alert-wrapper .alert {
+    margin: 1rem 0 1.5rem;
+
+    @include media-breakpoint-up(md) {
+        margin-top: 0;
+    }
+}
 </style>

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

@@ -39,25 +39,14 @@
                             <span class="dot4"></span>
                         </div>
                         <div class="d-flex flex-column justify-content-between">
-                            <div class="step-containers">
+                            <div class="step-containers" v-for="step in steps" :key="step.number">
-                                <span class="step-number">Step 1 of 4</span>
+                                <span class="step-number">Step {{ step.number }} of 4</span>
                                 <br />
-                                <span class="step-name">Vehicle</span>
+                                <span
-                            </div>
+                                    class="step-name"
-                            <div class="step-containers">
+                                    :class="{ 'active-step': step.number === currentStepNumber }">
-                                <span class="step-number">Step 2 of 4</span>
+                                    {{ step.name }}
-                                <br />
+                                </span>
-                                <span class="step-name">Quote</span>
-                            </div>
-                            <div class="step-containers">
-                                <span class="step-number">Step 3 of 4</span>
-                                <br />
-                                <span class="step-name">Schedule</span>
-                            </div>
-                            <div class="step-containers">
-                                <span class="step-number">Step 4 of 4</span>
-                                <br />
-                                <span class="step-name">Review</span>
                             </div>
                         </div>
                     </div>
@@ -107,6 +96,14 @@ export default {
         currentStepNumber() {
             return getProgressBarStep(this.$route.name);
         },
+        steps() {
+            return [
+                { number: 1, name: "Vehicle" },
+                { number: 2, name: "Quote" },
+                { number: 3, name: "Schedule" },
+                { number: 4, name: "Review" },
+            ];
+        },
     },
     components: {
         progressBar,
@@ -118,11 +115,15 @@ export default {
 .menu-modal-container {
     button {
         border: none;
+        color: $blue;
+        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+        font-weight: 600;
+        font-size: 0.875rem;
         &.menu-button {
             width: auto;
             height: auto;
             border-radius: 1.5rem;
-            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
             background-color: $white;
             position: relative;
             display: flex;
@@ -254,6 +255,10 @@ export default {
                 .step-name {
                     font-size: 1.25rem;
                 }
+                .active-step {
+                    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+                    font-weight: 600;
+                }
             }
         }
         .modal-fullscreen {

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

@@ -11,9 +11,16 @@
                     @click-event="clickEvent" />
             </h5>
         </div>
-        <div v-if="subText" class="d-flex align-self-center overflow-hidden mt-1">
+        <div
+            v-if="subText && !alignLeft"
+            class="d-flex align-items-center justify-content-center container-fluid overflow-hidden mt-1">
+            <p class="text-center small fw-normal sub-text">
+                <span v-html="subText"></span>
+            </p>
+        </div>
+        <div v-if="subText && alignLeft" class="d-flex overflow-hidden mt-1 mx-0">
             <p class="small fw-normal sub-text">
-                <span v-html="boldedSubHeaderText"></span>
+                <span v-html="subText"></span>
             </p>
         </div>
     </div>
@@ -31,6 +38,7 @@ export default {
             type: String,
             default: "dark-header",
         },
+        alignLeft: Boolean,
     },
     components: {
         buttonBack,
@@ -60,6 +68,9 @@ export default {
 <style lang="scss" scoped>
 :deep(.bolded-words) {
     font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+    color: $black;
+    font-weight: 600;
+    font-size: 16px;
 }
 h5 {
     line-height: 32px;
@@ -79,7 +90,7 @@ h5 {
 }
 
 p.small {
-    color: $gray-550;
+    color: $gray-600;
 }
 .sub-text {
     margin: 0;

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

@@ -5,7 +5,7 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
                 </div>
             </div>
             <div class="row">

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"
@@ -56,6 +56,7 @@ export default {
         cmsWidgetName: String,
         buttonSize: { type: Boolean, default: false },
         isSubmitHidden: { type: Boolean, default: false },
+        overrideButtonText: String,
     },
     components: {
         textLink,

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -1,24 +1,22 @@
 <template>
-    <div class="save-progress-modal-question" :class="isProgressSaved ? 'progress-saved' : ''">
+    <div
+        class="save-progress-modal-question"
+        :class="isProgressSaved ? 'progress-saved' : ''"
+        v-if="!isProgressSaved">
         <buttonMain
             type="button"
-            v-if="!isProgressSaved"
             :buttonText="buttonText"
             loaderColor="white"
             :suppressLoader="true"
             class="open-save-progress-button"
             @click-event="openModal" />
-        <alert
-            class="my-4"
-            v-else
-            cmsWidgetName="SaveProgressModalAlertWidget"
-            alertClass="alert-success" />
         <modal
             :ref="modalName"
             :headerText="modalHeaderText"
             suppressPageScroll
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
+            :isFooterButtonPrimary="true"
             @footer-button-event="saveProgress">
             <p class="modal-body-inner" v-html="modalBodyText"></p>
             <saveProgressQuestion
@@ -30,6 +28,11 @@
             </template>
         </modal>
     </div>
+    <alert
+        class="my-4 save-your-progress-alert"
+        v-else
+        cmsWidgetName="SaveProgressModalAlertWidget"
+        alertClass="alert-success" />
 </template>
 
 <script>
@@ -125,7 +128,7 @@ export default {
     align-items: center;
     height: 3rem;
     border-radius: 0.5rem;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 
     &.progress-saved {
         background: none;
@@ -239,7 +242,9 @@ export default {
             }
         }
     }
+}
 
+.save-your-progress-alert {
     .alert {
         border-radius: $border-radius-lg;
         border: 1px solid $green;
@@ -250,7 +255,6 @@ export default {
         font-weight: 600;
         font-size: 1rem;
         color: $black;
-        text-align: left;
         padding-left: 1.5rem;
         &::before {
             position: absolute;

src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue

@@ -4,9 +4,9 @@
             :ref="modalName"
             :headerText="modalHeaderText"
             suppressPageScroll
-            :staticBackdrop="true"
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
+            :isFooterButtonPrimary="true"
             @footer-button-event="saveProgress">
             <p class="modal-body-inner">{{ modalBodyText }}</p>
             <saveProgressQuestion

src/layouts/address-lookup/address-lookup.spec.js

@@ -757,7 +757,7 @@ function setupMocks({
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
     const closestShops = {
         data: {
-            providers: [
+            inShopProviders: [
                 { id: 1, name: "Shop 1" },
                 { id: 2, name: "Shop 2" },
             ],

src/layouts/address-lookup/address-lookup.vue

@@ -308,7 +308,7 @@ export default {
                     this.serviceZipCode,
                     this.carId
                 );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                this.displayNoServiceAlert = !closestShops?.data?.inShopProviders?.length;
                 if (this.displayNoServiceAlert) {
                     return this.$refs.navbar.removeLoader();
                 }

src/layouts/address-lookup/customer-questions/customer-questions.spec.js

@@ -28,6 +28,5 @@ describe("customerQuestions.vue", () => {
         expect(addressQuestions.exists()).toBe(true);
         expect(firstName.exists()).toBe(true);
         expect(lastName.exists()).toBe(true);
-        expect(emailAddress.exists()).toBe(true);
     });
 });

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -23,24 +23,6 @@
                     autocomplete="family-name" />
             </div>
         </div>
-        <div class="row mt-4">
-            <div class="col">
-                <textboxQuestion
-                    cmsWidgetName="EmailAddressQuestionWidget"
-                    v-model="customerModel.emailOrSms"
-                    ref="emailAddress"
-                    customInputId="emailOrSms"
-                    :isRequired="!isEmailOptional"
-                    :validationRules="EmailOrSmsvalidationRules"
-                    :addOptionalText="isEmailOptional"
-                    autocomplete="email" />
-            </div>
-        </div>
-        <div class="row mb-0">
-            <div class="col">
-                <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
-            </div>
-        </div>
     </div>
 </template>
 
@@ -51,7 +33,6 @@ import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import textBlock from "@/digital-components/text-block/text-block";
 
 // DEFINE VALIDATION RULES
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@@ -101,7 +82,6 @@ export default {
     components: {
         addressQuestions,
         textboxQuestion,
-        textBlock,
     },
 };
 </script>

src/layouts/confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue

@@ -62,7 +62,7 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
-    border-radius: $border-radius-lg;
+    border-radius: $border-radius-pill;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;

src/layouts/confirmation/confirmation.vue

@@ -9,79 +9,11 @@
                         <img :src="ScheduleConfirmationImage" />
                         <span v-html="ScheduleConfirmationText"></span>
                     </div>
-                    <div class="row justify-content-center">
+                    <div class="emailtext" v-html="ConfirmationEmailText"></div>
-                        <div class="col-md-6 col-xl-4">
+                    <div class="main">
-                            <div class="header-container">
+                        <div class="scheduleText">
-                                <img :src="ScheduleConfirmationImage" />
+                            <p>{{ ScheduleDateFormatted }}</p>
-                                <span v-html="ScheduleConfirmationText"></span>
+                            <p>{{ ScheduleTimeFormatted }}</p>
-                            </div>
-
-                            <div class="emailtext" v-html="ConfirmationEmailText"></div>
-
-                            <div class="main">
-                                <div></div>
-
-                                <div class="scheduleText">
-                                    <p>{{ ScheduleDateFormatted }}</p>
-                                    <p>{{ ScheduleTimeFormatted }}</p>
-                                </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-4 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="mb-5" />
                         </div>
 
                         <addToCalendar
@@ -118,7 +50,7 @@
                             ref="donationBlock" />
                     </div>
 
-                    <hr class="mt-5 mb-0" />
+                    <hr class="mt-4 mb-0" />
 
                     <cart
                         v-if="ShowCart"
@@ -129,17 +61,18 @@
                         :donationCartItem="donationLineItem"
                         :showAsPaid="isPia"
                         servicePackageOptionsCmsName="ServicePackageTitle"
+                        recyclingModalCmsWidgetName="RecycleModal"
                         :isInsurance="isInsurance"
                         :insuranceDeductible="currentDeductible"
                         :insuranceCompanyName="insuranceCompanyName"
                         :showInsuranceCoverageAs="showInsuranceCoverageAs"
                         :shouldHideRecalibration="shouldHideRecalibration"
-                        :isExpandedOnLoad="false"
                         :isItac="isItac"
                         :isNoComp="isNoComp"
+                        :isExpandedOnLoad="false"
                         :isMSRFeeApplicable="isMSRFeeApplicable" />
 
-                    <hr class="mt-4 mb-5" />
+                    <hr class="mb-5" />
                 </div>
             </div>
         </div>

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

@@ -4,7 +4,10 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
+                    <funnelSubHeader
+                        cmsWidgetName="FunnelSubHeaderWidget"
+                        class="mt-4 mb-5"
+                        alignLeft />
                     <textboxQuestion
                         isRequired
                         class="mb-4"
@@ -215,3 +218,8 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+.form-check {
+    margin-bottom: 0.5rem;
+}
+</style>

src/layouts/estimate/estimate.vue

@@ -2,26 +2,24 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container page-container-grouped-styles estimate">
+        <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <div>
+                    <funnelSubHeader
-                        <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
+                        class="pt-4 pb-2"
-                        <div v-html="this.VinLookupQuestionBodyText2"></div>
+                        cmsWidgetName="FunnelSubHeaderWidget"
-                        <div
+                        alignLeft />
-                            class="select-an-option"
+                    <p class="select-option mb-2" v-html="SelectOptionText"></p>
-                            v-html="this.VinLookupQuestionFooterText"></div>
-                        <buttonQuestion
-                            cmsWidgetName="VinLookupMethod"
-                            :answers="answersFromCms"
-                            groupName="vinLookupMethodOption"
-                            buttonTypeString="listButton"
-                            v-model="selectedVinLookupMethod"
-                            isRequired
-                            validationRules="option-required"
-                            :logDisplayedValuesEvent="true" />
-                    </div>
 
+                    <buttonQuestion
+                        cmsWidgetName="VinLookupMethod"
+                        :answers="answersFromCms"
+                        groupName="vinLookupMethodOption"
+                        buttonTypeString="listButton"
+                        v-model="selectedVinLookupMethod"
+                        isRequired
+                        validationRules="option-required"
+                        :logDisplayedValuesEvent="true" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -29,7 +27,7 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
 
-                    <div class="text-center" v-html="this.VinLookupQuestionFooterText2"></div>
+                    <div class="text-center mb-5" v-html="this.VinLookupQuestionFooterText2"></div>
                 </div>
             </div>
         </div>
@@ -39,6 +37,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
@@ -229,6 +228,12 @@ export default {
         VinLookupQuestionText() {
             return this.getCmsContent("VinLookupQuestion", "BodyText");
         },
+        HeaderText() {
+            return this.getCmsContent("VinLookupQuestion", "HeaderText");
+        },
+        SelectOptionText() {
+            return this.getCmsContent("VinLookupQuestion", "FooterText");
+        },
         VinLookupQuestionBodyText2() {
             return this.getCmsContent("VinLookupQuestion", "BodyText2");
         },
@@ -241,6 +246,7 @@ export default {
     },
     components: {
         funnelHeader,
+        funnelSubHeader,
         navbar,
         buttonQuestion,
         Form,
@@ -249,14 +255,36 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+.header-copy {
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+}
+</style>
+
 <style lang="scss">
 .vinlookupquestion p {
     font-size: 1.25rem;
 }
+.header-sub-copy {
+    font-size: 0.875rem;
+}
+.funnel-sub-header {
+    padding-bottom: 0;
+    h5.dark-header {
+        margin-bottom: 1rem;
+    }
+    .sub-text strong {
+        text-transform: uppercase;
+    }
+}
 
 .select-an-option {
     font-family: UrbanistSemibold;
     font-weight: 600;
     margin-bottom: 1rem;
 }
+.select-option {
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+    font-weight: 600;
+}
 </style>

src/layouts/insurance-company/insurance-company-question.vue

@@ -1,10 +1,11 @@
 <template>
     <textboxQuestion
         v-model="selectedAccountName"
+        ref="insuranceCoQuestion"
         customInputId="autocomplete"
         class="mb-4 mt-5"
         cmsWidgetName="InsuranceCoQuestionWidget"
-        includeSearchIcon />
+        :validationRules="validationRules" />
 </template>
 
 <script>
@@ -35,6 +36,7 @@ export default {
     props: {
         originalList: Array,
         modelValue: String,
+        validationRules: String,
     },
     data() {
         return {

src/layouts/insurance-company/insurance-company.vue

@@ -5,12 +5,14 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" alignLeft />
 
                     <div v-if="originalList.length > 0">
                         <insurance-company-question
+                            isRequired
                             v-model="parentAccountNumber"
-                            :originalList="originalList" />
+                            :originalList="originalList"
+                            validationRules="insurance-company-required" />
                     </div>
                     <textLink
                         id="payOnMyOwnBackButton"
@@ -55,6 +57,10 @@ import { partNumberStrings } from "@/constants/part-number-strings";
 import { deepClone } from "@/helpers/object-helper";
 import store from "@/store";
 import { flushSaveSessionQueue } from "@/helpers/heritage-integration/order-helper";
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+
+defineRule("insurance-company-required", required(errorMessages.INSURANCE_COMPANY_REQUIRED));
 
 export default {
     name: "insurance-company",

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -722,7 +722,7 @@ function setupMocks({
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
     const closestShops = {
         data: {
-            providers: [
+            inShopProviders: [
                 { id: 1, name: "Shop 1" },
                 { id: 2, name: "Shop 2" },
             ],

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -22,16 +22,6 @@
                         mask="#####"
                         validationRules="registration-zip-required|zip-format" />
 
-                    <textboxQuestion
-                        cmsWidgetName="EmailAddressQuestionWidget"
-                        v-model="emailOrSms"
-                        customInputId="emailOrSms"
-                        :isRequired="!IsEmailOptional"
-                        :validationRules="EmailOrSmsValidationRules"
-                        :addOptionalText="IsEmailOptional" />
-
-                    <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
-
                     <alert
                         v-if="displayInvalidZipAlert"
                         class="my-3"
@@ -100,7 +90,6 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -285,7 +274,7 @@ export default {
                     this.serviceZipCode,
                     this.carId
                 );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                this.displayNoServiceAlert = !closestShops?.data?.inShopProviders?.length;
                 if (this.displayNoServiceAlert) {
                     return this.$refs.navbar.removeLoader();
                 }
@@ -459,7 +448,6 @@ export default {
         funnelSubHeader,
         textboxQuestion,
         alert,
-        textBlock,
         Form,
     },
 };

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

@@ -43,8 +43,8 @@
             </div>
         </transition>
         <transition name="fade" mode="out-in">
-            <div class="row mb-4" aria-live="polite">
+            <div class="mb-4" aria-live="polite">
-                <div class="col">
+                <div class="col mb-4">
                     <dropdownQuestion
                         customDropdownId="state"
                         cmsWidgetName="StateQuestionWidget"

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

@@ -67,7 +67,7 @@ beforeEach(() => {
 describe("mobile-details.vue", () => {
     test("if the continue button is clicked, navigate forward", async () => {
         // Arrange
-        const { wrapper } = setupMocks(mobileDetails, {
+        const { wrapper } = setupMocks({
             mixins: [mockMixin],
             attachTo: document.body,
         });
@@ -91,7 +91,7 @@ describe("mobile-details.vue", () => {
     });
     test("arePagePrerequisitesValid should be true ", async () => {
         //Arrange
-        const { wrapper } = setupMocks(mobileDetails, {
+        const { wrapper } = setupMocks({
             mixins: [mockMixin],
             attachTo: document.body,
         });
@@ -105,7 +105,7 @@ describe("mobile-details.vue", () => {
 
     test("if the back button is clicked, navigate back", async () => {
         // Arrange
-        const { wrapper } = setupMocks(mobileDetails, {
+        const { wrapper } = setupMocks({
             mixins: [mockMixin],
             attachTo: document.body,
         });

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

@@ -7,11 +7,26 @@
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <hr class="my-3" />
-                    <textBlock cmsWidgetName="AppointmentTimeOfService" class="time-header" />
+                    <div class="date-time-edit">
+                        <textBlock cmsWidgetName="AppointmentTimeOfService" class="time-header" />
+                        <textLink
+                            linkType="navigation"
+                            :text="editLink"
+                            @click-event="linkClick"
+                            href="javascript:void(0)"
+                            data-bs-target="#footerModal"
+                            data-bs-dismiss="modal" />
+                    </div>
                     <textBlock cmsWidgetName="AppointmentDateAndTime" />
                     <hr class="my-3" />
                     <div class="mobile-location-questions">
                         <div class="address-questions-container">
+                            <textBlock
+                                cmsWidgetName="PleaseProvideAddressWidget"
+                                class="provide-address-header" />
+                            <textBlock
+                                cmsWidgetName="VehicleKeysMessageWidget"
+                                class="keys-message" />
                             <mobileAddressQuestions
                                 ref="addressQuestions"
                                 v-model="this.addressQuestions"
@@ -56,6 +71,8 @@ import store from "@/store";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import textLink from "@/ux-components/text-link/text-link";
+import analyticsMixin from "@/mixins/analytics-mixin";
 export default {
     name: "MobileDetails",
     data() {
@@ -142,6 +159,17 @@ export default {
                 this.pageName
             );
         },
+        linkClick() {
+            // check session expired and initSession to recreate cookies
+            if (analyticsMixin.methods.sessionExpired()) {
+                this.routeReturnUser();
+            } else {
+                this.backButtonAction();
+            }
+        },
+        routeReturnUser() {
+            this.$router.sendToReturnUser();
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_BACK,
@@ -156,6 +184,9 @@ export default {
         AppointmentTimeOfService() {
             return this.getCmsContent("AppointmentDateAndTime", "Text");
         },
+        editLink() {
+            return this.getCmsContent("EditLinkWidget", "Text");
+        },
     },
     components: {
         mobileAddressQuestions,
@@ -166,6 +197,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
+        textLink,
     },
 };
 </script>
@@ -175,5 +207,37 @@ export default {
     font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
     font-weight: 600;
     color: $black;
+    margin-top: 0;
+}
+.provide-address-header {
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+    font-weight: 600;
+    color: $black;
+    line-height: 1.625rem;
+    letter-spacing: 0.03rem;
+}
+.keys-message {
+    background-color: #fff5eb;
+    color: #4d5151;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 0.5rem 1rem 0.5rem 1rem;
+    min-height: 3.656rem;
+    line-height: 1.625rem;
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    border-radius: 5px;
+    letter-spacing: 0;
+}
+.date-time-edit {
+    display: flex;
+    justify-content: space-between;
+}
+:deep(span.unbolded-text) {
+    font-weight: 400;
+    color: $gray-600;
+    font-family: UrbanistRegular;
 }
 </style>

src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue

@@ -108,11 +108,11 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
-    border-radius: $border-radius-lg;
+    border-radius: 50rem;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 
     span {
         &.small {

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

@@ -95,6 +95,7 @@ export default {
     .question-text span {
         text-align: left;
         line-height: 24px;
+        font-weight: 600;
     }
 }
 </style>

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

@@ -5,7 +5,7 @@
         <div class="container payment-method">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
 
                     <hr class="my-0" />
 
@@ -60,14 +60,30 @@
                             class="service-questions" />
                         <textBlock cmsWidgetName="CallOrTextWidget" justifyText="left" />
                         <hr class="my-5" />
-                        <div class="d-flex flex-row checkbox-group">
+                        <div class="d-flex flex-column checkbox-group">
-                            <checkboxQuestion
+                            <Field
-                                cmsWidgetName="RecalConfirmWidget"
+                                name="recalAckOptIn"
-                                class="mb-3"
+                                :rules="'recal-ack-required'"
-                                isRequired="true"
                                 v-model="isRecalAckOptIn"
-                                validationRules="recal-ack-required"
+                                v-slot="{ meta, errors }">
-                                @text-link-clicked="openModal('RecalModal')" />
+                                <checkboxQuestion
+                                    cmsWidgetName="RecalConfirmWidget"
+                                    class="mb-3"
+                                    isRequired="true"
+                                    v-model="isRecalAckOptIn"
+                                    validationRules="recal-ack-required"
+                                    checkboxName="recalAckOptIn"
+                                    :class="{ 'is-invalid': meta.touched && errors.length > 0 }"
+                                    @text-link-clicked="openModal('RecalModal')" />
+                            </Field>
+                            <div id="form-test-error" class="row form-test-error">
+                                <error-message
+                                    role="comment"
+                                    aria-atomic="true"
+                                    aria-live="polite"
+                                    class="small mt-1 text-danger d-block"
+                                    :name="'recalAckOptIn'"></error-message>
+                            </div>
                         </div>
                     </div>
 
@@ -90,7 +106,8 @@
                     <contentGroupModal
                         ref="RecalModal"
                         cmsWidgetName="RecalModal"
-                        class="recal-modal" />
+                        class="recal-modal"
+                        isRecal />
                 </div>
             </div>
         </div>
@@ -158,6 +175,8 @@ import {
 } from "@/helpers/pricing-helper.js";
 import { consumeQueryFromStash } from "@/router/methods/helpers/querystring-stash";
 import { debugLog } from "@/helpers/debug-log-helper";
+import { ErrorMessage } from "vee-validate";
+import { Field } from "vee-validate";
 
 defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
 defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
@@ -733,15 +752,15 @@ export default {
         customCtaCopy() {
             switch (this.paymentMethod) {
                 case paymentMethods.PAY_NOW:
-                    return "Continue to checkout";
+                    return "Continue"; // Before Heritage Parity it was "Continue to checkout"
                 case paymentMethods.INSURANCE:
-                    return "Continue to insurance";
+                    return "Continue"; // Before Heritage Parity it was "Continue to insurance"
                 case paymentMethods.CREDIT_CARD:
-                    return "Continue to checkout";
+                    return "Continue"; // Before Heritage Parity it was "Continue to checkout"
                 case paymentMethods.PAYPAL:
-                    return "Continue to Paypal";
+                    return "Continue"; // Before Heritage Parity it was "Continue to Paypal"
                 case paymentMethods.AFTERPAY:
-                    return "Continue to Afterpay";
+                    return "Continue"; // Before Heritage Parity it was "Continue to Afterpay"
                 default:
                     return null;
             }
@@ -845,6 +864,7 @@ export default {
         navbar,
         funnelSubHeader,
         Form,
+        Field,
         loadingModal,
         cart,
         alert,
@@ -854,6 +874,7 @@ export default {
         checkboxQuestion,
         contentGroupModal,
         afterpayBreakout,
+        ErrorMessage,
     },
 };
 </script>
@@ -877,6 +898,17 @@ export default {
     > * {
         margin-top: 0;
     }
+
+    :deep(.form-check-input:invalid),
+    :deep(.form-check-input[aria-invalid="true"]),
+    :deep(.is-invalid .form-check-input) {
+        border-color: $danger;
+        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+    }
+
+    :deep(.is-invalid .form-check-label) {
+        color: $danger;
+    }
 }
 .questions-about-service {
     .service-questions {
@@ -901,17 +933,31 @@ export default {
         :deep(.modal-body) {
             display: flex;
             flex-direction: column;
+            overflow: visible !important;
+
+            p.subheader-text {
+                color: $red;
+                order: 1 !important;
+                margin-top: -2.25rem;
+            }
             h5 {
-                text-align: center;
+                text-align: left !important;
-                order: 1;
+                order: 2 !important;
             }
             p {
-                order: 3;
+                order: 4;
             }
             img {
-                order: 2;
+                order: 3 !important;
             }
         }
     }
 }
+:deep(span.label) {
+    font-weight: 600;
+}
+:deep(div.service-questions span) {
+    color: $black;
+    font-family: UrbanistSemibold;
+}
 </style>

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

@@ -15,6 +15,31 @@
         <div v-html="apptWordingText" v-show="!isExpanded"></div>
 
         <div class="review-table px-4">
+            <serviceLocationReview
+                class="service-location"
+                cmsWidgetName="ServiceLocationTitleWidget"
+                :serviceLocation="serviceLocationInfo" />
+
+            <hr class="my-0" />
+
+            <scheduleReview cmsWidgetName="ScheduleWidget" :appointmentType="appointmentType" />
+
+            <hr class="my-0" />
+
+            <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
+
+            <hr class="my-0" />
+
+            <damageReview
+                cmsWidgetName="DamageReviewWidget"
+                damageLocationsWidgetName="DamageLocationsWidget"
+                :damage="damageInfo" />
+
+            <hr class="my-0" />
+
+            <customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />
+
+            <!-- the following was the order prior to Heritage parity
             <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
 
             <hr class="my-0" />
@@ -48,6 +73,7 @@
             <hr class="my-0" />
 
             <customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />
+            -->
         </div>
     </div>
 </template>
@@ -119,9 +145,8 @@ export default {
         customerReview,
         damageReview,
         scheduleReview,
-        serviceLocationReview,
-        servicePackageReview,
         vehicleReview,
+        serviceLocationReview,
     },
 };
 </script>

src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.spec.js

@@ -82,7 +82,6 @@ describe("Customer Review Block", () => {
 
         // Assert
         expect(wrapper.vm.displayContent).toEqual([
-            testConstants.displayContent.fullName,
             testConstants.displayContent.emailAddress,
             testConstants.displayContent.phoneNumber,
             testConstants.displayContent.smsOptIn,

src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.vue

@@ -21,7 +21,8 @@ export default {
     },
     computed: {
         displayContent() {
-            return [this.fullName, this.email, this.phoneNumber, this.smsOptIn];
+            return [this.email, this.phoneNumber, this.smsOptIn];
+            // return [this.fullName, this.email, this.phoneNumber, this.smsOptIn]; // prior to Heritage parity
         },
         header() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");

src/layouts/payment/payment.vue

@@ -4,7 +4,7 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container">
             <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                <div class="col-12">
                     <div>
                         <alert
                             ref="piaCCErrorAlert"
@@ -37,45 +37,51 @@
                             seamless
                             scrolling="no"
                             allow="payment *; microphone *; geolocation *;"></iframe>
+
+                        <div id="cart-container">
+                            <cart
+                                ref="cart"
+                                :damage="damageInfo"
+                                :availableVaps="availableVaps"
+                                :allowItemRemoval="false"
+                                v-model="lineItems"
+                                servicePackageOptionsCmsName="ServicePackageTitle"
+                                recyclingModalCmsWidgetName="RecycleModal"
+                                :isInsurance="isInsurance"
+                                :insuranceDeductible="currentDeductible"
+                                :insuranceCompanyName="insuranceCompanyName"
+                                :showInsuranceCoverageAs="showInsuranceCoverageAs"
+                                :isItac="isItac"
+                                :isNoComp="isNoComp"
+                                :isCollapsible="false" />
+
+                            <button
+                                v-if="showSwitchPaymentMethod"
+                                id="submit-payment"
+                                class="btn btn-primary rounded-pill py-3 px-6 delay w-100"
+                                type="button"
+                                @click="submitPayment">
+                                Submit payment
+                            </button>
+
+                            <div class="payment-method-question">
+                                <buttonQuestion
+                                    v-if="showSwitchPaymentMethod"
+                                    groupName="payment-method"
+                                    buttonTypeString="payment-method-list-button"
+                                    :buttonTypeObject="paymentMethodListButton"
+                                    isWide
+                                    :questionText="paymentMethodQuestionText"
+                                    :answers="paymentMethodAnswerData"
+                                    isRequired
+                                    :validationRules="validationRules"
+                                    :showApplePay="false"
+                                    :isInsurance="isInsurance"
+                                    v-model="switchedPaymentMethod" />
+                            </div>
+                        </div>
                     </div>
 
-                    <hr />
-
-                    <cart
-                        ref="cart"
-                        :damage="damageInfo"
-                        :availableVaps="availableVaps"
-                        :allowItemRemoval="false"
-                        v-model="lineItems"
-                        servicePackageOptionsCmsName="ServicePackageTitle"
-                        recyclingModalCmsWidgetName="RecycleModal"
-                        :isInsurance="isInsurance"
-                        :insuranceDeductible="currentDeductible"
-                        :insuranceCompanyName="insuranceCompanyName"
-                        :showInsuranceCoverageAs="showInsuranceCoverageAs"
-                        :isItac="isItac"
-                        :isNoComp="isNoComp"
-                        :isExpandedOnLoad="true" />
-
-                    <div class="payment-method-question">
-                        <buttonQuestion
-                            v-if="showSwitchPaymentMethod"
-                            groupName="payment-method"
-                            buttonTypeString="payment-method-list-button"
-                            :buttonTypeObject="paymentMethodListButton"
-                            isWide
-                            :questionText="paymentMethodQuestionText"
-                            :answers="paymentMethodAnswerData"
-                            isRequired
-                            :validationRules="validationRules"
-                            :showApplePay="false"
-                            :isInsurance="isInsurance"
-                            v-model="switchedPaymentMethod"
-                            textPosition="text-start" />
-                    </div>
-
-                    <hr class="mb-5" />
-
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         isForwardActionDisabled="true"
@@ -889,6 +895,12 @@ export default {
             }
             return false;
         },
+        submitPayment() {
+            const iframe = this.$refs.paymentFrame;
+            if (iframe) {
+                iframe.contentWindow.postMessage("submitPayment", "*");
+            }
+        },
     },
     components: {
         funnelHeader,
@@ -904,18 +916,46 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 650px;
     width: 100%;
+    min-height: 650px;
     border: 0 none;
 }
 #pageLoadingModal {
     background-color: red;
 }
 
+#card-container {
+    display: flex;
+    & > iframe {
+        flex-basis: 55%;
+        margin-right: 9%;
+    }
+    & > #cart-container {
+        flex-basis: 36%;
+        margin-top: 2rem;
+    }
+
+    @include media-breakpoint-down(lg) {
+        flex-direction: column;
+        & > iframe {
+            flex-basis: auto;
+            margin-right: 0;
+        }
+        & > #cart-container {
+            flex-basis: auto;
+            margin: 0 0.5rem;
+
+            & > button#submit-payment {
+                display: none;
+            }
+        }
+    }
+}
 .payment-method-question {
-    padding: 0 1.5rem;
+    padding: 0;
-    .question-text span {
+
-        text-align: left;
+    & .list-button-content {
+        justify-content: center;
     }
 }
 

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

@@ -129,10 +129,7 @@ export default {
     }
 
     .callout {
-        font-family:
+        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
-            UrbanistSemibold Arial,
-            Helvetica,
-            sans-serif;
     }
 
     > div:first-of-type {

src/layouts/quote/quote.spec.js

@@ -10,6 +10,7 @@ import { experimentSettings } from "@/constants/experiments";
 import experimentMixin from "@/mixins/experiment-mixin.js";
 import baseMixin from "@/mixins/base-mixin.js";
 import { containsLineItemWithPartType } from "../../helpers/service-package-helper";
+import { savePageData } from "../../router/methods/helpers/save-page-data";
 
 jest.mock("@/store", () => ({
     commit: jest.fn(), // Mock store.commit
@@ -90,6 +91,10 @@ jest.mock("@/mixins/base-mixin", () => ({
     },
 }));
 
+jest.mock("@/router/methods/helpers/save-page-data", () => ({
+    savePageData: jest.fn(),
+}));
+
 const mockExperimentSettings = experimentSettings;
 
 jest.mock("@/mixins/experiment-mixin.js", () => ({
@@ -963,5 +968,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>
@@ -57,7 +57,7 @@
                         alertClass="alert-info" />
 
                     <promoModalQuestion
-                        class="mt-6 d-flex justify-content-center"
+                        class="mt-6 d-flex"
                         v-model="lineItems"
                         :addableVaps="addableVaps"
                         pageName="quote"
@@ -71,14 +71,17 @@
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                     <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
-                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" isRecal />
+                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         :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,9 +622,9 @@ export default {
     methods: {
         getColCount() {
             if (this.packageNumber > 2) {
-                return "col-xl-10";
+                return "col-xl-12";
             } else {
-                return "col-xl-6";
+                return "col-xl-10";
             }
         },
         currentNumberOfPackagesAction(packageNumber) {
@@ -667,14 +673,12 @@ export default {
         async closeSaveProgressPopup() {
             this.showSaveProgressPopup = false;
 
-            savePageData(this.pageName, { saveProgressPopupSkipped: true }, true);
-
             if (this.skipToInsurance) {
                 // skip ahead now if in IGQ skip experiment
                 await this.skip(true, externalParamPackageLabels.GLASS_ONLY);
             }
         },
-        forwardButtonAction() {
+        async forwardButtonAction() {
             this.dispatchStoreAction(
                 this.storeActions.SAVE_PAYMENT_TYPE,
                 this.isInsuranceSelected,
@@ -745,6 +749,8 @@ export default {
                 false
             );
 
+            await savePageData(this.pageName, { saveProgressPopupSkipped: true }, true);
+
             const payment = this.$store.getters.payment;
             if (payment.isInsurance) {
                 this.$router.navigateWithSaving(
@@ -895,6 +901,7 @@ export default {
 // Unique to quote page for 2.0/Heritage parity
 .quote {
     padding-bottom: 2rem;
+
     :deep(.nav-bar) {
         position: initial;
         button {
@@ -905,9 +912,6 @@ export default {
             position: absolute;
             left: 1rem;
             bottom: 1rem;
-            @include media-breakpoint-up(lg) {
-                left: 6rem;
-            }
         }
         .col-auto {
             width: -webkit-fill-available;
@@ -916,6 +920,63 @@ export default {
             width: -moz-available;
         }
     }
+    .promo-modal-question {
+        @include media-breakpoint-up(md) {
+            justify-content: center;
+        }
+    }
+    //Save email modal ONLY centered on screen for quote page only
+    .save-progress-popup-question {
+        :deep(.modal-component) {
+            .modal-dialog {
+                max-width: 767px;
+                margin: 0 0.5rem;
+                top: 0;
+                @include media-breakpoint-up(md) {
+                    width: 50%;
+                    max-width: 600px;
+                    right: 0;
+                    left: 0;
+                    transform: none;
+                    margin: 0 auto;
+                }
+                .modal-content {
+                    border-radius: 0.5rem;
+                    margin: 0.5rem 0 0 0;
+                    @include media-breakpoint-up(md) {
+                        box-shadow: none;
+                        border-radius: 0;
+                        height: auto;
+                        border-radius: 0.5rem;
+                    }
+                }
+                &.modal-dialog-centered {
+                    height: auto;
+                    min-height: auto;
+                }
+            }
+            .modal-footer {
+                button {
+                    &.btn {
+                        border-radius: 50rem;
+                    }
+                }
+                button {
+                    &.btn {
+                        &.skip-button {
+                            margin: 0 auto 1rem;
+                            color: $blue;
+                            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+                            text-decoration: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    :deep(.cash-or-insurance-question .list-button-horizontal) {
+        box-shadow: none;
+    }
 }
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;

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

@@ -243,12 +243,15 @@ export default {
                         .hide-when-closed {
                             display: block;
                         }
+                        p:first-child {
+                            font-weight: 600;
+                        }
                     }
                 }
                 + .package-label {
-                    background-color: $blue-100;
                     border: 1px solid $blue;
                     max-height: 500px;
+                    background-color: $blue-100;
                     .special-save-box {
                         background-color: $green-200;
                     }
@@ -292,23 +295,33 @@ export default {
                 align-items: center;
             }
 
+            .pricing-info .insurance-pricing span {
+                font-size: 0.875rem;
+                font-family: Urbanist, Arial, Helvetica, sans-serif;
+                font-weight: 500;
+            }
+
             p {
-                font-weight: 600;
+                font-family: Urbanist, Arial, Helvetica, sans-serif;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 white-space: nowrap;
+                &:first-child {
+                    font-weight: 400;
+                }
                 span {
                     &.pricing-info {
                         color: $green;
                         font-size: 0.875rem;
+                        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+                        font-weight: 600;
                         @include media-breakpoint-up(md) {
                             position: absolute;
                             bottom: 0.75rem;
                             left: 0;
                             width: 100%;
                             margin-left: 1.25rem;
-                            font-weight: 600;
                         }
                         span.strikethrough-price {
                             text-decoration: line-through;

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

@@ -105,6 +105,7 @@ export default {
 <style lang="scss" scoped>
 .start-over {
     text-align: center;
+    margin-bottom: 1.5rem;
     a {
         font-weight: 600;
         color: $black;
@@ -114,7 +115,7 @@ export default {
 }
 .return-user {
     .return-user-spacing {
-        margin-top: 14rem;
+        margin-top: 8rem;
     }
 }
 :deep(.menu-modal-container) {

src/layouts/schedule/schedule.vue

@@ -5,63 +5,17 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
-                    <serviceZipModalQuestion
-                        editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
-                        v-model="serviceZipCodeQuestion"
-                        ref="serviceZipCodeQuestion"
-                        :carId="carId"
-                        :isVehicleHeavyTruck="isVehicleHeavyTruck"
-                        :mobileFeePart="mobileFeePart"
-                        @updated-mobile-fee-part="setMobileFeePart"
-                        @updated-recycle-fee-part="setRecycleFeePart"
-                        @updated-serviceability="setServiceabilityDetails"
-                        @updated-contains-military-base="setContainsMilitaryBase"
-                        @updated-bill-to-account-number="setBillToAccountNumber"
-                        @service-zip-changed-from-modal="onServiceZipChanged"
-                        linkWidgetName="ServiceZipLinkWidget"
-                        modalWidgetName="ServiceZipModalWidget" />
-                    <alert
-                        ref="alertMilitaryBaseZip"
-                        class="my-5"
-                        cmsWidgetName="AlertMilitaryBaseZipWidget"
-                        v-if="displayMilitaryZipAlert"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertMobileOnly"
-                        class="my-5"
-                        cmsWidgetName="AlertMobileOnlyWidget"
-                        v-if="displayServiceableMobileOnly"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertRecalNoMobile"
-                        class="my-5"
-                        cmsWidgetName="AlertRecalNoMobileWidget"
-                        v-if="displayRecalibrationWarning"
-                        @text-link-clicked="openModalAction"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertInshopOnly"
-                        class="my-5"
-                        cmsWidgetName="AlertInshopOnlyWidget"
-                        v-if="displayServiceableInshopOnly"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertNoShops"
-                        class="my-5"
-                        cmsWidgetName="AlertNoShopsWidget"
-                        v-if="displayNoShopsAlert"
-                        alertClass="alert-warning" />
                     <alert
                         ref="alertMobileFeeFree"
-                        class="my-5"
+                        class="mb-5"
                         cmsWidgetName="AlertMobileFeeFreeWidget"
                         v-if="showMobileFreeAlert"
                         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">
+                    <funnelSubHeader cmsWidgetName="ScheduleYourServiceWidget" class="mb-5" />
                     <appointmentTypeQuestion
                         v-model="appointmentTypeFromAppointmentTypeQuestion"
                         v-show="isAppointmentTypeDisplayed"
@@ -77,23 +31,79 @@
                         labelBold="true" />
                 </div>
             </div>
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <alert
+                        ref="alertMobileOnly"
+                        class="mt-5 mb-5"
+                        cmsWidgetName="AlertMobileOnlyWidget"
+                        v-if="displayServiceableMobileOnly"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertRecalNoMobile"
+                        class="mb-5"
+                        cmsWidgetName="AlertRecalNoMobileWidget"
+                        v-if="displayRecalibrationWarning"
+                        @text-link-clicked="openModalAction"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertInshopOnly"
+                        class="mt-5 mb-5"
+                        cmsWidgetName="AlertInshopOnlyWidget"
+                        v-if="displayServiceableInshopOnly"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertMilitaryBaseZip"
+                        class="mt-5 mb-5"
+                        cmsWidgetName="AlertMilitaryBaseZipWidget"
+                        v-if="displayMilitaryZipAlert"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertNoShops"
+                        class="mt-5 mb-5"
+                        cmsWidgetName="AlertNoShopsWidget"
+                        v-if="displayNoShopsAlert"
+                        alertClass="alert-warning" />
+                </div>
+            </div>
             <div
-                class="row justify-content-center your-shop-location"
+                v-if="appointmentType && appointmentType === appointmentTypeStrings.MOBILE"
+                class="col-12 col-md-10 col-lg-8 col-xl-7">
+                <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
+                <serviceZipModalQuestion
+                    editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
+                    v-model="serviceZipCodeQuestion"
+                    ref="serviceZipCodeQuestion"
+                    :carId="carId"
+                    :isVehicleHeavyTruck="isVehicleHeavyTruck"
+                    :mobileFeePart="mobileFeePart"
+                    @updated-mobile-fee-part="setMobileFeePart"
+                    @updated-recycle-fee-part="setRecycleFeePart"
+                    @updated-serviceability="setServiceabilityDetails"
+                    @updated-contains-military-base="setContainsMilitaryBase"
+                    @updated-bill-to-account-number="setBillToAccountNumber"
+                    @service-zip-changed-from-modal="onServiceZipChanged"
+                    linkWidgetName="ServiceZipLinkWidget"
+                    modalWidgetName="ServiceZipModalWidget" />
+            </div>
+            <div
+                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
+                    <div>
-                        class="shop-question-button"
+                        <shopLocation
-                        ref="buttonQuestion"
+                            v-if="
-                        :answers="selectedShopAnswer"
+                                appointmentType && appointmentType !== appointmentTypeStrings.MOBILE
-                        :modelValue="selectedProvider?.providerNumber"
+                            "
-                        :isMultiSelect="false"
+                            :selectedShop="selectedShopAnswer"
-                        :readonly="true"
+                            :selectedProviderNumberFromParent="selectedProvider?.providerNumber"
-                        :questionText="questionText"
+                            :shopProviderDataFromParent="shopProviderData"
-                        buttonTypeString="shopListButton"
+                            :zipCodeFromParent="zipCode"
-                        :buttonTypeObject="shopListButton"
+                            :isShopQuestionDisplayed="isShopQuestionDisplayed"
-                        groupName="chooseShop"
+                            @shop-selected="onShopSelected"
-                        textPosition="text-start" />
+                            @updated-serviceability="setServiceabilityDetails" />
-                    <div class="text-center">
+                    </div>
+                    <div>
                         <textBlock
                             v-if="mobileFeeApplies && isMobileSelected"
                             :customText="mobileFeeText"
@@ -101,20 +111,12 @@
                             typeStyle="caption"
                             class="ps-4 pe-4 mt-4" />
                     </div>
-                    <shopQuestionPopup
-                        v-if="isShopQuestionDisplayed"
-                        :selectedProviderNumberFromParent="selectedProvider?.providerNumber"
-                        :shopProviderDataFromParent="shopProviderData"
-                        @shop-selected="onShopSelected"
-                        @updated-serviceability="setServiceabilityDetails"
-                        :zipCodeFromParent="zipCode"
-                        cmsWidgetName="YourSafeliteShopWidget" />
 
                     <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" />
                     <div class="date-picker-header">
                         <funnelSubHeader cmsWidgetName="DatePickerSubHeaderWidget" class="mt-5" />
@@ -180,9 +182,11 @@
 import alert from "@/ux-components/alert/alert";
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
 import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
 import buttonQuestion from "@/digital-components/button-question/button-question.vue";
 import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
+import shopLocation from "@/layouts/schedule/shop-location/shop-location";
 import timeSlotQuestion from "@/layouts/schedule/time-slot-question/time-slot-question.vue";
 import durationTextBlock from "@/layouts/schedule/duration-text-block/duration-text-block.vue";
 
@@ -726,7 +730,12 @@ export default {
             );
         },
         isAppointmentTypeDisplayed() {
-            return this.zipCode && !this.displayNoShopsAlert;
+            return (
+                this.zipCode &&
+                !this.displayNoShopsAlert &&
+                this.isServiceableMobile &&
+                this.isServiceableInshop
+            );
         },
         requiresInshopRecalibration() {
             // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
@@ -798,15 +807,12 @@ export default {
                 const zipCode = this.selectedProvider.address.zipCode;
                 const distanceInMiles = provider ? Math.round(provider.distanceInMiles * 2) / 2 : 0;
 
-                return [
+                return {
-                    {
+                    city: `${city}`,
-                        buttonLabel: `${city}`,
+                    distance: `${distanceInMiles} mi`,
-                        buttonLabelSubCopy: `${distanceInMiles} mi`,
+                    address1: `${streetAddress}`,
-                        buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
+                    address2: `${city}, ${state} ${zipCode}`,
-                        additionalButtonData: this.additionalButtonData,
+                };
-                        value: this.selectedProvider.providerNumber,
-                    },
-                ];
             }
             return [];
         },
@@ -1287,7 +1293,9 @@ export default {
             return store.getters.lineItems.supportingItems;
         },
         updateFooterButtonText(timeSlotInfo) {
-            let navbarButtonText;
+            let navbarButtonText = "Continue";
+            // Archiving the following in case we revert back from Heritage parity
+            /*
             if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
                 navbarButtonText = "Continue";
             } else {
@@ -1322,6 +1330,7 @@ export default {
                     )}`;
                 }
             }
+            */
             this.$refs.navbar.updateButtonText(navbarButtonText);
         },
         convertSelectedDateToShortMonthAndDay(selectedDate) {
@@ -1697,7 +1706,7 @@ export default {
                     },
                 };
             } else if (
-                !this.selectedProvider?.address?.streetAddress &&
+                (!this.selectedProvider?.address?.streetAddress || this.isVehicleHeavyTruck) &&
                 this.shopProviderData?.shopProviders?.length
             ) {
                 this.selectedProvider = this.shopProviderData.shopProviders[0];
@@ -1826,51 +1835,68 @@ export default {
         shopQuestionPopup,
         buttonQuestion,
         durationTextBlock
+        shopLocation,
     },
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.container-fluid {
+.container {
-    &.page-schedule {
+    .question-text {
-        padding: 0 1rem;
+        margin-bottom: 1.5rem;
-        .text-link-small {
+
-            a,
+        & > span {
-            .btn-link {
+            display: flex;
-                width: auto;
+            justify-content: flex-start;
-                margin: 0 auto;
+            margin-bottom: 0.25rem;
-                height: auto;
-                font-size: 0.875rem;
-                line-height: 1.75;
-                padding: 0;
-                border-radius: 0;
-                &:focus {
-                    outline: 1px solid $blue;
-                }
-                @include media-breakpoint-up(md) {
-                    font-size: 1rem;
-                }
-            }
-        }
-        .funnel-sub-header {
-            h5.dark-header {
-                margin-bottom: 0.25rem;
-            }
-        }
-        .change-location a {
-            font-family: UrbanistSemibold;
-        }
-        .date-picker {
-            border-top: 1px solid $gray-500;
-            margin-top: 1.5rem;
-        }
-        .time-slots-question {
-            padding: 0 0.75rem;
         }
     }
 }
+.alert.alert-warning {
+    .alert-heading {
+        color: $black;
+        font-family: UrbanistSemibold;
+        font-size: 1rem;
+    }
+}
+
 .shop-question-button .list-button-content {
     background: $blue-100;
     box-shadow: 0 0 0 1px $primary;
 }
+
+.container .row .col-12 .alert-success .alert-heading {
+    color: $black;
+    font-weight: 600;
+}
+
+:deep(.funnel-sub-header:not(.mb-5)) {
+    h5.dark-header {
+        font-weight: 600;
+        font-size: 1rem;
+    }
+}
+
+.col-12 a {
+    font-family: UrbanistSemibold;
+    font-weight: 600;
+    line-height: 26px;
+    text-underline-offset: 4px;
+}
+
+.text-block.duration-text-block b {
+    font-family: UrbanistSemibold;
+}
+:deep(.alert-warning.widget-name-AlertRecalNoMobileWidget .alert-heading),
+:deep(.alert-success.widget-name-AlertMobileFeeFreeWidget .alert-heading) {
+    color: $black;
+    font-weight: 600;
+    font-size: 1rem;
+
+    * {
+        color: $black;
+        font-weight: 600;
+        font-size: 1rem;
+    }
+}
 </style>

src/layouts/schedule/shop-location/shop-location.vue

@@ -0,0 +1,121 @@
+<template>
+    <div id="shop-location">
+        <textBlock :customText="questionText" typeStyle="button-question" class="mb-2" />
+        <div>
+            <div>
+                <label v-for="addressItem in addressDetails" :key="addressItem">
+                    {{ addressItem }}
+                </label>
+            </div>
+            <div>
+                <label>{{ selectedShop.distance }}</label>
+            </div>
+        </div>
+
+        <shopQuestionPopup
+            v-if="isShopQuestionDisplayed"
+            :selectedProviderNumberFromParent="selectedProviderNumberFromParent"
+            :shopProviderDataFromParent="shopProviderDataFromParent"
+            :zipCodeFromParent="zipCodeFromParent"
+            @shop-selected="onShopSelected"
+            @updated-serviceability="setServiceabilityDetails"
+            cmsWidgetName="YourSafeliteShopWidget" />
+    </div>
+</template>
+
+<script>
+import textBlock from "@/digital-components/text-block/text-block";
+import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
+
+export default {
+    name: "shopLocation",
+    props: {
+        selectedShop: {
+            type: Object,
+            default: () => ({
+                city: null,
+                distance: null,
+                address1: null,
+                address2: null,
+            }),
+        },
+        isShopQuestionDisplayed: {
+            type: Boolean,
+            default: false,
+        },
+        selectedProviderNumberFromParent: {
+            type: String,
+            default: null,
+        },
+        shopProviderDataFromParent: {
+            type: Object,
+            default: () => ({}),
+        },
+        zipCodeFromParent: {
+            type: String,
+            default: null,
+        },
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
+        },
+        addressDetails() {
+            const { distance, ...addressDetails } = this.selectedShop;
+            return addressDetails;
+        },
+    },
+    components: {
+        textBlock,
+        shopQuestionPopup,
+    },
+    methods: {
+        onShopSelected(shopQuestionPopUpData) {
+            this.$emit("shop-selected", shopQuestionPopUpData);
+        },
+        setServiceabilityDetails(serviceabilityDetails) {
+            this.$emit("updated-serviceability", serviceabilityDetails);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+#shop-location {
+    & > div {
+        display: flex;
+        justify-content: space-between;
+
+        & > div {
+            display: flex;
+            flex-direction: column;
+
+            label {
+                font-size: 0.875rem;
+            }
+        }
+    }
+
+    & > div.shop-question {
+        width: 172px;
+    }
+}
+</style>
+<style lang="scss">
+#shop-location {
+    & > div.shop-question {
+        width: fit-content;
+        background-color: $blue;
+        border-radius: $border-radius-pill;
+
+        a {
+            display: inline-block;
+            text-decoration: none;
+            color: $white;
+            font-weight: $font-weight-600;
+            line-height: 1.5rem;
+            padding: 0.75rem 3rem;
+        }
+    }
+}
+</style>

src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue

@@ -90,11 +90,11 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
-    border-radius: $border-radius-lg;
+    border-radius: $border-radius-pill;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 
     span.premium-appointment-price {
         position: absolute;

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

@@ -601,7 +601,7 @@ export default {
         }
     }
     .waitlist {
-        box-shadow: 0px 1px 4px 0px #00000033;
+        box-shadow: 0 1px 5px 0 #00000033;
         border-radius: 8px;
         font-size: $h6-font-size;
         padding: 16px;
@@ -611,7 +611,7 @@ export default {
             padding-left: 0px;
             input {
                 border-radius: 4px;
-                box-shadow: 0px 1px 4px 0px #00000033;
+                box-shadow: 0 1px 5px 0 #00000033;
             }
         }
         .form-check-input {

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

@@ -5,10 +5,12 @@
             v-model="selectedAnswerForDropOffOrInshop"
             @update:modelValue="dropOffSelectionChanged"
             :questionText="dropOffOrPickATimeQuestionLabelText"
+            :questionTextDescription="dropOffOrPickATimeQuestionDescription"
             :answers="answersForDropOffQuestion"
             isRequired
             insertOrLabelBeforeFinalOption
             groupName="chooseDropOffOrInshop"
+            class="choose-dropoff-or-inshop"
             validationRules="time-slot-required">
             <div>
                 <alert
@@ -32,6 +34,7 @@
                 isInshopOrDropOffAppointment ? 'is-inshop-or-drop-off-appointment' : '',
             ]"
             :answers="availableTimeSlots"
+            :lazyLoad="{ isLazyLoad: !isMobileAppointment, amountToLoad: 10 }"
             groupName="chooseTimeSlot"
             textPosition="text-center"
             v-model="selectedAnswerForTimeSlots"
@@ -49,6 +52,7 @@
                 cmsWidgetName="WaitListLabelWidget"
                 typeStyle="medium"
                 fontWeight="600"
+                class="waitlist-label"
                 marginTopSizeOverride="0" />
             <checkboxQuestion
                 class="mt-3"
@@ -194,7 +198,8 @@ export default {
             if (
                 this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
                 this.appointmentType === AppointmentTypeStrings.IN_SHOP ||
-                this.appointmentType === AppointmentTypeStrings.DROP_OFF
+                this.appointmentType === AppointmentTypeStrings.DROP_OFF ||
+                !this.availableTimeSlots
             ) {
                 return null;
                 // This is planned to be used again for drop-off
@@ -225,6 +230,10 @@ export default {
         dropOffOrPickATimeQuestionLabelText() {
             return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "QuestionText");
         },
+        dropOffOrPickATimeQuestionDescription() {
+            // This is hardcoded because Input Question Widget doesn't currently have a place to add additional text
+            return "You can drop off your vehicle in the morning and pick it up later in the day with Drop & Go<sup>&#8482</sup> or pick an appointment time.";
+        },
         pickATimeButtonLabelText() {
             return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "Answers")[0]
                 .Text;
@@ -555,18 +564,31 @@ export default {
             margin-bottom: 8px;
         }
     }
+    .button-question.choose-dropoff-or-inshop
+        .button-inner-wrapper
+        .col:first-child
+        .button-content.list-button-content
+        > span::after {
+        content: "TM";
+        vertical-align: super;
+        font-size: 50%;
+    }
     .waitlist {
-        box-shadow: 0px 1px 4px 0px #00000033;
+        box-shadow: 0 1px 5px 0 #00000033;
         border-radius: 8px;
         font-size: 1rem;
         padding: 16px;
         text-align: left;
 
+        .waitlist-label {
+            font-family: UrbanistSemibold;
+        }
+
         .ui-checkbox {
             padding-left: 0px;
             input {
                 border-radius: 4px;
-                box-shadow: 0px 1px 4px 0px #00000033;
+                box-shadow: 0 1px 5px 0 #00000033;
             }
         }
         .form-check-input {

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -7,7 +7,6 @@
                 :questionText="questionText"
                 :answers="answersToDisplay"
                 :groupName="groupName"
-                buttonTypeString="listCard"
                 v-model="selectedValue"
                 :suppressError="suppressError"
                 :validationRules="validationRules"
@@ -134,4 +133,12 @@ export default {
         width: auto;
     }
 }
+div.appointment-type-question div.button-question div.col div.button-content {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+div.appointment-type-question div.button-question div.question-text span {
+    font-weight: 600;
+    font-family: UrbanistRegular;
+}
 </style>

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -178,7 +178,7 @@ export default {
                             "service-location"
                         );
 
-                        if (!closestShops || closestShops.providers?.length === 0) {
+                        if (!closestShops || closestShops.inShopProviders?.length === 0) {
                             this.displayNoServiceAlert = true;
                             this.focusOnZipInput();
                             this.resetModalButtonStyle();
@@ -214,14 +214,19 @@ export default {
                     );
 
                     // update content related to service zip code
-                    this.$emit("updated-mobile-fee-part", mobileFeePart);
+                    if (this.internalModel.zipCode !== this.modelValue.zipCode) {
-                    this.$emit("updated-recycle-fee-part", recycleFeePart);
+                        this.$emit("updated-mobile-fee-part", mobileFeePart);
-                    this.$emit("updated-serviceability", serviceabilityDetails.data);
+                        this.$emit("updated-recycle-fee-part", recycleFeePart);
-                    this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
+                        this.$emit("updated-serviceability", serviceabilityDetails.data);
-                    this.$emit("updated-bill-to-account-number", billToAccountNumber);
+                        this.$emit(
-                    this.$emit("service-zip-changed-from-modal");
+                            "updated-contains-military-base",
-                    // update the page level model
+                            zipCodeData.containsMilitaryBase
-                    this.$emit("update:modelValue", this.internalModel);
+                        );
+                        this.$emit("updated-bill-to-account-number", billToAccountNumber);
+                        this.$emit("service-zip-changed-from-modal");
+                        // update the page level model
+                        this.$emit("update:modelValue", this.internalModel);
+                    }
 
                     this.closeModal();
                 }

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

@@ -177,7 +177,7 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 
     span {
         &.small {

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

@@ -12,6 +12,7 @@
     </transition>
     <modal
         ref="shopQuestionModal"
+        class="shop-question-popup"
         :headerText="modalHeaderText"
         :onModalOpenedCallback="updateSelectedAnswer"
         :onModalClosedCallback="resetZipCodeData"
@@ -48,7 +49,13 @@
                 cmsWidgetName="AlertNoShopsWidget"
                 v-if="displayNoShopsAlert"
                 alertClass="alert-warning" />
-            <div v-if="!displayInvalidZipAlert">
+            <alert
+                ref="alertNoShops"
+                class="my-5"
+                cmsWidgetName="AlertNoServiceWidget"
+                v-if="displayNoServiceAlert"
+                alertClass="alert-danger" />
+            <div v-if="displayShopsList">
                 <buttonQuestion
                     ref="buttonQuestion"
                     buttonTypeString="shopListButton"
@@ -116,6 +123,7 @@ export default {
             localSelectedProviderNumber: null,
             zipCodeData: null,
             isLoading: false,
+            displayNoServiceAlert: false,
         };
     },
     props: {
@@ -148,6 +156,9 @@ export default {
         displayNoShopsAlert() {
             return !this.shopProviders.length && !this.displayInvalidZipAlert;
         },
+        displayShopsList() {
+            return !this.displayInvalidZipAlert && !this.displayNoServiceAlert;
+        },
         modal() {
             return this.$refs.shopQuestionModal;
         },
@@ -170,6 +181,7 @@ export default {
                 this.isLoading ||
                 this.displayInvalidZipAlert ||
                 this.displayNoShopsAlert ||
+                this.displayNoServiceAlert ||
                 !this.localSelectedProviderNumber
             );
         },
@@ -199,6 +211,7 @@ export default {
         openModal() {
             // Reset local state from parent
             this.zipCodeData = null;
+            this.displayNoServiceAlert = false;
             this.localShopProviderData = this.shopProviderDataFromParent;
             this.localZipCode = this.zipCodeFromParent;
             // This will be set once the modal is open (updateSelectedAnswer()) to ensure that the
@@ -258,6 +271,7 @@ export default {
         },
         async onSearchZip(event) {
             event.preventDefault();
+            this.displayNoServiceAlert = false;
             if (!this.localZipCode) {
                 this.zipCodeData = {
                     isValid: false,
@@ -265,30 +279,31 @@ export default {
                 return;
             }
             this.isLoading = true;
+
             this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
             // Add zipCode to zipCodeData as it does not come back from endpoint
             this.zipCodeData.zipCode = this.localZipCode;
             if (this.zipCodeData.isValid) {
-                if (this.isVehicleHeavyTruck) {
+                if (this.$store.getters.order.vehicle?.isBigTruck) {
                     // check the location endpoint to verify this zip can service a heavy truck
                     const closestShops = await getClosestApplicableShops(
                         this.localZipCode,
-                        this.carId,
+                        this.$store.getters.order.vehicle.carId,
                         "service-location"
                     );
-
                     if (!closestShops || closestShops.providers?.length === 0) {
-                        // We need an alert for heavy trucks
+                        this.isLoading = false;
+                        this.displayNoServiceAlert = true;
                         return null;
                     }
-                } else {
-                    getShopProviderData(this.localZipCode).then(async (result) => {
-                        this.localShopProviderData = result.data;
-                        this.numberOfShopsToDisplay = 3;
-                        this.updateShopsForZip();
-                        this.isLoading = false;
-                    });
                 }
+
+                getShopProviderData(this.localZipCode).then(async (result) => {
+                    this.localShopProviderData = result.data;
+                    this.numberOfShopsToDisplay = 3;
+                    this.updateShopsForZip();
+                    this.isLoading = false;
+                });
             } else {
                 this.isLoading = false;
             }
@@ -378,6 +393,25 @@ export default {
 .modal.modal-component .modal-dialog .modal-content .modal-body .textbox-question {
     padding: 0;
 }
+.modal.shop-question-popup .btn.btn-primary {
+    background: $blue;
+
+    &:focus,
+    &:focus-visible {
+        box-shadow:
+            0 0 0 3px,
+            0 0 0 5.5px $blue;
+    }
+
+    &.form-test-invalid {
+        background: #d4d6d8;
+
+        &:focus,
+        &:focus-visible {
+            box-shadow: none;
+        }
+    }
+}
 .shop-question-zipcode {
     display: flex;
     flex-direction: row;

src/layouts/service-zip/service-zip.vue

@@ -16,17 +16,6 @@
                             isRequired
                             validationRules="zip-required|zip-format" />
 
-                        <textboxQuestion
-                            class="mb-0"
-                            cmsWidgetName="EmailAddressQuestionWidget"
-                            v-model="emailOrSms"
-                            inputId="emailOrSms"
-                            :isRequired="!IsEmailOptional"
-                            disableAutoFill
-                            :validationRules="EmailOrSmsValidationRules"
-                            :addOptionalText="IsEmailOptional" />
-                        <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
-
                         <alert
                             ref="alertInvalidZip"
                             v-if="displayInvalidZipAlert"
@@ -71,7 +60,6 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import textBlock from "@/digital-components/text-block/text-block";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 //Supporting Files
@@ -277,7 +265,7 @@ export default {
                     this.serviceZipCode,
                     this.carId
                 );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                this.displayNoServiceAlert = !closestShops?.data?.inShopProviders?.length;
                 if (this.displayNoServiceAlert) {
                     return this.$refs.navbar.removeLoader();
                 }
@@ -348,7 +336,6 @@ export default {
         Form,
         alert,
         textboxQuestion,
-        textBlock,
         loadingModal,
     },
 };

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

@@ -1,10 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container">
+        <div class="container vehicle-damage">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mb-7" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mb-4" />
                     <alert
                         ref="vehicleChangeAlert"
                         v-if="shouldDisplayVehicleChangeAlert"
@@ -755,11 +755,31 @@ export default {
 </script>
 
 <style lang="scss">
-.replace-options-question {
+.vehicle-damage {
+    .base-input-button:not(.has-error):hover.list-card:not(.selected) {
+        border-radius: 0.5rem;
+    }
     .question-text {
-        margin: 1rem 0 0 0;
+        margin: 1.5rem 0 0.5rem 0;
+    }
+}
+.replace-options-question {
+    .base-input-button:not(.has-error):hover.list-card:not(.selected) {
+        border-radius: 50rem;
+    }
+    .button-question {
+        label {
+            &.list-card,
+            &.list-card input[type="checkbox"]:checked + .list-card-content,
+            &.list-card input[type="radio"]:checked + .list-card-content {
+                border-radius: 50rem;
+            }
+        }
+    }
+    .question-text {
+        margin: 1.5rem 0 0.5rem 0;
         @include media-breakpoint-up(md) {
-            margin: 1rem 0;
+            margin: 1.5rem 0 0.5rem 0;
         }
     }
     .two-list-card-width {

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -27,17 +27,17 @@
                                 :colorAnswers="item.colorAnswers"
                                 :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
                         </div>
+                        <hr class="mt-7 mb-0" />
+                        <saveProgressModalQuestion
+                            modalWidgetName="SaveProgressModalWidget"
+                            pageName="vehicle-parts"
+                            v-if="showSaveProgressModal" />
                         <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             ref="navbar"
                             :isForwardActionDisabled="isForwardActionDisabled"
                             @back-clicked="navigateBack"
                             @ForwardClicked="forwardButtonAction" />
-
-                        <saveProgressModalQuestion
-                            modalWidgetName="SaveProgressModalWidget"
-                            pageName="vehicle-parts"
-                            v-if="showSaveProgressModal" />
                     </div>
                 </div>
             </div>
@@ -238,14 +238,24 @@ export default {
 </script>
 
 <style lang="scss">
+html .has-error.list-card:hover {
+    border-radius: 50rem;
+}
 .vehicle-parts {
     label {
         &.list-card {
             height: auto;
+            border-radius: 50rem;
+            input[type="radio"]:checked + .list-card-content {
+                border-radius: 50rem;
+            }
         }
     }
     .two-list-card-width {
         width: 100%;
     }
+    .save-progress-modal-question {
+        margin: 1rem 0;
+    }
 }
 </style>

src/layouts/vehicle/vehicle.vue

@@ -1,10 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container">
+        <div class="container vehicle">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
+                    <funnelSubHeader
+                        cmsWidgetName="FunnelSubHeaderWidget"
+                        class="siteSubHeader"
+                        :alignLeft="true" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"
                         v-model="selectedYear"
@@ -483,6 +486,37 @@ export default {
         },
         async forwardButtonAction() {
             await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_STATE);
+            let zipCodeData;
+            if (this.isBigTruck) {
+                zipCodeData = await this.getZipCodeData(this.serviceZipCode);
+
+                // check the location endpoint to verify this zip can service a heavy truck
+                var closestShops = await this.dispatchStoreActionWithLogging(
+                    storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
+                    { zip: this.serviceZipCode, carId: this.carId },
+                    "vehicle"
+                );
+                if (!closestShops?.data?.providers || closestShops.data.providers.length === 0) {
+                    this.displayNoServiceAlert = true;
+                    if (store.getters.externalParameterState?.isExternalParameter) {
+                        return baseMixin.methods.ResetExternalParamsAndHideModal();
+                    }
+                    return this.$refs.navbar.removeLoader();
+                }
+            }
+
+            if (zipCodeData) {
+                await this.dispatchStoreAction(
+                    storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
+                    {
+                        zipCode: this.serviceZipCode,
+                        state: zipCodeData.state,
+                        zipCodeCtu: zipCodeData.zipCodeCtu,
+                    },
+                    false
+                );
+            }
+
             this.dispatchStoreAction(
                 storeActions.SAVE_VEHICLE,
                 {
@@ -503,34 +537,6 @@ export default {
                 false
             );
 
-            if (this.isBigTruck) {
-                const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
-                await this.dispatchStoreAction(
-                    storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
-                    {
-                        zipCode: this.serviceZipCode,
-                        state: zipCodeData.state,
-                        zipCodeCtu: zipCodeData.zipCodeCtu,
-                    },
-                    false
-                );
-
-                // check the location endpoint to verify this zip can service a heavy truck
-                var closestShops = await this.dispatchStoreActionWithLogging(
-                    storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
-                    { zip: this.serviceZipCode, carId: this.carId },
-                    "vehicle"
-                );
-
-                if (!closestShops || closestShops.data?.providers?.length === 0) {
-                    this.displayNoServiceAlert = true;
-                    if (store.getters.externalParameterState?.isExternalParameter) {
-                        return baseMixin.methods.ResetExternalParamsAndHideModal();
-                    }
-                    return this.$refs.navbar.removeLoader();
-                }
-            }
-
             this.$router.navigateWithSaving(
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.pageName
@@ -631,8 +637,7 @@ export default {
     margin-bottom: 0;
 }
 .siteSubHeader {
-    margin-top: 1.5rem;
+    margin: 0;
-    margin-bottom: 0;
 }
 .separator-line {
     grid-area: 2/1/2/8;

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

@@ -55,6 +55,7 @@ export default {
     }
     a {
         font-size: 0.875rem;
+        text-decoration: none;
     }
     .vin-toggle {
         display: inline-flex;
@@ -80,6 +81,10 @@ export default {
             opacity: 1;
             visibility: visible;
         }
+        a {
+            text-decoration: none;
+            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+        }
     }
     .vin-info {
         max-height: 0;

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

@@ -40,16 +40,6 @@
                         isRequired
                         validationRules="zip-required|zip-format" />
 
-                    <textboxQuestion
-                        cmsWidgetName="EmailAddressQuestionWidget"
-                        v-model="emailOrSms"
-                        customInputId="emailOrSms"
-                        :isRequired="!IsEmailOptional"
-                        :validationRules="EmailOrSmsValidationRules"
-                        :addOptionalText="IsEmailOptional" />
-
-                    <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
-
                     <alert
                         ref="alertInvalidZip"
                         v-if="displayInvalidZipAlert"
@@ -135,7 +125,6 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
-import textBlock from "@/digital-components/text-block/text-block";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 // Supporting files
@@ -352,7 +341,7 @@ export default {
                         this.serviceZipCode,
                         this.carId
                     );
-                    this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                    this.displayNoServiceAlert = !closestShops?.data?.inShopProviders?.length;
                     if (this.displayNoServiceAlert) {
                         return this.$refs.navbar.removeLoader();
                     }
@@ -590,7 +579,6 @@ export default {
         textboxQuestion,
         alert,
         vinInformation,
-        textBlock,
         Form,
         loadingModal,
     },

src/mixins/analytics-mixin.js

@@ -133,15 +133,6 @@ export default {
             const currentPageName = getPageNameFromRouter();
             const universes = store.getters.applicationUser.experiments;
 
-            let hasDynamoLogging = experimentMixin.methods.hasSettingEqualTo(
-                experimentSettings.DYNAMO_LOGGING,
-                "true",
-                universes
-            );
-            if (!hasDynamoLogging) {
-                return;
-            }
-
             const variationNames = universes
                 .filter((item) => item.universeName === experimentUniverses.CONCEPT_FUNNEL)
                 .map((item) => item.variationName)

src/store/index.js

@@ -695,6 +695,7 @@ export const mutations = {
             vehicleSubType: sessionInformation.order.vehicle?.vehicleSubType,
             vehicleSpecialClass: sessionInformation.order.vehicle?.vehicleSpecialClass,
             isBigTruck: sessionInformation.order.vehicle?.isBigTruck,
+            canSafeliteService: sessionInformation.order.vehicle?.canSafeliteService,
         });
 
         state.order.damage.glassToReplace = sessionInformation.order.damage.glassToReplace;
@@ -2277,6 +2278,7 @@ export const actions = {
                         vehicleSubType: vehicle.vehicleSubType,
                         vehicleSpecialClass: vehicle.vehicleSpecialClass,
                         isBigTruck: vehicle.isBigTruck,
+                        canSafeliteService: vehicle.canSafeliteService,
                         registration: {
                             firstName: vehicle.registration.firstName,
                             lastName: vehicle.registration.lastName,

src/styles/common-error-styles.scss

@@ -13,6 +13,7 @@ html {
             &:hover {
                 @include box-shadow-hover($red-200);
                 z-index: 5;
+                border-radius: 50rem;
             }
 
             input[type="radio"]:focus + .list-button-content {
@@ -133,6 +134,7 @@ html {
                     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%23d4281c'/%3E%3C/svg%3E%0A");
                     border: 1px solid $red;
                     border-left: none;
+                    border-radius: 0 0.5rem 0.5rem 0;
                 }
             }
         }

src/styles/shared-input-button-styles.scss

@@ -4,31 +4,27 @@
             cursor: pointer;
 
             &.list-button,
-            &.list-button-horizontal,
+            &.list-button-horizontal {
-            &.list-card {
                 &:not(.selected) {
                     position: relative;
                     z-index: 5;
                     @include box-shadow-hover($blue-300);
-                    border-radius: 50rem;
+                    border-radius: $border-radius-pill;
                 }
             }
         }
     }
-}
 
-.base-input-button {
     &:not(.has-error):hover {
         cursor: pointer;
 
         &.list-button,
-        &.list-button-horizontal,
+        &.list-button-horizontal {
-        &.list-card {
             &:not(.selected) {
                 position: relative;
                 z-index: 5;
                 @include box-shadow-hover($blue-300);
-                border-radius: 0.5rem;
+                border-radius: $border-radius-pill;
             }
         }
     }

src/ux-components/alert/alert.vue

@@ -145,6 +145,8 @@ export default {
 <style lang="scss">
 .alert {
     padding: 0.675rem 0;
+    border-radius: 0.5rem;
+    border-width: 0px;
 
     button {
         display: none;