Merge branch 'develop' into feature/humphries/INSR-7768

2026-01-16 12:46:19 -05:00 · 2026-01-16 12:46:19 -05:00 · 67faf453ea
commit 67faf453ea
parent d6762e85a8 c6df7d9771
37 changed files with 5451 additions and 1898 deletions
--- a/azure-pipelines-automated-testing.yml
+++ b/azure-pipelines-automated-testing.yml
@ -8,9 +8,18 @@ schedules:
    - develop
 pool: 'Default'

+resources:
+  repositories:
+      - repository: AzureDevOps
+        type: github
+        name: Safelite/AzureDevOps
+        endpoint: Safelite
+        ref: refs/tags/t5.7.40
+
 variables:
  # - group: Digital-Infrastructure
  # - group: ISS-BuildBranches
+  - group: SafelitePlaywright
  - name: dockerImageName
    value: 'playwright-tests'
  - name: imageTag
@ -30,158 +39,17 @@ stages:
  - stage: TestPr
    displayName: Run Playwright Test
    jobs:
-    - job: playwright_tests
-      continueOnError: true
-      strategy:
-        matrix:
-          shard1:
-            shardNumber: 1
-          shard2:
-            shardNumber: 2
-          shard3:
-            shardNumber: 3
-          shard4:
-            shardNumber: 4
-
-      steps:
-      - task: Docker@2
-        displayName: 'Build Docker Image'
-        inputs:
-          command: build
-          dockerfile: Dockerfile.playwright
-          repository: $(dockerImageName)
-          tags: $(imageTag)
-          arguments: '--no-cache --pull'
-
-      - script: |
-          # Create container and run tests
-          container_id=$(docker create \
-            --ipc=host \
-            -e CCIS_API_AUTH=$(CCIS_API_AUTH) \
-            -e BASE_URL=$(BASE_URL) \
-            -e CCIS_API_URL=$(CCIS_API_URL) \
-            -e ADMIN_SERVICE_API_URL=$(ADMIN_SERVICE_API_URL) \
-            -e SHARD=$(shardNumber) \
-            -e CI=true \
-            -e NODE_ENV=$(NODE_ENV) \
-            $(dockerImageName):$(imageTag) \
-            npx concurrently -k -n "server,playwright"\
-            "sed -i \"s|^process\.env\.VUE_APP_CONSUMER_CF_DISTRO = .*|process\.env\.VUE_APP_CONSUMER_CF_DISTRO='https://digitalapi.test.safelite.io'|\" \"./vue.config.js\" && echo \"Updated config file to use TEST APIs\" && npm run serve -- --port=8080"\
-            "npx wait-on http://localhost:8080 && npm run test:playwright -- --shard=$(shardNumber)/$(totalShards) --reporter=list,blob --grep \"@smoke|@Advanced\"")
-
-          # Start container and stream logs
-          echo "Starting tests for shard $(shardNumber)..."
-          docker start -a $container_id
-
-          # Create directory for test results
-          echo "Creating test results directory..."
-          mkdir -p $(System.DefaultWorkingDirectory)/blob-reports/shard-$(shardNumber)
-
-          # Copy test results from container
-          echo "Copying test results..."
-          docker cp $container_id:/app/blob-report/. $(System.DefaultWorkingDirectory)/blob-reports/shard-$(shardNumber)/
-
-          # Remove container
-          echo "Cleaning up container..."
-          docker rm $container_id
-
-          # Check if tests failed
-          if [ $? -ne 0 ]; then
-            echo "Tests failed in shard $(shardNumber) or tests don't exist for this shard number!"
-            exit 0  # Suppress error. It will be visible in report.
-          fi
-        displayName: 'Run Playwright Tests - Shard $(shardNumber)'
-
-      - task: PublishPipelineArtifact@1
-        displayName: 'Publish Test Reports - Shard $(shardNumber)'
-        condition: always()
-        inputs:
-          targetPath: '$(System.DefaultWorkingDirectory)/blob-reports/shard-$(shardNumber)'
-          artifact: 'playwright-report-shard-$(shardNumber)'
-          publishLocation: 'pipeline'
-
-      - script: |
-          docker rmi $(dockerImageName):$(imageTag) -f
-        displayName: 'Cleanup Docker Image'
-        condition: always()
-
-    - job: download_and_merge_reports
-      dependsOn: playwright_tests
-      timeoutInMinutes: 8
-      cancelTimeoutInMinutes: 10
-      steps:
-      - task: DownloadPipelineArtifact@2
-        inputs:
-          targetPath: '$(System.DefaultWorkingDirectory)/playwright-reports'
-      - task: Docker@2
-        displayName: 'Build Docker Image'
-        inputs:
-          command: build
-          dockerfile: Dockerfile.playwright
-          repository: $(dockerImageName)
-          tags: $(imageTag)
-          arguments: '--no-cache --pull'
-      - bash: |
-            # Create container for jira writeback
-            container_id=$(docker create \
-            --ipc=host \
-            -e JIRA_SERVER=$(JIRA_SERVER) \
-            -e JIRA_USERNAME=$(JIRA_USERNAME) \
-            -e JIRA_API_KEY=$(JIRA_API_KEY) \
-            -e IS_REGRESSION=$(IS_REGRESSION) \
-            -e JIRA_BOARD_ID=$(JIRA_BOARD_ID) \
-            -e JIRA_EPIC_KEY=$(JIRA_EPIC_KEY) \
-            -e JIRA_PROJECT_KEY=$(JIRA_PROJECT_KEY) \
-            $(dockerImageName):$(imageTag) \
-            bash -c "echo \"Moving Playwright reports out of subfolders...\" &&
-              find ./playwright-reports/ -mindepth 2 -type f -exec mv {} ./playwright-reports/ \; &&
-              echo \"Merging reports...\" && 
-              PLAYWRIGHT_JUNIT_OUTPUT_DIR='/app/test-results' PLAYWRIGHT_JUNIT_OUTPUT_NAME='junit_results.xml' npx playwright merge-reports --reporter='playwright-tests/impl/reporter/JiraWritebackReporter.ts',junit ./playwright-reports
-              echo \"Contents of ortoni-report:\" && ls ./ortoni-report &&
-              echo 'Current dir: ' && pwd
-              echo 'Contents of current dir: ' && ls
-              echo 'Contents of /app/test-results' && ls /app/test-results ")
-
-            # Start container and stream logs
-            echo "Starting merge"
-            docker start -a $container_id
-
-            # Create directory for test results
-            echo "Creating test results directory..."
-            mkdir -p $(System.DefaultWorkingDirectory)/ortoni-report
-            mkdir -p $(System.DefaultWorkingDirectory)/test-results
-
-            # Copy test results from container
-            echo "Copying test results..."
-            docker cp $container_id:/app/ortoni-report/. $(System.DefaultWorkingDirectory)/ortoni-report
-            docker cp $container_id:/app/test-results/junit_results.xml $(System.DefaultWorkingDirectory)/test-results
-
-            # Remove container
-            echo "Cleaning up container..."
-            docker rm $container_id
-        env:
-          JIRA_API_KEY: $(JIRA_API_KEY)
-        displayName: merge_and_publish_results_to_jira
-
-      - task: PublishTestResults@2
-        displayName: 'Publish test results'
-        inputs:
-          searchFolder: 'test-results'
-          testResultsFormat: 'JUnit'
-          testResultsFiles: 'junit_results.xml'
-          mergeTestResults: true
-          failTaskOnFailedTests: false
-          testRunTitle: 'Playwright Tests'
-        condition: succeededOrFailed()
-
-      - task: PublishPipelineArtifact@1
-        displayName: 'Publish Merged Report'
-        condition: always()
-        inputs:
-          targetPath: '$(System.DefaultWorkingDirectory)/ortoni-report'
-          artifact: 'playwright-merged-report'
-          publishLocation: 'pipeline'
-      - script: |
-          docker rmi $(dockerImageName):$(imageTag) -f
-        displayName: 'Cleanup Docker Image'
-        condition: always()
+    - template: templates/digital/playwright-test.yml@AzureDevOps
+      parameters:
+        applicationType: 'vue'
+        totalShards: ${{ variables.totalShards }}
+        targetUrl: $(BASE_URL)
+        dockerFileName: 'Dockerfile.playwright'
+        isRegression: ${{ variables.IS_REGRESSION }}
+        filterTags: '@Advanced'
+        playwrightTestsPath: 'playwright-tests'
+        npmServePath: '.'
+        npmrcPath: 'playwright-tests/.npmrc'
+        secrets:
+          CCIS_API_AUTH: $(CCIS_API_AUTH)
+          JIRA_API_KEY: $(JIRA_API_KEY)
--- a/playwright-tests/.npmrc
+++ b/playwright-tests/.npmrc
@ -0,0 +1,3 @@
+registry=https://pkgs.dev.azure.com/Safelite/Digital/_packaging/DigitalQA/npm/registry/
+                       
+always-auth=true
--- a/playwright-tests/package-lock.json
+++ b/playwright-tests/package-lock.json
--- a/playwright-tests/package.json
+++ b/playwright-tests/package.json
@ -0,0 +1,37 @@
+{
+  "name": "safelite-iss-nextgen-playwright-tests",
+  "version": "1.0.0",
+  "description": "Playwright tests for ISS Nextgen using Safelite Playwright Core",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
+    "test:smoke": "playwright test --grep @smoke",
+    "test:report": "playwright test --grep @test_report",
+    "report": "playwright show-report",
+    "install": "playwright install",
+    "install:deps": "playwright install-deps"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.9.0",
+    "axios-retry": "^4.5.0",
+    "safelite-playwright-core": "^1.0.26"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^9.8.0",
+    "@playwright/test": "^1.52.0",
+    "@types/dotenv-safe": "^8.1.6",
+    "@types/node": "^22.15.32",
+    "dotenv-safe": "^9.1.0",
+    "eslint": "^9.28.0",
+    "luxon": "^3.6.1",
+    "ortoni-report": "^3.0.5",
+    "playwright-jira-reporter": "^1.0.16"
+  },
+  "private": true
+}
--- a/playwright-tests/playwright.config.ts
+++ b/playwright-tests/playwright.config.ts
@ -1,42 +1,61 @@
+import { formatDateForFilename } from 'safelite-playwright-core';
 import { defineConfig, devices } from '@playwright/test';
+import { JiraReporterConfig } from 'playwright-jira-reporter'
 import dotenv from 'dotenv-safe';
 import { OrtoniReportConfig } from "ortoni-report";
-import * as path from 'path';
+import path from 'path';

 if (!process.env.CI) {
-  // Environment variables are present in CI environment, no need to read from file
-  if (process.env.NODE_ENV == 'undefined' || process.env.NODE_ENV == null) {
-    dotenv.config({ path: `playwright-tests/.env.dev`, example: 'playwright-tests/.env.example' });
-  }
-  else {
-    dotenv.config({ path: `playwright-tests/.env.${process.env.NODE_ENV}`, example: 'playwright-tests/.env.example' });
+    // 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.PLAYWRIGHT_ENV == undefined || process.env.PLAYWRIGHT_ENV == null) {
+        dotenv.config({
+            path: path.join(basePath, '.env.dev'),
+            example: path.join(basePath, '.env.example')
+        });
+    }
+    else {
+    dotenv.config({
+        path: path.join(basePath, `.env.${process.env.PLAYWRIGHT_ENV}`),
+        example: path.join(basePath, '.env.example')
+    });
  }
 }

