Merge branch 'develop' into feature/INSR-8088

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
+    - template: templates/digital/playwright-test.yml@AzureDevOps
-      continueOnError: true
+      parameters:
-      strategy:
+        applicationType: 'vue'
-        matrix:
+        totalShards: ${{ variables.totalShards }}
-          shard1:
+        targetUrl: $(BASE_URL)
-            shardNumber: 1
+        dockerFileName: 'Dockerfile.playwright'
-          shard2:
+        isRegression: ${{ variables.IS_REGRESSION }}
-            shardNumber: 2
+        filterTags: '@Advanced'
-          shard3:
+        playwrightTestsPath: 'playwright-tests'
-            shardNumber: 3
+        npmServePath: '.'
-          shard4:
+        npmrcPath: 'playwright-tests/.npmrc'
-            shardNumber: 4
+        secrets:
-
+          CCIS_API_AUTH: $(CCIS_API_AUTH)
-      steps:
+          JIRA_API_KEY: $(JIRA_API_KEY)
-      - 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()

playwright-tests/.npmrc

@@ -0,0 +1,3 @@
+registry=https://pkgs.dev.azure.com/Safelite/Digital/_packaging/DigitalQA/npm/registry/
+                       
+always-auth=true

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

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
+    // Environment variables are present in CI environment, no need to read from file
-  if (process.env.NODE_ENV == 'undefined' || process.env.NODE_ENV == null) {
+    const basePath = __dirname; // This gets the directory where the config file is located
-    dotenv.config({ path: `playwright-tests/.env.dev`, example: 'playwright-tests/.env.example' });
+
-  }
+    if (process.env.PLAYWRIGHT_ENV == undefined || process.env.PLAYWRIGHT_ENV == null) {
-  else {
+        dotenv.config({
-    dotenv.config({ path: `playwright-tests/.env.${process.env.NODE_ENV}`, example: 'playwright-tests/.env.example' });
+            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,
+}
 
-/**
+// Jira Report config
- * Read environment variables from file.
+const jiraReportConfig: JiraReporterConfig = {
- * https://github.com/motdotla/dotenv
+  // Jira Reporter Config
- */
+  isRegressionRun: process.env.IS_REGRESSION === 'true',
-// import dotenv from 'dotenv';
+  jiraProjectKey: process.env.JIRA_PROJECT_KEY || '',
-// import path from 'path';
+  jiraEpicKey: process.env.JIRA_EPIC_KEY || '',
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+  jiraCardNumber: process.env.JIRA_CARD_NUMBER || '',
-
+  applicationName: 'ISS NextGen',
-/**
+  jiraApiUtilConfig: {
- * See https://playwright.dev/docs/test-configuration.
+    jiraUrl: process.env.JIRA_SERVER || '',
- */
+    jiraUsername: process.env.JIRA_USERNAME || '',
-const reportConfig: OrtoniReportConfig = {
+    jiraApiKey: process.env.JIRA_API_KEY || '',
-  port: 1994,
+    jiraBoardId: process.env.JIRA_BOARD_ID || ''
-  open: "never",
+  },
-  folderPath: "test-results",
+  jiraCreationPermissions: {
-  filename: "index.html",
+    isCreateTestSubtasks: process.env.IS_REGRESSION !== 'true',
-  logo: "../business-logic/data/logo.png",
+    isCreateBugs: process.env.IS_REGRESSION !== 'true'
-  title: "Test Report",
+  },
-  showProject: false,
+  // Wrapped ortoni config
-  projectName: "ISS-Nextgen-Playwright-Report",
+  ...ortoniReportConfig
-  testType: `E2E- Environment: ${process.env.NODE_ENV} `,
-  preferredTheme: "light",
-  base64Image: true,
 };
 
 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: [
+  reporter: process.env.CI? [
-    ['ortoni-report', reportConfig],
+    ['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,
+    actionTimeout: 60_000,
-    navigationTimeout: 20_000
+    navigationTimeout: 60_000
   },
 
-  /* Configure projects for major browsers */
+    /* Configure projects for major browsers */
-  projects: [
+    projects: [
-    {
+        {
-      name: 'chromium',
+            name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+            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,
-  // },
-});

src/constants/error-messages.js

@@ -52,6 +52,7 @@ 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.',

src/constants/provider-preference.js

@@ -0,0 +1,6 @@
+const PROVIDER_PREFERENCE_OPTIONS = Object.freeze({
+    SAFELITE: 'SafeliteOption',
+    TPA: 'TPAOption'
+});
+
+export default PROVIDER_PREFERENCE_OPTIONS;

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

src/layouts/provider-preference/provider-preference.vue

@@ -15,76 +15,70 @@
                         id="sub-header"
                         cmsWidgetName="SiteSubHeader"
                         class="mb-0 mt-4 text-center" />
-                    <buttonQuestion
+                    <div
-                        ref="buttonQuestion"
+                        class="mt-4 mb-5"
-                        v-model="selectedProvider"
+                        v-html="scheduleWithSafeliteText"></div>
-                        class="provider-preference"
+                    <buttonMain
-                        questionText="Select an option:"
+                        ref="buttonMain"
-                        :answers="prefAnswers"
+                        class="full-width-button"
-                        groupName="prefQuestions"
+                        variant="navigation"
-                        buttonTypeString="providerPrefRadio"
+                        buttonText="Schedule now"
-                        :validationRules="rules.optionRequired"
+                        @clickEvent="scheduleWithSafelite" />
-                        isRequired />
+                    <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"
+                        :isForwardButtonHidden="true"
-                        :isForwardButtonNavigationDisabled="isForwardNavigationDisabled"
+                        @backClicked="navigateBack" />
-                        @backClicked="navigateBack"
-                        @forwardClicked="forwardButtonAction" />
                 </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 textLink from '@/ux-components/text-link/text-link.vue';
-import bailoutMessage from '@/constants/bailoutMessage';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
-import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
-import showIssLoadingModal from '@/helpers/loading-modal-helper';
 
-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);
-
+            // open steering modal if it has body text, the state is defined in the CMS content and doesn't
-            vm.showSteeringLink = !!vm.$refs[STEERING_MODAL_REF_NAME].ModalBodyText;
+            //   populate if the state is not listed in the CMS content
-            if (vm.showSteeringLink) {
+            if (!!vm.$refs[STEERING_MODAL_REF_NAME].ModalBodyText) {
                 vm.openStateSteeringModal();
             }
         });
     },
     data() {
         return {
-            selectedProvider: null,
+            providerPreferenceOptions: PROVIDER_PREFERENCE_OPTIONS,
-            showSteeringLink: false,
-            tpaAcknowledgement: false,
-            rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            },
-            RECAL_MODAL_REF_NAME,
             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;
-        }
+        },
-    },
+        noSelectionError() {
-    watch: {
+            return errorMessages.NO_SELECTION_REQUIRED;
-        prefAnswers(newValue, oldValue) {
+        },
-            if (newValue !== oldValue) {
+        scheduleWithSafeliteText() {
-                setupModalLink(this, RECAL_MODAL_REF_NAME);
+            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() {
+        navigateWithTPARecalAnswer(answer) {
-            this.mainStore.saveProviderPreferenceData({
+            if (answer === this.providerPreferenceOptions.TPA) {
-                selectedProvider: this.selectedProvider,
+                this.scheduleWithTPA();
-                tpaAcknowledgement: this.tpaAcknowledgement
+            } else {
-            });
+                this.scheduleWithSafelite();
-            showIssLoadingModal(true);
+            }
-            this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
         },
-        forwardButtonAction() {
+        scheduleWithSafelite() {
-            if (this.selectedProvider) {
+            this.mainStore.updateIsSafeliteProvider(true);
-                let scenario = null;
+            const scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
-                switch (this.selectedProvider) {
+            this.navigateForward(scenario);
-                    case options.SAFELITE:
+        },
-                        this.mainStore.updateIsSafeliteProvider(true);
+        scheduleWithTPA() {
-                        scenario =
+            this.mainStore.updateIsSafeliteProvider(false);
-                            this.navigationScenarios
+            const scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
-                                .CLICKED_FORWARD_WITH_SAFELITE;
+            this.navigateForward(scenario);
-                        break;
+        },
-                    case options.TPA:
+        findAnotherShopClicked() {
-                        this.mainStore.updateIsSafeliteProvider(false);
+            if (this.mainStore.issConfig.enableTPAFlow) {
-                        if (this.mainStore.issConfig.enableTPAFlow) {
+                if (this.mainStore.hasRecalibrationPart) {
-                            if (this.mainStore.hasRecalibrationPart) {
+                    this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
-                                this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
+                    return;
-                                return;
+                } else {
-                            }
+                    this.scheduleWithTPA();
-                            scenario =
-                                this.navigationScenarios
-                                    .CLICKED_FORWARD_WITH_TPA_ENABLED;
-                        } else {
-                            this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
-                            scenario =
-                                this.navigationScenarios
-                                    .CLICKED_FORWARD_WITH_TPA_DISABLED;
-                        }
-                        break;
-                    default:
                 }
+            } 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 {
+    .full-width-button {
-        margin-top: 0;
+        width: 100%;
-        margin-bottom: 0.5rem;
+    }
-        & > span {
+    .underlined-text {
-            text-align: left;
+        text-decoration: underline;
-        }
     }
     :deep(.safeliteLogo) {
         background-image: url(~@/assets/img/icons/logo.svg);

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

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>

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

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.tpaRecalAnswer && (!this.showAcknowledgementCheckbox || this.acknowledged )) {
-            if (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 {
             }
         }
     }
-}
+    .safelite-or-tpa-question {
-
+        :deep(.question-text) {
-.form-check {
+            span {
-    .form-check-input {
+                font-weight: 500;
-        &:checked {
-            + label {
-                p {
-                    font-weight: 400 !important;
-                    font-size: 1rem !important;
-                    color: $gray-600 !important;
-                    line-height: 1.5rem;
-                }
             }
         }
     }
-    p {
-        font-weight: 400 !important;
-        font-size: 1rem !important;
-        color: $gray-600 !important;
-        line-height: 1.5rem;
-    }
 }
 
+
 .form-test-error {
     p {
         font-weight: 500;

src/store/index.js

@@ -2395,9 +2395,6 @@ export const useMainStore = defineStore({
 
             return retPricedLineItems;
         },
-        saveProviderPreferenceData(data) {
-            this.updatePageData({ page: issPageValues.PROVIDER_PREFERENCE, data });
-        },
         addEventToBus(event) {
             this.applicationUser.eventBus.push(event);
         },