+// Ortoni config
+const ortoniReportConfig: OrtoniReportConfig = {
+    open: "never",
+    folderPath: process.env.CI ? 'ortoni-report' : 'test-results',
+    title: "ISS-NextGen Test Report",
+    filename: `iss_nextgen_ortoni_report_${formatDateForFilename(new Date())}.html`,
+    showProject: false,
+    projectName: "ISS-NextGen-Playwright-Report",
+    testType: `E2E- Environment: ${process.env.PLAYWRIGHT_ENV} `,
+    preferredTheme: "light",
+    base64Image: true,
+}

-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-const reportConfig: OrtoniReportConfig = {
-  port: 1994,
-  open: "never",
-  folderPath: "test-results",
-  filename: "index.html",
-  logo: "../business-logic/data/logo.png",
-  title: "Test Report",
-  showProject: false,
-  projectName: "ISS-Nextgen-Playwright-Report",
-  testType: `E2E- Environment: ${process.env.NODE_ENV} `,
-  preferredTheme: "light",
-  base64Image: true,
+// Jira Report config
+const jiraReportConfig: JiraReporterConfig = {
+  // Jira Reporter Config
+  isRegressionRun: process.env.IS_REGRESSION === 'true',
+  jiraProjectKey: process.env.JIRA_PROJECT_KEY || '',
+  jiraEpicKey: process.env.JIRA_EPIC_KEY || '',
+  jiraCardNumber: process.env.JIRA_CARD_NUMBER || '',
+  applicationName: 'ISS NextGen',
+  jiraApiUtilConfig: {
+    jiraUrl: process.env.JIRA_SERVER || '',
+    jiraUsername: process.env.JIRA_USERNAME || '',
+    jiraApiKey: process.env.JIRA_API_KEY || '',
+    jiraBoardId: process.env.JIRA_BOARD_ID || ''
+  },
+  jiraCreationPermissions: {
+    isCreateTestSubtasks: process.env.IS_REGRESSION !== 'true',
+    isCreateBugs: process.env.IS_REGRESSION !== 'true'
+  },
+  // Wrapped ortoni config
+  ...ortoniReportConfig
 };

 export const reportFilePath = path.resolve(__dirname, './../test-results/accessibility-report.html');
@ -53,12 +72,16 @@ export default defineConfig({
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 4 : 5,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [
-    ['ortoni-report', reportConfig],
+  reporter: process.env.CI? [
+    ['junit'],
+    ['playwright-jira-reporter', jiraReportConfig],
+    ['ortoni-report', ortoniReportConfig]
+  ]: [
+    ['ortoni-report', ortoniReportConfig],
    ['junit'],
    ['list']
  ],
-  timeout: 120_000,
+  timeout: 240_000,
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
@ -68,52 +91,15 @@ export default defineConfig({
    trace: 'on-first-retry',
    headless: process.env.CI ? true : false,
    screenshot: "only-on-failure",
-    actionTimeout: 5_000,
-    navigationTimeout: 20_000
+    actionTimeout: 60_000,
+    navigationTimeout: 60_000
  },

-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-
-    // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
-    // },
-
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
-});
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+    ],
+});
--- a/src/assets/img/icons/icon-ablue-next.png
+++ b/src/assets/img/icons/icon-ablue-next.png
--- a/src/assets/img/icons/icon-ablue-previous.png
+++ b/src/assets/img/icons/icon-ablue-previous.png
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@ -139,7 +139,7 @@ const endpoints = Object.freeze({
    },
    TaxOrderItems: {
        url: `${PRICE_BASE_URL}/taxed-order-items`,
-        method: 'GET'
+        method: 'POST'
    },
    LogExperimentExposureIfAssigned: {
        url: `${EXPERIMENTS_BASE_URL}/log-exposure`,
@ -217,7 +217,6 @@ const endpoints = Object.freeze({
        method: 'POST'
    },
    DuplicateSearch: {
-        // eslint-disable-next-line max-len
        url: `${ORDER_BASE_URL}/duplicate-check`,
        method: 'GET'
    },
@ -231,4 +230,4 @@ const endpoints = Object.freeze({
    }
 });

-export { endpoints };
+export default endpoints;
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@ -34,7 +34,7 @@ const errorMessages = Object.freeze({
    VIN_FORMAT:
        // eslint-disable-next-line max-len
        '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',
+    OPTION_REQUIRED: 'Please choose an option',
    VEHICLE_REQUIRED: 'Please select a vehicle',
    POLICY_NUMBER_REQUIRED: 'Policy number is required.',
    POLICY_NUMBER_FORMAT: 'Please enter an alpha-numeric string',
@ -57,13 +57,15 @@ const errorMessages = Object.freeze({
    POLICYHOLDER_FIRST_NAME_REQUIRED: 'First name is required.',
    POLICYHOLDER_LAST_NAME_REQUIRED: 'Last name is required.',
    ACKNOWLEDGEMENT_REQUIRED: 'You must agree to the terms to continue',
+    NO_SELECTION_REQUIRED: 'Please make a selection to continue',

    YEAR_REQUIRED: 'Vehicle year is required.',
    MAKE_REQUIRED: 'Vehicle make is required.',
    MODEL_REQUIRED: 'Vehicle model is required.',
    STYLE_REQUIRED: 'Vehicle style is required.',
    MOBILE_LOCATION_REQUIRED: 'Please enter your service address',
-    DATE_REQUIRED: 'Please select a date'
+    DATE_REQUIRED: 'Please select a date',
+    TIME_REQUIRED: 'Please select an appointment time.'
 });

 export default errorMessages;
--- a/src/constants/provider-preference.js
+++ b/src/constants/provider-preference.js
@ -0,0 +1,6 @@
+const PROVIDER_PREFERENCE_OPTIONS = Object.freeze({
+    SAFELITE: 'SafeliteOption',
+    TPA: 'TPAOption'
+});
+
+export default PROVIDER_PREFERENCE_OPTIONS;
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
--- a/src/helpers/date-helper.js
+++ b/src/helpers/date-helper.js
@ -17,6 +17,21 @@ export function convertDateToDateString(date) {
    );
 }

+export function convertDateToTwoDigitDay(date) {
+    if (date instanceof Date !== true) return null;
+    return (`0${date.getDate()}`).slice(-2);
+}
+
+export function convertDateToTwoDigitMonth(date) {
+    if (date instanceof Date !== true) return null;
+    return (`0${date.getMonth() + 1}`).slice(-2);
+}
+
+export function convertDateToShortMonth(date) {
+    if (date instanceof Date !== true) return null;
+    return date.toLocaleString('en-US', { month: 'short' });
+}
+
 export function convertDateStringToDate(dateString) {
    // dateString must be YYYY-MM-DD format
    if (typeof dateString !== 'string') return null;
@ -51,6 +66,12 @@ export function getDisplayTextForDurationLength(durationMinimum, durationMaximum
    return `${durationText} ${unitText}`;
 }

+export function isAfternoon(timeString) {
+    if (typeof timeString !== 'string') return false;
+    const hours = parseInt(timeString.split(':')[0], 10);
+    return hours >= 12;
+}
+
 export function militaryToTwelveHourTime(timeString) {
    // Expected input: "HH:MM"
    if (typeof timeString !== 'string') return null;
@ -163,9 +184,11 @@ export function combineDateAndTime(date, time) {
    // Return the new date object
    return newDate;
 }
+
 export function addMinutes(date, minutes) {
    return new Date(date.getTime() + minutes * 60000);
 }
+
 export function shortTimeString(date) {
    // Use a ternary operator to check if the input is a valid date object
    return date instanceof Date
--- a/src/iss-components/footer-menu/footer-menu.vue
+++ b/src/iss-components/footer-menu/footer-menu.vue
@ -38,7 +38,7 @@
                <a
                    href=""
                    target="_blank"
-                    @click="openCookiePreferences">Cookie Preferences</a>
+                    @click="openCookiePreferences">Cookie preferences</a>
            </div>
            <div class="footer-menu-item">
                <textLink
--- a/src/iss-components/shop-list-button/shop-list-button.vue
+++ b/src/iss-components/shop-list-button/shop-list-button.vue
@ -5,7 +5,7 @@
        <baseInputButton
            v-bind="$props"
            v-model="selectedValue"
-            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover">
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover mb-2">
            <div
                :aria-label="buttonLabel"
                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
@ -121,6 +121,7 @@ $heritage-checked-border-color: #0070d1;
        &:checked + .list-button-content {
            background: $heritage-checked-background-color;
            border-color: $heritage-checked-border-color;
+            box-shadow: 0 0 0 1px $blue;
            .button-label-copy {
                font-weight: 500;
                color: $black;
@ -142,8 +143,6 @@ $heritage-checked-border-color: #0070d1;
    box-shadow: $heritage-box-shadow;
    width: 100%;
    outline: none;
-    margin-bottom: .625rem;
-    height: 4.375rem;
 }
 .button-content {
    row-gap: 0.25rem;
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@ -186,7 +186,7 @@ export default {
        VehiclesForQuestions() {
            // Map API result data, to address-vehicles data structure
            const mappedData = this.VehiclesFromApi.map((v) => {
-                const maskSymbol = 'X';
+                const maskSymbol = '*';
                const vinStart = maskSymbol.repeat(v.vin.length - 6);
                const vinEnd = v.vin.substring(v.vin.length - 6);
                return {
--- a/src/layouts/duplicate-check/duplicate-check.spec.js
+++ b/src/layouts/duplicate-check/duplicate-check.spec.js
@ -55,7 +55,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
    return { wrapper };
 }

-const duplicateOrderText = 'Finish Existing Claim';
+const duplicateOrderText = 'Finish existing claim';

 describe('duplicateCheck.vue', () => {
    describe('Rendering', () => {
@ -259,81 +259,6 @@ describe('duplicateCheck.vue', () => {
                });
            });
        });
-        describe('getNewOrderSelectionName', () => {
-            test('answersFromCms null => returns empty string', () => {
-                // Arrange
-                const mountOptions = getMountOptions({
-                    router: { navigate: jest.fn() }
-                });
-                const answersFromCmsValue = null;
-                mountOptions.mixins = [{
-                    methods: {
-                        getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers' ? answersFromCmsValue : ''))
-                    }
-                }];
-
-                const wrapper = shallowMount(duplicateCheck, mountOptions);
-
-                // Assert
-                expect(wrapper.vm.getNewOrderSelectionName).toBe('');
-            });
-            test('answersFromCms empty list => returns empty string', () => {
-                // Arrange
-                const mountOptions = getMountOptions({
-                    router: { navigate: jest.fn() }
-                });
-                const answersFromCmsValue = [];
-                mountOptions.mixins = [{
-                    methods: {
-                        getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers' ? answersFromCmsValue : ''))
-                    }
-                }];
-
-                const wrapper = shallowMount(duplicateCheck, mountOptions);
-
-                // Assert
-                expect(wrapper.vm.getNewOrderSelectionName).toBe('');
-            });
-            test('answersFromCms non-empty list whose first item has no Name property => returns empty string', () => {
-                // Arrange
-                const mountOptions = getMountOptions({
-                    router: { navigate: jest.fn() }
-                });
-                const answersFromCmsValue = [{ test: getRandomString(6, 6) }];
-                mountOptions.mixins = [{
-                    methods: {
-                        getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers'
-                            ? answersFromCmsValue
-                            : ''))
-                    }
-                }];
-
-                const wrapper = shallowMount(duplicateCheck, mountOptions);
-
-                // Assert
-                expect(wrapper.vm.getNewOrderSelectionName).toBe('');
-            });
-            test('answersFromCms first item has Name property => returns expected', () => {
-                // Arrange
-                const mountOptions = getMountOptions({
-                    router: { navigate: jest.fn() }
-                });
-                const expectedName = getRandomString(6, 6);
-                const answersFromCmsValue = [{ Name: expectedName }];
-                mountOptions.mixins = [{
-                    methods: {
-                        getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers'
-                            ? answersFromCmsValue
-                            : ''))
-                    }
-                }];
-
-                const wrapper = shallowMount(duplicateCheck, mountOptions);
-
-                // Assert
-                expect(wrapper.vm.getNewOrderSelectionName).toBe(expectedName);
-            });
-        });
    });

    describe('Navigation', () => {
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@ -23,11 +23,16 @@
                        class="duplicate-check-question"
                        :cmsWidgetName="widget.existingOrNewQuestion"
                        :questionText="questionText"
-                        :answers="answers"
+                        :answers="duplicateOrders"
                        groupName="existingOrNewQuestionOption"
                        buttonTypeString="listButton"
                        isRequired
                        :validationRules="rules.selectionRequired" />
+                    <buttonMain
+                        :variant="buttonVariants.primary"
+                        buttonText="Start a new claim"
+                        class="mt-5 w-100"
+                        @clickEvent="startNewClaim" />
                    <siteFooter
                        ref="siteFooter"
                        class="my-5"
@ -48,6 +53,8 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
+import buttonVariants from '@/constants/button-variants';

 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
@ -66,7 +73,8 @@ export default {
        buttonQuestion,
        siteFooter,
        // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
+        buttonMain
    },
    mixins: [BaseFormMixin],
    async beforeRouteEnter(to, from, next) {
@ -91,23 +99,16 @@ export default {
            },
            rules: {
                selectionRequired: globalRules.OPTION_REQUIRED
-            }
+            },
+            buttonVariants
        };
    },
    computed: {
        questionText() {
            return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
        },
-        answersFromCms() {
-            return (
-                this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? []
-            );
-        },
-        getNewOrderSelectionName() {
-            return this.answersFromCms?.[0]?.Name ?? '';
-        },
        duplicateOrders() {
-            const duplicateOrderText = 'Finish Existing Claim';
+            const duplicateOrderText = 'Finish existing claim';
            const orders = useMainStore().applicationUser.duplicateOrders;
            return (
                orders?.map((o) => {
@ -127,9 +128,6 @@ export default {
                    };
                }) ?? []
            );
-        },
-        answers() {
-            return [...this.duplicateOrders, ...this.answersFromCms];
        }
    },
    methods: {
@ -197,6 +195,10 @@ export default {
                    this.$route
                );
            }
+        },
+        async startNewClaim() {
+            this.selectedAnswer = 'NewClaim';
+            await this.forwardButtonAction();
        }
    }
 };
@ -216,21 +218,36 @@ export default {
    .subheader-secondary {
        margin-top: map-get($spacers, 2);
    }
-    p {
-        span {
-            font-size: $h6-font-size;
-        }
-    }
 }
+
 .duplicate-check-question {
    .question-text {
        justify-content: left;
        display: inline-flex !important;
        margin-top: map-get($spacers, 4);
-        margin-bottom: map-get($spacers, 2);
+        margin-bottom: 0.625rem !important;
+        span {
+            font-weight: 600;
+        }
    }
    .form-test-error {
        margin-top: 0 !important;
+        span {
+            font-weight: 500;
+        }
+    }
+    .question-text.d-flex {
+        margin-top: 0;
    }
 }
+
+.list-button-content {
+    span.small {
+        font-weight: 400;
+    }
+}
+
+.form-group {
+    margin-bottom: 1.25rem !important;
+}
 </style>
--- a/src/layouts/entry-page/entry-page.spec.js
+++ b/src/layouts/entry-page/entry-page.spec.js
@ -1,10 +1,15 @@
 // Components
+import { shallowMount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
 import entryPage from '@/layouts/entry-page/entry-page.vue';

-import { shallowMount } from '@vue/test-utils';
+// Supporting Files
+import baseMixin from '@/mixins/base-mixin';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { useMainStore } from '@/store';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import * as clientAuthHelper from '@/helpers/clientauth-helper';

 // Mock our module for promises.
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
@ -15,34 +20,192 @@ jest.mock('@/helpers/cms-content-helper', () => ({
    setupModalLinks: jest.fn()
 }));

-/** @ignore */
-function setupMocks(queryString) {
+function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) {
    const mountOptions = getMountOptions({
        router: {
            navigate: jest.fn()
-        },
-        route: { queryString }
+        }
    });

-    const wrapper = shallowMount(
-        entryPage,
-        mountOptions
-    );
+    const testingPinia = createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    });
+    useMainStore(testingPinia);
+    methodToRunAfterInitializingStore();

-    const apiResponses = {};
+    mountOptions.global.plugins = [testingPinia];
+    mountOptions.data = () => (initialData);
+
+    const apiResponses = { cmsContent: {} };

    settleAllPromises.mockImplementation(() => apiResponses);
-    fetchCmsContentForPage.mockImplementation(() => { });
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    const wrapper = shallowMount(entryPage, mountOptions);
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
+    wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateForward = baseMixin.methods.navigateForward;

    return { wrapper };
 }

 describe('entry-page.vue', () => {
-    test('should render', () => {
-        const queryString = 'policynumber="123456"';
-        const { wrapper } = setupMocks(queryString);
+    test('shows unauthorized message when not authorized', async () => {
+        const wrapper = shallowMount(entryPage, getMountOptions());
+        wrapper.setData({ unauthorized: true });
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find('#message').isVisible()).toBe(true);
+        expect(wrapper.text()).toContain('Unauthorized Access.');
+    });
+    describe('validateClientTagOnEntry', () => {
+        let wrapper;
+        beforeEach(() => {
+            const mainInitialState = { issConfig: {} };
+            wrapper = getMountedComponent(mainInitialState).wrapper;
+        });

-        window.console.log(wrapper.vm.$route.query);
-        expect(wrapper).toBeTruthy();
+        it('returns unauthorized if no clienttag', async () => {
+            const result = await wrapper.vm.validateClientTagOnEntry({});
+            expect(result.isAuthorized).toBe(false);
+        });
+
+        it('returns unauthorized if validateISSClientTag returns falsy', async () => {
+            jest.spyOn(clientAuthHelper, 'validateISSClientTag').mockResolvedValueOnce(null);
+            const result = await wrapper.vm.validateClientTagOnEntry({ clienttag: 'abc' });
+            expect(result.isAuthorized).toBe(false);
+        });
+
+        it('returns authorized and clientData if valid and not RSAToken', async () => {
+            const resp = {
+                active: true,
+                accountName: 'Client',
+                authentication: '',
+                parentAccountNumber: 'P',
+                styleSheet: '',
+                coverageEnabled: true,
+                siteType: ''
+            };
+            jest.spyOn(clientAuthHelper, 'validateISSClientTag').mockResolvedValueOnce(resp);
+            const result = await wrapper.vm.validateClientTagOnEntry({ clienttag: 'abc' });
+            expect(result.isAuthorized).toBe(true);
+            expect(result.clientData).toEqual(resp);
+        });
+
+        it('handles RSAToken with valid signature and EncParams', async () => {
+            const resp = {
+                active: true,
+                accountName: 'Client',
+                authentication: 'RSAToken EncParams',
+                parentAccountNumber: 'P',
+                styleSheet: '',
+                coverageEnabled: true,
+                siteType: ''
+            };
+            const decryptedData = 'foo=bar&from=yesterday';
+            jest.spyOn(clientAuthHelper, 'validateISSClientTag').mockResolvedValueOnce(resp);
+            jest.spyOn(clientAuthHelper, 'validateISSClientSignature').mockResolvedValueOnce({ valid: true, decryptedData });
+            const result = await wrapper.vm.validateClientTagOnEntry({ clienttag: 'abc', token: 'tok', signature: 'sig' });
+            expect(result.isAuthorized).toBe(true);
+            expect(result.clientData).toEqual(resp);
+            expect(result.decryptedParams).toEqual({ foo: 'bar', from: 'yesterday' });
+        });
+
+        it('handles RSAToken with invalid signature', async () => {
+            const resp = {
+                active: true,
+                accountName: 'Client',
+                authentication: 'RSAToken',
+                parentAccountNumber: 'P',
+                styleSheet: '',
+                coverageEnabled: true,
+                siteType: ''
+            };
+            jest.spyOn(clientAuthHelper, 'validateISSClientTag').mockResolvedValueOnce(resp);
+            jest.spyOn(clientAuthHelper, 'validateISSClientSignature').mockResolvedValueOnce({ valid: false });
+            const result = await wrapper.vm.validateClientTagOnEntry({ clienttag: 'abc', token: 'tok', signature: 'sig' });
+            expect(result.isAuthorized).toBe(false);
+        });
+    });
+    test('populateISSConfigValues sets issConfig fields and parses clientFlags', () => {
+        const mainInitialState = {
+            issConfig: {}
+        };
+        const { wrapper } = getMountedComponent(mainInitialState);
+        const data = {
+            accountName: 'TestClient',
+            parentAccountNumber: '12345',
+            styleSheet: 'test-style',
+            coverageEnabled: true,
+            siteType: 'test-site',
+            clientFlags: JSON.stringify({
+                TPAEnabled: true,
+                ClientFullName: 'Full Name',
+                ClientDisplayName: 'Display Name',
+                ClaimRegistrationRequired: true,
+                EnableNoCompQuote: true
+            })
+        };
+        wrapper.vm.populateISSConfigValues(data);
+        const { issConfig } = wrapper.vm.mainStore;
+        expect(issConfig.clientName).toBe('TestClient');
+        expect(issConfig.clientFullName).toBe('Full Name');
+        expect(issConfig.clientDisplayName).toBe('Display Name');
+        expect(issConfig.parentAccountNumber).toBe('12345');
+        expect(issConfig.styleSheet).toBe('test-style');
+        expect(issConfig.isCoverageEnabled).toBe(true);
+        expect(issConfig.siteType).toBe('test-site');
+        expect(issConfig.enableTPAFlow).toBe(true);
+        expect(issConfig.isClaimRegistrationRequired).toBe(true);
+        expect(issConfig.enableNoCompQuote).toBe(true);
+    });
+    describe('combineClientParameters', () => {
+        let wrapper;
+        beforeEach(() => {
+            wrapper = getMountedComponent({ issConfig: {} }).wrapper;
+        });
+
+        it('returns correct params from config and query', () => {
+            const configParams = JSON.stringify(['PolicyNbr', 'DateOfLoss', 'Unused']);
+            const queryStringParams = { policynbr: '123', dateofloss: '2022-01-01', somethingelse: 'no' };
+            const result = wrapper.vm.combineClientParameters(configParams, queryStringParams);
+            expect(result).toEqual({ policynbr: '123', dateofloss: '2022-01-01' });
+        });
+
+        it('returns empty object if configParams is not valid JSON', () => {
+            const configParams = 'notjson';
+            const queryStringParams = { policynbr: '123' };
+            const result = wrapper.vm.combineClientParameters(configParams, queryStringParams);
+            expect(result).toEqual({});
+        });
+
+        it('ignores params not present in query', () => {
+            const configParams = JSON.stringify(['PolicyNbr', 'MissingParam']);
+            const queryStringParams = { policynbr: '123' };
+            const result = wrapper.vm.combineClientParameters(configParams, queryStringParams);
+            expect(result).toEqual({ policynbr: '123' });
+        });
+    });
+    test('populates store items from params', async () => {
+        const mainInitialState = {
+            issConfig: { disabledFields: {} },
+            order: { policy: {} }
+        };
+        const params = {
+            policynumber: 'ABC123',
+            policyzipcode: '90210',
+            dateofloss: '2022-01-01',
+            returnurl: 'http://success',
+            returnurl2: 'http://fail'
+        };
+        const { wrapper } = getMountedComponent(mainInitialState);
+        wrapper.vm.populateStoreItemsFromParams(params);
+        expect(wrapper.vm.mainStore.order.policy.policyNumber).toBe('ABC123');
+        expect(wrapper.vm.mainStore.order.policy.policyZipCode).toBe('90210');
+        expect(wrapper.vm.mainStore.order.policy.dateOfLoss).toBe('2022-01-01');
+        expect(wrapper.vm.mainStore.issConfig.successReturnURL).toBe('http://success');
+        expect(wrapper.vm.mainStore.issConfig.failureReturnURL).toBe('http://fail');
    });
 });
--- a/src/layouts/entry-page/entry-page.vue
+++ b/src/layouts/entry-page/entry-page.vue
@ -143,6 +143,7 @@ export default {
            },
            populateISSConfigValues(data) {
                this.mainStore.issConfig.clientName = data.accountName;
+                this.mainStore.issConfig.clientFullName = data.accountName; // Defaults to use the client name.
                this.mainStore.issConfig.clientDisplayName = data.accountName; // Defaults to use the client name.
                this.mainStore.issConfig.parentAccountNumber = data.parentAccountNumber;
                this.mainStore.issConfig.styleSheet = data.styleSheet;
@ -157,6 +158,10 @@ export default {
                            this.mainStore.issConfig.enableTPAFlow = true;
                        }

+                        if (clientFlags.ClientFullName != null) {
+                            this.mainStore.issConfig.clientFullName = clientFlags.ClientFullName;
+                        }
+
                        if (clientFlags.ClientDisplayName != null) {
                            this.mainStore.issConfig.clientDisplayName = clientFlags.ClientDisplayName;
                        }
--- a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
@ -1,13 +1,13 @@
 <template>
    <buttonQuestion
-    ref="policyVehiclesQuestion"
-    v-model="selectedVehicleVin"
-    groupName="policyVehiclesQuestionOption"
-    buttonTypeString="listButton"
-    isOverflowScrollable
-    :answers="answers"
-    isRequired
-    :validationRules="validationRules" />
+        ref="policyVehiclesQuestion"
+        v-model="selectedVehicleVin"
+        groupName="policyVehiclesQuestionOption"
+        buttonTypeString="listButton"
+        isOverflowScrollable
+        :answers="answers"
+        isRequired
+        :validationRules="validationRules" />
 </template>
 <script>
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@ -21,7 +21,7 @@
                            cmsWidgetName="PolicyVehiclesQuestion"
                            :vehicles="VehiclesForQuestions"
                            :validationRules="rules.optionRequired"
-                            class="mb-2"/>
+                            class="mb-2" />
                        <buttonMain
                            :variant="buttonVariants.primary"
                            buttonText="Add another vehicle"
@ -114,7 +114,7 @@ export default {
            const vehicles = this.policyVehicles;
            const mappedData =
                vehicles?.map((v) => {
-                    const maskSymbol = 'X';
+                    const maskSymbol = '*';
                    const vinStart = maskSymbol.repeat(v.vin.length - 6);
                    const vinEnd = v.vin.substring(v.vin.length - 6);
                    return {
@ -122,7 +122,7 @@ export default {
                        vehicle: v,
                        Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
                        Name: v.vin,
-                        SubText: `VIN ${vinStart}${vinEnd}`
+                        SubText: `VIN: ${vinStart}${vinEnd}`
                    };
                }) ?? [];
            return mappedData;
@ -304,6 +304,10 @@ export default {
        min-height: 1px;
        padding-left: .9375rem;
        padding-right: .9375rem;
+
+        .subheader-secondary p {
+            text-align: left;
+        }
    }
 }

@ -319,4 +323,10 @@ export default {
        }
    }
 }
+
+.list-button-content {
+    span.small {
+        font-size: 1rem;
+    }
+}
 </style>
--- a/src/layouts/provider-preference/provider-preference.spec.js
+++ b/src/layouts/provider-preference/provider-preference.spec.js
@ -43,41 +43,37 @@ function setupMocks(mockApiResponses) {
 }

 describe('provider-preference.vue', () => {
-    test('Should navigate to safelite flow when safelite selected', () => {
-    // Arrange
-        const { wrapper } = setupMocks();
-
-        // Act
-        wrapper.vm.selectedProvider = 'SafeliteOption';
-        wrapper.vm.forwardButtonAction();
-
-        // Test
-        expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, 'provider-preference');
-    });
-
-    test('Should navigate to tpa flow when TPAOption selected and TPA Flow Enabled', () => {
-    // Arrange
-        const { wrapper } = setupMocks();
-
-        // Act
-        wrapper.vm.selectedProvider = 'TPAOption';
-        useMainStore().issConfig.enableTPAFlow = true;
-        wrapper.vm.forwardButtonAction();
-
-        // Test
-        expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED, 'provider-preference');
-    });
-
    test('Should navigate to tpa disabled route page when TPAOption selected and TPA Flow disabled', () => {
    // Arrange
        const { wrapper } = setupMocks();

        // Act
-        wrapper.vm.selectedProvider = 'TPAOption';
        useMainStore().issConfig.enableTPAFlow = false;
-        wrapper.vm.forwardButtonAction();
+        wrapper.vm.findAnotherShopClicked();

        // Test
        expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED, 'provider-preference');
    });
+
+    test('Should navigate to safelite flow when navigateWithTPARecalAnswer is called with SafeliteOption', () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+
+        // Act
+        wrapper.vm.navigateWithTPARecalAnswer('SafeliteOption');
+
+        // Test
+        expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, 'provider-preference');
+    });
+
+    test('Should navigate to TPA flow when navigateWithTPARecalAnswer is called with TPAOption', () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+
+        // Act
+        wrapper.vm.navigateWithTPARecalAnswer('TPAOption');
+
+        // Test
+        expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED, 'provider-preference');
+    });
 });
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@ -15,76 +15,70 @@
                        id="sub-header"
                        cmsWidgetName="SiteSubHeader"
                        class="mb-0 mt-4 text-center" />
-                    <buttonQuestion
-                        ref="buttonQuestion"
-                        v-model="selectedProvider"
-                        class="provider-preference"
-                        questionText="Select an option:"
-                        :answers="prefAnswers"
-                        groupName="prefQuestions"
-                        buttonTypeString="providerPrefRadio"
-                        :validationRules="rules.optionRequired"
-                        isRequired />
+                    <div
+                        class="mt-4 mb-5"
+                        v-html="scheduleWithSafeliteText"></div>
+                    <buttonMain
+                        ref="buttonMain"
+                        class="full-width-button"
+                        variant="navigation"
+                        buttonText="Schedule now"
+                        @clickEvent="scheduleWithSafelite" />
+                    <div
+                        class="mt-5 mb-5"
+                        v-html="scheduleWithOtherText"></div>
+                    <textLink
+                        class="underlined-text"
+                        linkType="navigation"
+                        text="Find another shop"    
+                        href="#"
+                        @clickEvent="findAnotherShopClicked" />
                    <siteFooter
                        :ref="SITE_FOOTER_REF_NAME"
-                        class="mt-5"
+                        class="mt-6"
                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="isForwardActionDisabled"
-                        :isForwardButtonNavigationDisabled="isForwardNavigationDisabled"
-                        @backClicked="navigateBack"
-                        @forwardClicked="forwardButtonAction" />
+                        :isForwardButtonHidden="true"
+                        @backClicked="navigateBack" />
                </div>
            </div>
        </div>
-        <contentGroupModal
-            :ref="RECAL_MODAL_REF_NAME"
-            cssModalHeadlineClass="text-center"
-            cmsWidgetName="RecalModal" />
        <steeringModal
            :ref="STEERING_MODAL_REF_NAME"
            cmsWidgetName="StateSteeringModal" />
-        <shopPreferenceModal
-            :ref="SHOP_PREFERENCE_MODAL_REF_NAME"
-            cmsWidgetName="ShopPreferenceDrawer"
-            :showSteeringLink="showSteeringLink"
-            @openSteering="openStateSteeringModal" />
        <tpaRecalModal
            :ref="TPA_RECAL_MODAL_REF_NAME"
            cmsWidgetName="TPARecalModal"
+            buttonCmsWidgetName="TPARecalQuestion"
            :ackError="ackError"
-            @buttonClick="navigateWithTPAAck" />
+            :noSelectionError="noSelectionError"
+            @buttonClick="navigateWithTPARecalAnswer"/>
    </Form>
 </template>
 <script>
 // Import Supporting Files
 import {
    fetchCmsContentForPage,
-    setupModalLink,
    setupModalLinks
 } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import errorMessages from '@/constants/error-messages';
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
-import issPageValues from '@/router/router-constants/issPage-values';
+import showIssLoadingModal from '@/helpers/loading-modal-helper';
+import bailoutMessage from '@/constants/bailoutMessage';
+import baseFormMixin from '@/mixins/base-form-mixin';
+import PROVIDER_PREFERENCE_OPTIONS from '@/constants/provider-preference';

 // Import Component
-import baseFormMixin from '@/mixins/base-form-mixin';
 import { Form } from 'vee-validate';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import steeringModal from '@/layouts/provider-preference/steering-modal/steering-modal.vue';
-import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
 import tpaRecalModal from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue';
-import globalRules from '@/constants/global-rules';
-import bailoutMessage from '@/constants/bailoutMessage';
-import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
-import showIssLoadingModal from '@/helpers/loading-modal-helper';
+import textLink from '@/ux-components/text-link/text-link.vue';
+import buttonMain from '@/ux-components/button-main/button-main.vue';

-const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
-const RECAL_MODAL_REF_NAME = 'RecalModal';
 const STEERING_MODAL_REF_NAME = 'StateSteeringModal';
-const SHOP_PREFERENCE_MODAL_REF_NAME = 'ShopPreferenceDrawer';
 const TPA_RECAL_MODAL_REF_NAME = 'TPARecalModal';
 const SITE_FOOTER_REF_NAME = 'siteFooter';

@ -97,10 +91,10 @@ export default {
        // eslint-disable-next-line vue/no-reserved-component-names
        Form,
        buttonQuestion,
+        buttonMain,
        steeringModal,
-        shopPreferenceModal,
        tpaRecalModal,
-        contentGroupModal
+        textLink
    },
    mixins: [baseFormMixin],
    async beforeRouteEnter(to, from, next) {
@ -115,85 +109,37 @@ export default {
        const resultMap = await settleAllPromises(promiseResultMap);
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
-
-            vm.showSteeringLink = !!vm.$refs[STEERING_MODAL_REF_NAME].ModalBodyText;
-            if (vm.showSteeringLink) {
+            // open steering modal if it has body text, the state is defined in the CMS content and doesn't
+            //   populate if the state is not listed in the CMS content
+            if (!!vm.$refs[STEERING_MODAL_REF_NAME].ModalBodyText) {
                vm.openStateSteeringModal();
            }
        });
    },
    data() {
        return {
-            selectedProvider: null,
-            showSteeringLink: false,
-            tpaAcknowledgement: false,
-            rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            },
-            RECAL_MODAL_REF_NAME,
+            providerPreferenceOptions: PROVIDER_PREFERENCE_OPTIONS,
            STEERING_MODAL_REF_NAME,
-            SHOP_PREFERENCE_MODAL_REF_NAME,
            TPA_RECAL_MODAL_REF_NAME,
            SITE_FOOTER_REF_NAME
        };
    },
    computed: {
-        isForwardActionDisabled() {
-            return this.selectedProvider === null;
-        },
-        isForwardNavigationDisabled() {
-            return this.selectedProvider === options.TPA && !this.tpaAcknowledgement;
-        },
-        prefAnswers() {
-            const cmsAnswersContent = [
-                {
-                    cmsWidgetName: options.SAFELITE
-                },
-                {
-                    cmsWidgetName: options.TPA
-                }
-            ];
-            // if cms content has not yet loaded, skip
-            if (
-                !this.getCmsContent(
-                    cmsAnswersContent[0].cmsWidgetName,
-                    'HeaderText'
-                )
-                || this.getCmsContent(
-                    cmsAnswersContent[0].cmsWidgetName,
-                    'HeaderText'
-                ) === ''
-            ) {
-                return {};
-            }
-            const modifiedAnswers = cmsAnswersContent.map((answer) => ({
-                value: answer.cmsWidgetName,
-                buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
-                buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
-                buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName)
-            }));
-            return modifiedAnswers;
-        },
        ackError() {
            return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
-        }
-    },
-    watch: {
-        prefAnswers(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                setupModalLink(this, RECAL_MODAL_REF_NAME);
-            }
+        },
+        noSelectionError() {
+            return errorMessages.NO_SELECTION_REQUIRED;
+        },
+        scheduleWithSafeliteText() {
+            return this.getCmsContent('ScheduleWithSafeliteText', 'BodyText');
+        },
+        scheduleWithOtherText() {
+            return this.getCmsContent('ScheduleWithOtherText', 'BodyText');
        }
    },
    mounted() {
        setupModalLinks(this);
-        const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
-        this.selectedProvider = pageData?.selectedProvider
-            ? pageData.selectedProvider
-            : null;
-        this.tpaAcknowledgement = pageData?.tpaAcknowledgement
-            ? pageData.tpaAcknowledgement
-            : false;
    },
    methods: {
        getHeaderTextFromCms(cmsWidgetName) {
@ -213,50 +159,38 @@ export default {
            return true;
        },
        navigateForward(scenario) {
+            showIssLoadingModal(true);
            this.$router.navigate(scenario, this.$route);
        },
-        navigateWithTPAAck() {
-            this.mainStore.saveProviderPreferenceData({
-                selectedProvider: this.selectedProvider,
-                tpaAcknowledgement: this.tpaAcknowledgement
-            });
-            showIssLoadingModal(true);
-            this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
+        navigateWithTPARecalAnswer(answer) {
+            if (answer === this.providerPreferenceOptions.TPA) {
+                this.scheduleWithTPA();
+            } else {
+                this.scheduleWithSafelite();
+            }
        },
-        forwardButtonAction() {
-            if (this.selectedProvider) {
-                let scenario = null;
-                switch (this.selectedProvider) {
-                    case options.SAFELITE:
-                        this.mainStore.updateIsSafeliteProvider(true);
-                        scenario =
-                            this.navigationScenarios
-                                .CLICKED_FORWARD_WITH_SAFELITE;
-                        break;
-                    case options.TPA:
-                        this.mainStore.updateIsSafeliteProvider(false);
-                        if (this.mainStore.issConfig.enableTPAFlow) {
-                            if (this.mainStore.hasRecalibrationPart) {
-                                this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
-                                return;
-                            }
-                            scenario =
-                                this.navigationScenarios
-                                    .CLICKED_FORWARD_WITH_TPA_ENABLED;
-                        } else {
-                            this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
-                            scenario =
-                                this.navigationScenarios
-                                    .CLICKED_FORWARD_WITH_TPA_DISABLED;
-                        }
-                        break;
-                    default:
+        scheduleWithSafelite() {
+            this.mainStore.updateIsSafeliteProvider(true);
+            const scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
+            this.navigateForward(scenario);
+        },
+        scheduleWithTPA() {
+            this.mainStore.updateIsSafeliteProvider(false);
+            const scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
+            this.navigateForward(scenario);
+        },
+        findAnotherShopClicked() {
+            if (this.mainStore.issConfig.enableTPAFlow) {
+                if (this.mainStore.hasRecalibrationPart) {
+                    this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
+                    return;
+                } else {
+                    this.scheduleWithTPA();
                }
+            } else {
+                this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
+                const scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
                this.navigateForward(scenario);
-                this.mainStore.saveProviderPreferenceData({
-                    selectedProvider: this.selectedProvider,
-                    tpaAcknowledgement: this.tpaAcknowledgement
-                });
            }
        },
        openStateSteeringModal() {
@ -279,12 +213,11 @@ export default {
    #sub-header span {
        color: $black;
    }
-    .question-text {
-        margin-top: 0;
-        margin-bottom: 0.5rem;
-        & > span {
-            text-align: left;
-        }
+    .full-width-button {
+        width: 100%;
+    }
+    .underlined-text {
+        text-decoration: underline;
    }
    :deep(.safeliteLogo) {
        background-image: url(~@/assets/img/icons/logo.svg);
--- a/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js
+++ b/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js
@ -1,59 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import settleAllPromises from '@/helpers/layout-helper.js';
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { getMountOptions } from '@/helpers/unit-test-helper.js';
-import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
-
-// Mock our module for promises.
-jest.mock('@/helpers/layout-helper.js', () => jest.fn());
-
-// Mock fetchCmsContentForPage
-jest.mock('@/helpers/cms-content-helper', () => ({
-    fetchCmsContentForPage: jest.fn(),
-    setupModalLinks: jest.fn()
-}));
-
-/** @ignore */
-function setupMocks(propsData) {
-    const mountOptions = getMountOptions({
-        router: {
-            navigate: jest.fn()
-        }
-    });
-
-    mountOptions.propsData = propsData;
-
-    const wrapper = shallowMount(
-        shopPreferenceModal,
-        mountOptions
-    );
-
-    const apiResponses = {};
-
-    settleAllPromises.mockImplementation(() => apiResponses);
-    fetchCmsContentForPage.mockImplementation(() => { });
-
-    return { wrapper };
-}
-
-describe('provider-preference.vue', () => {
-    test('Should display state specific steering modal link when in state with steering language', async () => {
-        // Arrange
-        const { wrapper } = setupMocks({ showSteeringLink: true });
-
-        // Act
-
-        // Test
-        expect(wrapper.vm.showSteeringLink).toBeTruthy();
-    });
-
-    test('Should not display state specific steering modal link when not in state with steering language', async () => {
-        // Arrange
-        const { wrapper } = setupMocks({ showSteeringLink: false });
-
-        // Act
-
-        // Test
-        expect(wrapper.vm.showSteeringLink).toBeFalsy();
-    });
-});
--- a/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue
+++ b/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue
@ -1,111 +0,0 @@
-<template>
-     <modal
-        :ref="ModalName"
-        :modalId="ModalName"
-        :onModalClosedCallback="onModalClosed"
-        :footerButtonText="ModalCloseButtonText"
-        @footerButtonEvent="footerButtonClick">
-        <h5 class="text-center mb-4">
-        {{ ModalHeadline }}
-        </h5>
-        <div>
-            <div
-                class="mb-4"
-                v-html="ModalBodyText"></div>
-            <a
-                v-if="showSteeringLink"
-                class="modal-text"
-                @click="openSteeringModal"
-                v-html="ModalSubBodyText">
-            </a>
-        </div>
-    </modal>
-</template>
-
-<script>
-import modal from '@/digital-components/modal/modal.vue';
-import states from '@/constants/states';
-
-export default {
-    name: 'content-group-modal',
-    components: {
-        modal
-    },
-    props: {
-        cmsWidgetName: String,
-        showSteeringLink: Boolean
-    },
-    emits: ['openSteering'],
-    data() {
-        return {
-            clickedSteeringLink: false
-        };
-    },
-    computed: {
-        ModalName() {
-            return this.cmsWidgetName;
-        },
-        ModalHeadline() {
-            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
-        },
-        ModalSubheadertext() {
-            return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
-        },
-        ModalBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, 'BodyText');
-        },
-        ModalSubBodyText() {
-            const header = this.getCmsContent(this.cmsWidgetName, 'BodyText2');
-            return header.replace('{custom:state}', states[this.mainStore.order.customer.address.state]);
-        },
-        ModalImage() {
-            return this.getCmsContent(this.cmsWidgetName, 'Image');
-        },
-        ModalCloseButtonText() {
-            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
-        }
-    },
-    methods: {
-        openModal() {
-            this.$refs[this.ModalName].openModal();
-        },
-        onModalClosed() {
-            if (this.clickedSteeringLink) {
-                this.$emit('openSteering');
-                this.clickedSteeringLink = false;
-            }
-        },
-        footerButtonClick() {
-            this.$refs[this.ModalName].closeModal();
-        },
-        openSteeringModal() {
-            this.clickedSteeringLink = true;
-            this.$refs[this.ModalName].closeModal();
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.modal {
-    &.modal-component {
-        .modal-dialog {
-            .modal-content {
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-</style>
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js
@ -38,16 +38,26 @@ describe('tpa-Recal-Modal.vue', () => {
    test('should show error if not acknowledged', () => {
        const { wrapper } = setupMocks();
        wrapper.vm.acknowledged = false;
+        wrapper.vm.tpaRecalAnswer = 'TPAOption';
        wrapper.vm.footerButtonClick();

-        expect(wrapper.vm.showError).toBeTruthy();
+        expect(wrapper.vm.showAcknowledgementError).toBeTruthy();
    });

    test('should not show error if acknowledged', () => {
        const { wrapper } = setupMocks();
        wrapper.vm.acknowledged = true;
+        wrapper.vm.tpaRecalAnswer = 'TPAOption';
        wrapper.vm.footerButtonClick();

-        expect(wrapper.vm.showError).toBeFalsy();
+        expect(wrapper.vm.showAcknowledgementError).toBeFalsy();
+    });
+    test('should show error if no answer selected', () => {
+        const { wrapper } = setupMocks();
+        wrapper.vm.tpaRecalAnswer = '';
+        wrapper.vm.tpaRecalAnswer = undefined;
+        wrapper.vm.footerButtonClick();
+
+        expect(wrapper.vm.showNoSelectionError).toBeTruthy();
    });
 });
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@ -16,11 +16,23 @@
                <tpaRecalToggle
                    class="mb-5"
                    cmsWidgetName="TPARecalModalToggle" />
+                <buttonQuestion
+                    ref="tpaRecalQuestion"
+                    v-model="tpaRecalAnswer"
+                    class="radioQuestion safelite-or-tpa-question windshield-chip-count-question mb-4"
+                    :cmsWidgetName="buttonCmsWidgetName"
+                    :questionText="tpaRecalQuestionText"
+                    :answers="tpaRecalAnswersFromCms"
+                    groupName="tpaRecalQuestion"
+                    buttonID="tpaRecalQuestion"
+                    buttonTypeString="listButtonHorizontal"
+                    isRequired></buttonQuestion>
                <checkBox
+                v-if="showAcknowledgementCheckbox"
                    ref="tpaAcknowledgement"
                    v-model="acknowledged"
                    class="mb-2"
-                    :class="showError && ' has-error'"
+                    :class="showAcknowledgementError && ' has-error'"
                    :validationRules="rules.optionRequired"
                    checkboxName="tpaAcknowledgement"
                    buttonID="tpaAcknowledgement"
@ -29,9 +41,9 @@
                    :screenReaderOnlyText="ModalSubBodyText"
                    isRequired />
                <div
-                    v-if="showError"
+                    v-if="showAcknowledgementError || showNoSelectionError"
                    class="row form-test-error mt-1">
-                    <p>{{ ackError }}</p>
+                    <p>{{ errorMessage }}</p>
                </div>
            </div>
        </div>
@ -42,24 +54,31 @@
 import modal from '@/digital-components/modal/modal.vue';
 import tpaRecalToggle from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue';
 import checkBox from '@/ux-components/checkbox/checkbox.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
 import globalRules from '@/constants/global-rules';
+import PROVIDER_PREFERENCE_OPTIONS from '@/constants/provider-preference';

 export default {
    name: 'content-group-modal',
    components: {
        modal,
        tpaRecalToggle,
-        checkBox
+        checkBox,
+        buttonQuestion
    },
    props: {
        cmsWidgetName: String,
-        ackError: String
+        buttonCmsWidgetName: String,
+        ackError: String,
+        noSelectionError: String
    },
    emits: ['buttonClick'],
    data() {
        return {
            acknowledged: false,
-            showError: false,
+            showAcknowledgementError: false,
+            showNoSelectionError: false,
+            tpaRecalAnswer: '',
            rules: {
                optionRequired: globalRules.OPTION_REQUIRED
            }
@ -81,13 +100,34 @@ export default {
        ModalCloseButtonText() {
            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
        },
+        tpaRecalQuestionText() {
+            return this.getCmsContent(this.buttonCmsWidgetName, 'QuestionText');
+        },
+        tpaRecalAnswersFromCms() {
+            return this.getCmsContent(this.buttonCmsWidgetName, 'Answers');
+        },
+        showAcknowledgementCheckbox() {
+            return this.tpaRecalAnswer === PROVIDER_PREFERENCE_OPTIONS.TPA;
+        },
        isButtonDisabled() {
            return !this.acknowledged;
+        },
+        errorMessage() {
+            if (this.showNoSelectionError) {
+                return this.noSelectionError;
+            } else if (this.showAcknowledgementError) {
+                return this.ackError;
+            }
+            return '';
        }
    },
    watch: {
        acknowledged() {
-            this.showError = false;
+            this.showAcknowledgementError = false;
+        },
+        tpaRecalAnswer() {
+            this.showNoSelectionError = false;
+            this.showAcknowledgementError = false;
        }
    },
    methods: {
@ -96,12 +136,15 @@ export default {
        },

        footerButtonClick() {
-            // check if acked, if not show error
-            if (this.acknowledged) {
+            if (this.tpaRecalAnswer && (!this.showAcknowledgementCheckbox || this.acknowledged )) {
                this.$refs[this.ModalName]?.closeModal();
-                this.$emit('buttonClick');
+                this.$emit('buttonClick', this.tpaRecalAnswer);
+            } else if (!this.tpaRecalAnswer) {
+                this.showNoSelectionError = true;
+                this.showAcknowledgementError = false;
            } else {
-                this.showError = true;
+                this.showAcknowledgementError = true;
+                this.showNoSelectionError = false;
            }
        }
    }
@ -130,29 +173,16 @@ export default {
            }
        }
    }
-}
-
-.form-check {
-    .form-check-input {
-        &:checked {
-            + label {
-                p {
-                    font-weight: 400 !important;
-                    font-size: 1rem !important;
-                    color: $gray-600 !important;
-                    line-height: 1.5rem;
-                }
+    .safelite-or-tpa-question {
+        :deep(.question-text) {
+            span {
+                font-weight: 500;
            }
        }
    }
-    p {
-        font-weight: 400 !important;
-        font-size: 1rem !important;
-        color: $gray-600 !important;
-        line-height: 1.5rem;
-    }
 }

+
 .form-test-error {
    p {
        font-weight: 500;
--- a/src/layouts/schedule-page/schedule-page.spec.js
+++ b/src/layouts/schedule-page/schedule-page.spec.js
@ -6,7 +6,6 @@ import { createTestingPinia } from '@pinia/testing';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { useMainStore } from '@/store/index.js';
-import { AppointmentTypeStrings } from '@/constants/schedule-constants';

 // Mock fetchCmsContentForPage
 jest.mock('@/helpers/cms-content-helper', () => ({
@ -214,7 +213,7 @@ describe('schedule-page.vue', () => {
            // Act
            const newShopTimeSlots = await wrapper.vm.getAvailableDatesMethod(
                '2023-01-01',
-                '2023-01-31'
+                '2023-01-15'
            );

            // Assert
@ -236,7 +235,7 @@ describe('schedule-page.vue', () => {
                estimatedServiceMinutesMaximum: 120
            });
        });
-        test('Should call API service in days of 34 or less when getAvailableDatesMethod is called with large date ranges', async () => {
+        test('Should call API service in days of 15 or less when getAvailableDatesMethod is called with large date ranges', async () => {
            // Arrange
            const { wrapper } = getShallowMountedComponent();
            wrapper.vm.selectableDatesData = {
@ -264,7 +263,7 @@ describe('schedule-page.vue', () => {
            // 2023-01-01 --> 2023-02-05
            // 2023-02-06 --> 2023-03-12
            // 2023-03-13 --> 2023-03-31
-            expect(store.getShopTimeSlots).toHaveBeenCalledTimes(3);
+            expect(store.getShopTimeSlots).toHaveBeenCalledTimes(6);
        });
    });
    describe('Rendering', () => {
@ -290,32 +289,16 @@ describe('schedule-page.vue', () => {
            // Assert
            expect(testValue).toStrictEqual('01234');
        });
-        test('getDisplayTextForMilitaryTime should return the correctly formatted string', () => {
-            // Arrange
-            const { wrapper } = getShallowMountedComponent();
-            wrapper.vm.selectableDatesData = {
-                days: []
-            };
-            const timeInput1 = '15:00';
-            const timeInput2 = '15:30';
-
-            // Act
-            const testOutput1 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1);
-            const testOutput2 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2);
-            const testOutput3 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1, true);
-            const testOutput4 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2, true);
-
-            // Assert
-            expect(testOutput1).toBe('3:00 PM');
-            expect(testOutput2).toBe('3:30 PM');
-            expect(testOutput3).toBe('3 PM');
-            expect(testOutput4).toBe('3:30 PM');
-        });
    });
    test('forwardButtonAction should call route method navigateWithoutSaving', async () => {
        // Arrange
        const { wrapper } = getShallowMountedComponent();
        wrapper.vm.$router.navigate = jest.fn(() => ({}));
+        wrapper.vm.selectedTimeSlotInfo = {
+            timeSlot: {
+                routeCode: 'test-id'
+            }
+        };

        // Act
        await wrapper.vm.forwardButtonAction();
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@ -1,7 +1,6 @@
 <template>
    <Form
        ref="theForm"
-        v-slot="{ meta }"
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <div class="fade-on-route-transition">
@ -16,56 +15,27 @@
                        cmsWidgetName="ScheduleSubHeaderWidget"
                        secondaryTextClasses="text-center small sub-text"
                        class="mt-4" />
-                    <template v-if="ChangeShopLink.length">
-                        <textBlock
-                            cmsWidgetName="ChangeShopLink"
-                            justifyText="center"
-                            class="mb-5 text-link-small change-shop-link"
-                            :marginTopSizeOverride="1" />
-                    </template>
                    <div class="main-content-container">
                        <locationAlerts
                            ref="locationAlerts"
                            cmsWidgetPrefix="LocationAlert-" />
                        <datePicker
                            ref="datePicker"
-                            v-model="selectedDate"
+                            v-model="selectedTimeSlotInfo"
                            customComponentId="dateQuestion"
                            selectableDatesSetting="custom"
                            class="text-link-small"
+                            :showTimeSlotError="showDatePickerError"
                            :customSelectableDatesCallback="
                                getAvailableDatesMethod
                            "
-                            validationRules="date-required"
-                            @dateClicked="openInshopTimeSlotsModal" />
-                        <timeSlotModalQuestion
-                            ref="timeSlotModalQuestion"
-                            v-model="selectedTimeSlotInfo"
-                            customComponentId="timeSlotModalQuestion"
-                            cmsWidgetName="TimeSlotModalQuestion"
-                            mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
-                            mobileCmsWidgetName="MobileTimeSlotModal"
-                            dropoffCmsWidgetName="DropOffTimeSlotModal"
-                            sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                            overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-                            :selectedDate="selectedDate"
-                            :appointmentType="appointmentType"
-                            :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                            :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                            :estimatedServiceMinutesMinimum="
-                                selectableDatesData.estimatedServiceMinutesMinimum
-                            "
-                            :estimatedServiceMinutesMaximum="
-                                selectableDatesData.estimatedServiceMinutesMaximum
-                            "
-                            validationRules="time-slot-selection-required"
-                            @timeSlotModalClosed="timeSlotModalClosed"
-                            @timeSlotSelected="forwardButtonAction" />
+                            @dateSelected="dateSelectedFromPicker"
+                            @timeSlotSelected="timeSlotSelectedFromPicker" />
                        <siteFooter
                            ref="navbar"
                            class="mt-5"
                            cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="!meta.valid"
+                            :isForwardButtonNavigationDisabled="!isFormValid"
                            @backClicked="navigateBack"
                            @forwardClicked="forwardButtonAction" />
                    </div>
@ -80,9 +50,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
 import datePicker from '@/digital-components/date-picker/date-picker.vue';
-import timeSlotModalQuestion from '@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import textBlock from '@/digital-components/text-block/text-block.vue';

 // Supporting files
 import {
@ -97,27 +65,15 @@ import {
 } from '@/helpers/cms-content-helper';
 import {
    calcDaysBetweenDates,
-    convertDateStringToDate,
    sumDateString
 } from '@/helpers/date-helper';
 import settleAllPromises from '@/helpers/layout-helper';
-import { Form, defineRule } from 'vee-validate';
+import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import errorMessages from '@/constants/error-messages';
-import { required } from '@/helpers/validation-rules';
 import { useMainStore } from '@/store';

-// DEFINE VALIDATION RULES
-defineRule('date-required', required(errorMessages.DATE_REQUIRED));
-defineRule('time-slot-selection-required', (value) => {
-    if (value?.timeSlot?.routeCode == null) {
-        return errorMessages.DATE_REQUIRED;
-    }
-    return true;
-});
-
 // Define constants
-const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
+const TIME_SLOTS_CALL_DAYS_LIMIT = 15;

 const getAvailableDates = async (
    startDateString,
@ -127,13 +83,11 @@ const getAvailableDates = async (
 ) => {
    const apiEndDateLimit = sumDateString(
        startDateString,
-        TIME_SLOTS_CALL_DAYS_LIMIT
+        TIME_SLOTS_CALL_DAYS_LIMIT - 1
    );
    const difference = calcDaysBetweenDates(startDateString, endDateString);
    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
    const storeActionConfigs = [];
-    const timeSlotsData = {};
-    timeSlotsData.days = [];
    let apiStartDate = startDateString;
    let apiEndDate = endDateString;

@ -144,7 +98,7 @@ const getAvailableDates = async (
            apiStartDate = sumDateString(apiEndDate, 1);
            apiEndDate = sumDateString(
                apiStartDate,
-                TIME_SLOTS_CALL_DAYS_LIMIT
+                TIME_SLOTS_CALL_DAYS_LIMIT - 1
            );

            if (i === apiCallsCount) {
@ -154,11 +108,7 @@ const getAvailableDates = async (
            apiEndDate = apiEndDateLimit;
        }

-        if (
-            appointmentType === AppointmentTypeStrings.MOBILE
-            || appointmentType
-                === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
-        ) {
+        if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
            storeActionConfig = {
                storeAction: GET_MOBILE_TIME_SLOTS,
                payload: {
@ -232,9 +182,7 @@ export default {
        siteSubHeader,
        locationAlerts,
        datePicker,
-        timeSlotModalQuestion,
        siteFooter,
-        textBlock,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form
    },
@ -300,7 +248,6 @@ export default {
                resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
                resultMap.premiumFeeWithPrice
            );
-            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
        });
    },
    setup() {
@ -312,6 +259,7 @@ export default {
            selectedDate: this.getSelectedDate(),
            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
            selectableDatesData: [],
+            showDatePickerError: false,
            mobilePremiumAppointmentFee: null
        };
    },
@ -325,38 +273,14 @@ export default {
        appointmentType() {
            return useMainStore().order.serviceLocation.appointmentType;
        },
-        timeSlotsForSelectedDate() {
-            if (!this.selectedDate) {
-                return null;
-            }
-
-            return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
+        isFormValid() {
+            const hasTimeSlotSelected = this.selectedTimeSlotInfo?.timeSlot?.routeCode != null;
+            return hasTimeSlotSelected;
        },
        supportingItems() {
            return useMainStore().lineItems.supportingItems;
        }
    },
-    watch: {
-        selectedDate(newValue, oldValue) {
-            // Clear time slot selection if date selected changes
-            if (newValue !== oldValue) {
-                this.selectedTimeSlotInfo = {
-                    timeSlot: {
-                        date: null,
-                        routeCode: null,
-                        startTime: null,
-                        endTime: null,
-                        jobMaxMinutes: null,
-                        jobMinMinutes: null
-                    },
-                    isPremiumAppointment: null
-                };
-            }
-        },
-        selectedTimeSlotInfo(newValue) {
-            this.updateFooterButtonText(newValue);
-        }
-    },
    methods: {
        splitCopyOnCMSPlaceHolder,
        arePagePrerequisitesValid() {
@ -400,9 +324,6 @@ export default {
        getServiceZipCtuCodeFromStore() {
            return this.mainStore.order.serviceLocation.zipCodeCtu;
        },
-        openInshopTimeSlotsModal() {
-            this.$refs.timeSlotModalQuestion.openModal();
-        },
        getSelectedDate() {
            return this.mainStore.order.schedule.date;
        },
@ -420,64 +341,21 @@ export default {

            return selectedTimeSlotInfo;
        },
-        timeSlotModalClosed() {
-            // Clear the selectedDate if no timeSlot has been selected
-            if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
-                this.selectedDate = null;
-            }
+        dateSelectedFromPicker(date) {
+            this.selectedDate = date;
+            this.showDatePickerError = false;
        },
-        updateFooterButtonText(timeSlotInfo) {
-            let navbarButtonText;
-            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
-                navbarButtonText = 'Continue';
-            } else {
-                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
-                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
-                } else if (
-                    this.appointmentType === AppointmentTypeStrings.MOBILE
-                    && !timeSlotInfo.isPremiumAppointment
-                ) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime,
-                        true
-                    )} - ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.endTime,
-                        true
-                    )}`;
-                }
-            }
-            this.$refs.navbar.updateButtonText(navbarButtonText);
-        },
-        convertSelectedDateToShortMonthAndDay(selectedDate) {
-            // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = convertDateStringToDate(selectedDate);
-            return dateObject.toLocaleDateString('en-us', {
-                month: 'short',
-                day: 'numeric'
-            });
-        },
-        getDisplayTextForMilitaryTime(
-            militaryTimeInput,
-            shouldTrimMinutesIfEmpty = false
-        ) {
-            // Expected input: "HH:MM"
-            let hours = parseInt(militaryTimeInput.split(':')[0], 10);
-            const minutes = militaryTimeInput.split(':')[1];
-            const meridianNotation = hours > 11 ? 'PM' : 'AM';
-
-            if (hours > 12) {
-                hours -= 12;
-            }
-
-            if (shouldTrimMinutesIfEmpty && minutes === '00') {
-                return `${hours} ${meridianNotation}`;
-            }
-            return `${hours}:${minutes} ${meridianNotation}`;
+        timeSlotSelectedFromPicker(timeSlot) {
+            this.selectedTimeSlotInfo = timeSlot;
+            this.showDatePickerError = false;
        },
        forwardButtonAction() {
-            this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
+            if (!this.isFormValid) {
+                this.showDatePickerError = true;
+                return;
+            }

+            this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
            this.$router.navigate(
                this.navigationScenarios.CLICKED_FORWARD,
                this.$route
--- a/src/layouts/welcome-page/welcome-page.spec.js
+++ b/src/layouts/welcome-page/welcome-page.spec.js
@ -136,7 +136,6 @@ describe('welcome-page.vue', () => {
        const state = wrapper.findComponent({ ref: 'state' });
        const glassOnlyDamage = wrapper.findComponent({ ref: 'glassOnlyDamage' });
        const phoneNumber = wrapper.findComponent({ ref: 'phoneNumber' });
-        const email = wrapper.findComponent({ ref: 'email' });

        // Assert
        expect(policyNumber.exists()).toBe(true);
@ -146,7 +145,6 @@ describe('welcome-page.vue', () => {
        expect(state.exists()).toBe(false);
        expect(glassOnlyDamage.exists()).toBe(false);
        expect(phoneNumber.exists()).toBe(true);
-        expect(email.exists()).toBe(true);
    });
    test('Policy zip field should be visible at all times', async () => {
        // Arrange
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@ -12,7 +12,7 @@
                <div class="welcome-page-container iss-heritage-content-container-width">
                    <siteSubHeader
                        cmsWidgetName="SiteSubHeaderWidget"
-                        class="mt-4" />
+                        class="form-group" />
                    <textboxQuestion
                        ref="policyNumber"
                        v-model="welcomePageModel.policyNumber"
@ -22,16 +22,6 @@
                        disableAutoFill
                        :isDisabled="isPolicyHolderDisabled"
                        :validationRules="rules.policyNumber" />
-                    <textboxQuestion
-                        ref="policyZip"
-                        v-model="welcomePageModel.policyZipCode"
-                        inputId="policyZipCode"
-                        cmsWidgetName="PolicyZipQuestion"
-                        isRequired
-                        mask="#####"
-                        :isDisabled="isPolicyZipDisabled"
-                        :validationRules="rules.policyZip"
-                        class="mt-3" />
                    <textboxQuestion
                        ref="phoneNumber"
                        v-model="welcomePageModel.phoneNumber"
@ -41,7 +31,8 @@
                        isRequired
                        :mask="phoneMask"
                        disableAutoFill
-                        class="mt-3" />
+                        placeholderText="###-###-####"
+                        class="form-group" />
                    <textboxQuestion
                        ref="extension"
                        v-model="welcomePageModel.extension"
@ -49,7 +40,7 @@
                        cmsWidgetName="ExtensionQuestion"
                        :validationRules="rules.extension"
                        disableAutoFill
-                        class="mt-3" />
+                        class="form-group" />
                    <textboxQuestion
                        ref="dateOfLoss"
                        v-model="welcomePageModel.dateOfLoss"
@ -62,7 +53,7 @@
                        :max="new Date().toJSON().slice(0, 10)"
                        :min="'1972-12-01'"
                        :validationRules="rules.lossDate"
-                        class="mt-3" />
+                        class="form-group" />
                    <textBlock
                        cmsWidgetName="DamageDateEstimateWidget"
                        typeStyle="small"
@ -77,44 +68,45 @@
                        disableAutoFill
                        :validationRules="rules.damageOption"
                        placeHolderText="Select an option"
-                        class="mt-3" />
+                        class="form-group" />
+                    <textboxQuestion
+                        ref="policyZip"
+                        v-model="welcomePageModel.policyZipCode"
+                        inputId="policyZipCode"
+                        cmsWidgetName="PolicyZipQuestion"
+                        isRequired
+                        mask="#####"
+                        :isDisabled="isPolicyZipDisabled"
+                        :validationRules="rules.policyZip"
+                        class="form-group" />
                    <dropdownQuestion
                        v-if="displayDamageStateQuestion"
                        id="welcomeDropdown"
                        ref="state"
                        v-model="welcomePageModel.damageState"
-                        class="mt-3"
+                        class="form-group"
                        cmsWidgetName="DamageStateQuestion"
                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
                        :options="getStates"
                        :validationRules="rules.lossState"
                        isRequired
                        disableAutoFill
-                        placeHolderText="Select an option" />
+                        placeHolderText="Select State" />
                    <textboxQuestion
                        v-if="displayDamageCityQuestion"
                        ref="damageCity"
                        v-model="welcomePageModel.damageCity"
-                        class="mt-3"
+                        class="form-group"
                        inputId="damageCityField"
                        cmsWidgetName="DamageCityQuestion"
                        isRequired
                        disableAutoFill
                        :validationRules="rules.lossCity" />
-                    <textboxQuestion
-                        ref="email"
-                        v-model="welcomePageModel.email"
-                        inputId="emailField"
-                        cmsWidgetName="EmailAddressQuestion"
-                        :validationRules="rules.email"
-                        isRequired
-                        disableAutoFill
-                        class="mt-3" />
                    <buttonQuestion
                        v-if="displayGlassOnlyQuestion"
                        ref="glassOnlyDamage"
                        v-model="welcomePageModel.isDamageGlassOnly"
-                        class="px-0 mt-3"
+                        class="px-0 form-group"
                        cmsWidgetName="GlassOnlyQuestion"
                        inputId="isDamageGlassOnly"
                        :answers="DamageGlassOnlyOptions"
@ -142,17 +134,9 @@
                            :isDismissible="false" />
                        <siteFooter
                            ref="siteFooter"
-                            class="mt-3"
                            cmsWidgetName="SiteFooterWidget"
                            :isForwardActionDisabled="!meta.valid"
                            @ForwardClicked="forwardButtonAction" />
-                        <textBlock
-                            id="requestCallbackLink"
-                            cmsWidgetName="HelpTextWidget"
-                            linkType="navigation"
-                            href="javascript:void(0)"
-                            class="mb-5 text-left"
-                            @clickEvent="handleHelpLinkClick" />
                    </div>
                </div>
            </div>
@ -257,7 +241,6 @@ export default {
            duplicates: [],
            rules: {
                damageOption: 'damage-option-required',
-                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
                extension: `${globalRules.EXTENSION_FORMAT}`,
                lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
                // eslint-disable-next-line max-len
@ -302,7 +285,11 @@ export default {
            return !!this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
        },
        getStates() {
-            return states;
+            return Object.keys(states).reduce((acc, key) => {
+                // eslint-disable-next-line no-param-reassign
+                acc[key] = states[key].toUpperCase();
+                return acc;
+            }, {});
        },
        isPolicyHolderDisabled() {
            return !!this.mainStore.issConfig.disabledFields.policyNumber;
@ -408,7 +395,6 @@ export default {
                isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
                phoneNumber: this.mainStore.order.contactInfo.homePhone,
                extension: this.mainStore.order.contactInfo.extension,
-                email: this.mainStore.order.customer.emailAddress,
                isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled
            };
        },
@ -425,7 +411,6 @@ export default {
            this.welcomePageModel.isDamageGlassOnly = response.policy.isDamageGlassOnly;
            this.welcomePageModel.phoneNumber = response.customer.homePhone;
            this.welcomePageModel.extension = response.customer.extension;
-            this.welcomePageModel.email = response.customer.emailAddress;
        },
        findDamageCause(damageCause) {
            const damageCauseOptions = this.DamageCauseOptions;
@ -481,13 +466,6 @@ export default {
            this.mainStore.order.loadedFromCookie = true;
            this.answeredContinueModal = true;
            this.$refs.continueModal.closeModal();
-        },
-        handleHelpLinkClick() {
-            useMainStore().setBailout(bailoutMessage.RequestCallback());
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
-                this.$route
-            );
        }
    }
 };
@ -508,6 +486,10 @@ form {
        min-height: 1px;
        padding-left: .9375rem;
        padding-right: .9375rem;
+
+        .form-group {
+            margin-top: 1.25rem;
+        }
    }
 }

--- a/src/store/index.js
+++ b/src/store/index.js
@ -7,7 +7,7 @@ import bailoutMessage from '@/constants/bailoutMessage';
 import coverageStatuses from '@/constants/coverage-statuses';
 import coverageType from '@/constants/coverage-type';
 import damageLocationsSelected from '@/constants/damage-locations-selected';
-import { endpoints } from '@/constants/endpoints';
+import endpoints from '@/constants/endpoints';
 import { experimentSettings, experimentTriggers, experimentUniverses } from '@/constants/experiments';
 import partNumberStrings from '@/constants/part-number-strings';
 import partTypeStrings from '@/constants/part-type-strings';
@ -243,6 +243,7 @@ export const getDefaultState = () => ({
    },
    issConfig: {
        clientName: 'Generic Insurance', // this is the default and will be overriden by the client's name
+        clientFullName: 'Generic Insurance', // this is the default and will be overriden by the client's name or client's full name.
        clientDisplayName: 'Generic Insurance', // this is the default and will be overridden by the client's name or client display name.
        clientHeader: {},
        styleSheet: '', // Stylesheet used by the client.
@ -1351,10 +1352,11 @@ export const useMainStore = defineStore({
        async setVehicle() {
            const encodedMake = encodeURIComponent(this.order.vehicle.make);
            const encodedModel = encodeURIComponent(this.order.vehicle.model);
+            const encodedStyle = encodeURIComponent(this.order.vehicle.style);
            const response = await globalMethods
                .callHttpClient({
                    method: endpoints.GetVehicle.method,
-                    endpoint: `${endpoints.GetVehicle.url}/${this.order.vehicle.year}/${encodedMake}/${encodedModel}/${this.order.vehicle.style}`,
+                    endpoint: `${endpoints.GetVehicle.url}/${this.order.vehicle.year}/${encodedMake}/${encodedModel}/${encodedStyle}`,
                    payload: {}
                });
            this.updateVehicle(response.data);
@ -2154,6 +2156,7 @@ export const useMainStore = defineStore({

        resetISSConfigState() {
            this.issConfig.clientName = 'Generic Insurance';
+            this.issConfig.clientFullName = 'Generic Insurance';
            this.issConfig.clientDisplayName = 'Generic Insurance';
            this.issConfig.clientHeader = {};
            this.issConfig.parentAccountNumber = 0;
@ -2273,7 +2276,6 @@ export const useMainStore = defineStore({
            this.order.policy.damageState = welcomePageModel?.damageState;
            this.order.policy.damageCity = welcomePageModel?.damageCity;
            this.order.policy.isDamageGlassOnly = welcomePageModel?.isDamageGlassOnly;
-            this.order.customer.emailAddress = welcomePageModel?.email;
            this.order.serviceLocation.zipCode = welcomePageModel?.policyZipCode;
            this.updatePhoneNumbers({
                home: welcomePageModel?.phoneNumber,
@ -2363,38 +2365,27 @@ export const useMainStore = defineStore({
            const serviceLocationCity = serviceLocation.city;
            const serviceLocationState = serviceLocation.state;
            const serviceLocationZipCode = serviceLocation.zipCode;
-
-            const lineItemsQueryString = getTaxLineItemQueryString(pricedLineItems, 'lineItems');
-
-            let queryString = '';
-            if (appointmentType === AppointmentTypeStrings.MOBILE
-                || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
-                queryString =
-                `ParentAccountNumber=${this.order.parentAccountNumber}`
-                + `&BillToAccountNumber=${this.billToAccountNumber}`
-                + `&ProviderNumber=${this.providerNumber}`
-                + `&AppointmentType=${appointmentType}`
-                + `&ServiceLocation.City=${serviceLocationCity}`
-                + `&ServiceLocation.State=${serviceLocationState}`
-                + `&ServiceLocation.ZipCode=${serviceLocationZipCode}`
-                + `${lineItemsQueryString}`;
-            } else {
-                queryString =
-                `ParentAccountNumber=${this.order.parentAccountNumber}`
-                + `&BillToAccountNumber=${this.billToAccountNumber}`
-                + `&ProviderNumber=${this.providerNumber}`
-                + `&AppointmentType=${appointmentType}`
-                + `${lineItemsQueryString}`;
-            }
-
            const lineItemServerData = this.order.lineItems.serverData;
-            if (lineItemServerData) {
-                queryString += `&ServerData=${encodeURIComponent(lineItemServerData)}`;
-            }
+
+            const isMobileApt = appointmentType === AppointmentTypeStrings.MOBILE
+                || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;

            const retPricedLineItems = await globalMethods.callHttpClient({
                method: endpoints.TaxOrderItems.method,
-                endpoint: `${endpoints.TaxOrderItems.url}?${queryString}`
+                endpoint: endpoints.TaxOrderItems.url,
+                payload: {
+                    ParentAccountNumber: this.order.parentAccountNumber,
+                    BillToAccountNumber: this.billToAccountNumber,
+                    ProviderNumber: this.providerNumber,
+                    AppointmentType: appointmentType,
+                    PricedLineItems: getLineItemsFlattened(pricedLineItems),
+                    ServiceLocation: {
+                        City: isMobileApt ? serviceLocationCity : null,
+                        State: isMobileApt ? serviceLocationState : null,
+                        ZipCode: isMobileApt ? serviceLocationZipCode : null
+                    },
+                    ServerData: lineItemServerData || ''
+                }
            }).then((response) => {
                this.order.lineItems.serverData = response.data.serverData;
                return addTaxesToPricedLineItems(pricedLineItems, response.data.taxedLineItems);
@ -2402,9 +2393,6 @@ export const useMainStore = defineStore({

            return retPricedLineItems;
        },
-        saveProviderPreferenceData(data) {
-            this.updatePageData({ page: issPageValues.PROVIDER_PREFERENCE, data });
-        },
        addEventToBus(event) {
            this.applicationUser.eventBus.push(event);
        },
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@ -10,7 +10,7 @@ import {
 } from '@/helpers/data-generation.js';
 import coverageStatuses from '@/constants/coverage-statuses.js';
 import { paymentMethods } from '@/constants/payment-method-constants';
-import { endpoints } from '@/constants/endpoints';
+import endpoints from '@/constants/endpoints';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 import bailoutCode from '@/constants/bailoutCode';
 import coverageType from '@/constants/coverage-type';
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@ -174,6 +174,7 @@ body {
    div.textbox-question {
        label {
            span.sub-caption {
+                color: #525656;
                font-weight: 400;
            }
        }
@ -203,10 +204,10 @@ $heritage-btn-width: 9.0625rem; // 145px
    @include heritage-btn-variant('secondary', $white, $heritage-blue-secondary, transparent, true);
    @include heritage-btn-link('link', $blue, transparent, $heritage-blue-secondary);

-    @include heritage-btn-size('lg', 0.625rem,  1.25rem);
+    @include heritage-btn-size('lg', 0.625rem, 1.25rem);
    @include heritage-btn-size('md', 7px, 15px);
-    @include heritage-btn-size('sm', 3px,  6px);
-    @include heritage-btn-size('xs', 1px,  5px);
+    @include heritage-btn-size('sm', 3px, 6px);
+    @include heritage-btn-size('xs', 1px, 5px);

    &.btn-link {
        --bs-btn-padding-x: 0px;
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@ -8,6 +8,10 @@ html {
        &.list-button,
        &.list-button.list-group,
        &.list-card &.option-label {
+            border: 1px solid $red;
+            position: relative;
+            z-index: 4;
+            border-radius: 60px;

            .button-content {
                border: 1px solid $red;
@ -25,6 +29,7 @@ html {

        &.list-card {
            border: 1px solid $red;
+            border-radius: 0.5rem;
        }

        &.ui-radio {
@ -45,7 +50,23 @@ html {

        // END HOVER

-        &.list-button,
+        &.list-button {
+            color: $red;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $red;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $red;
+            }
+
+            &:hover {
+                border-radius: 60px;
+            }
+        }
+
        &.list-card {
            color: $red;

@ -138,6 +159,7 @@ html {
            border: 1px solid $success;
            position: relative;
            z-index: 4;
+            border-radius: 60px;

            .button-content {
                border: none;
@ -155,6 +177,7 @@ html {

        &.list-card {
            border: 1px solid $success;
+            border-radius: 0.5rem;
        }

        &.ui-radio {
@ -175,7 +198,23 @@ html {

        // END HOVER

-        &.list-button,
+        &.list-button {
+            color: $success;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $success;
+            }
+
+            &:hover {
+                border-radius: 60px;
+            }
+        }
+
        &.list-card {
            color: $success;

--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@ -20,7 +20,7 @@ $red-100: #ffe6e4;
 $red-200: #fcbfbb;
 $red-300: #f89892;
 $red-400: #e65c53;
-$red: #d4281c; // Default Red
+$red: #db0020; // Default Red
 $red-600: #ac160b;
 $red-700: #840900;
 $red-800: #5b0600;
@ -160,6 +160,7 @@ $border-radius-sm: 0.2rem;
 $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
 $border-radius-xl: 1.375rem;
 $border-radius-pill: 50rem;
+$border-radius-list-button: 1.375rem; // Used for list buttons

 //Progress Bar Styling
 $progress-bar-success-color: $green;
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@ -2,7 +2,7 @@
  <baseInputButton
      v-bind="$props"
      v-model="selectedValue"
-      buttonWrapperClasses="list-group base-input-button list-button no-hover d-flex flex-column w-100">
+      buttonWrapperClasses="list-group base-input-button list-button no-hover d-flex flex-column w-100 mb-2">
      <div
          :aria-label="buttonLabel"
          class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4"
@ -87,6 +87,7 @@ $heritage-checked-border-color: #0070d1;
      &:checked + .list-button-content {
          background: $heritage-checked-background-color;
          border-color: $heritage-checked-border-color;
+          box-shadow: 0 0 0 1px $blue;
          &:not(.has-sub-copy) {
            font-weight: 500;
            color: $black;
@ -96,9 +97,6 @@ $heritage-checked-border-color: #0070d1;
          font-weight: 400;
          color: $gray-600;
      }
-      &:focus:checked + .list-button-content {
-          border-width: 2.5px;
-      }
  }
 }
 .list-button-content {
@ -112,12 +110,9 @@ $heritage-checked-border-color: #0070d1;
  box-shadow: $heritage-box-shadow;
  width: 100%;
  outline: none;
-  margin-bottom: .625rem;
-  height: 4.375rem;

  &:not(.has-sub-copy) {
    font-weight: 400;
-    height: 2.8125rem;
    color: $darker-gray;
  }

@ -127,4 +122,4 @@ $heritage-checked-border-color: #0070d1;
      }
  }
 }
-</style>
+</style>