Merge branch 'develop' into feature/digital/SSR-448

azure-pipelines.yml

@@ -20,16 +20,17 @@ resources:
     - container: node
       image: packagerepository.sagaws.net:8082/safelite/node-build:15
     - container: awscli
-      image: packagerepository.sagaws.net:8082/safelite/awscli-build:3.7
+      image: packagerepository.sagaws.net:8082/safelite/awscli2-build:3.9
   repositories:
     - repository: AzureDevOps
       type: github
       name: Safelite/AzureDevOps
       endpoint: Safelite
-      ref: refs/tags/t5.5.19
+      ref: refs/tags/t5.5.40
 
 variables:
   - group: Digital-Infrastructure
+  - group: ISS-BuildBranches
 
 stages:
   # PR's
@@ -44,11 +45,12 @@ stages:
           testResultsFile: junit.xml
           summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml
 
-  # Dev Build/Deploy
   - ${{ else }}:
+    # Dev Build/Deploy
     - stage: Dev
+      condition: eq(variables['Build.SourceBranch'], variables['dev-branch'] )
       variables:
-        - group: ISS-dev
+        - group: ISS-Dev
       jobs:
       - deployment: devBuildDeployment
         displayName: Build and Deploy ISS - Dev
@@ -87,4 +89,163 @@ stages:
                       __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                       __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
                     cfDistributionId: $(cfDistributionId)
+
+    # Test Build/Deploy                      
+    - stage: Test
+      condition: eq(variables['Build.SourceBranch'], variables['test-branch'] )
+      variables:
+        - group: ISS-Test
+      jobs:
+        - deployment: testBuildDeployment
+          displayName: Build and Deploy ISS - Test
+          environment: NoApproval-All
+          container: node
+          workspace:
+            clean: all
+          strategy:
+            runOnce:
+              deploy:
+                steps:
+                  - checkout: self
+                    clean: true
+                  - template: templates/digital/step-build-vue.yml@AzureDevOps
+                    parameters:
+                      buildOutputDir: dist
+                      environment: Test
+                  - template: templates/digital/step-deploy-vue.yml@AzureDevOps
+                    parameters:
+                      artifactName: vueDistTest
+                      awsProfile: $(sysDeploymentProfile)
+                      deployBuckets:
+                        safelite-sys-iss-us-east-1:
+                          clearFolder: true
+                          deployFolder: ""
+                          region: us-east-1
+                        safelite-sys-iss-us-east-2:
+                          clearFolder: true
+                          deployFolder: ""
+                          region: us-east-2
+                      appDeployVariables:
+                        __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)                          
+                        __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                        __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
+                      indexDeployVariables:
+                        __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
+                        __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
+                
+    # QA Build/Deploy
+    - stage: QA
+      condition: eq(variables['Build.SourceBranch'], variables['qa-branch'] )
+      variables:
+        - group: ISS-QA
+      jobs:
+        - deployment: qaBuildDeployment
+          displayName: Build and Deploy ISS - QA
+          environment: NoApproval-All
+          container: node
+          workspace:
+            clean: all
+          strategy:
+            runOnce:
+              deploy:
+                steps:
+                  - checkout: self
+                    clean: true
+                  - template: templates/digital/step-build-vue.yml@AzureDevOps
+                    parameters:
+                      buildOutputDir: dist
+                      environment: Qa
+                  - template: templates/digital/step-deploy-vue.yml@AzureDevOps
+                    parameters:
+                      artifactName: vueDistQa
+                      awsProfile: $(qaDeploymentProfile)
+                      deployBuckets:
+                        safelite-qa-iss-us-east-1:
+                          clearFolder: true
+                          deployFolder: ""
+                          region: us-east-1
+                        safelite-qa-iss-us-east-2:
+                          clearFolder: true
+                          deployFolder: ""
+                          region: us-east-2
+                      appDeployVariables:
+                        __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
+                        __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                        __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
+                      indexDeployVariables:
+                        __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
+                        __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
+                  - template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
+                    parameters:
+                      awsCliContainer: awscli
+                      distributionId: $(apiCfDistributionId)
+                      paths: /* 
+                      awsProfile: $(qaDeploymentProfile)
+                  - template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
+                    parameters: 
+                      awsCliContainer: awscli
+                      distributionId: $(cfDistributionId)
+                      paths: /iss/*
+                      awsProfile: $(qaDeploymentProfile)
+
+    # Prod Build/Deploy
+    - stage: Prod
+      condition: succeeded('Qa')
+      variables:
+        - group: ISS-Prod
+      jobs:
+        - deployment: prodBuildDeployment
+          displayName: Build and Deploy ISS - Prod
+          environment: digitalCloud-prod
+          container: node
+          workspace:
+            clean: all
+          strategy:
+            runOnce:
+              deploy:
+                steps:
+                  - checkout: self
+                    clean: true
+                  - template: templates/digital/step-build-vue.yml@AzureDevOps
+                    parameters:
+                      buildOutputDir: dist
+                      environment: Prod
+                  - template: templates/digital/step-deploy-vue.yml@AzureDevOps
+                    parameters:
+                      artifactName: vueDistProd
+                      awsProfile: $(prodDeploymentProfile)
+                      deployBuckets:
+                        safelite-prod-iss-us-east-1:
+                          clearFolder: true
+                          deployFolder: ""
+                          region: us-east-1
+                        safelite-prod-iss-us-east-2:
+                          clearFolder: true
+                          deployFolder: ""
+                          region: us-east-2
+                      appDeployVariables:
+                        __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
+                        __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                        __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
+                      indexDeployVariables:
+                        __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
+                        __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
+                  - template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
+                    parameters:
+                      awsCliContainer: awscli
+                      distributionId: $(apiCfDistributionId)
+                      paths: /* 
+                      awsProfile: $(prodDeploymentProfile)
+                  - template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
+                    parameters: 
+                      awsCliContainer: awscli
+                      distributionId: $(cfDistributionId)
+                      paths: /iss/*
+                      awsProfile: $(prodDeploymentProfile)
+        - template: templates/digital/auto-tag.yml@AzureDevOps
+          parameters:
+            dependsOn: prodBuildDeployment
+            userName: SafeliteAzureDevops
+            userEmail: githubazuredevops@safelite.com
+
                 

src/digital-components/modal/modal.vue

@@ -33,7 +33,7 @@
                         loaderColor="white"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit"
-                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
+                        :class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'" />
                 </div>
             </div>
         </div>
@@ -57,6 +57,7 @@ export default {
         onModalClosedCallback: {
             type: Function,
         },
+        isButtonDisabled: Boolean
     },
     setup(props) {
         const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
@@ -80,7 +81,7 @@ export default {
             }
         },
         resetButtonStyle() {
-            this.$refs.modalButtonMain.resetButtonStyle();
+            this.$refs.modalButtonMain?.resetButtonStyle();
         },
         onModalOpened() {
             this.onModalOpenedCallback?.();

src/layouts/entry-page/entry-page.vue

@@ -19,6 +19,7 @@
         setup() {
             const mainStore = useMainStore();
             mainStore.resetISSConfigState();
+            mainStore.resetPageFields();
             return { mainStore };
         },
         mounted() {

src/layouts/provider-preference/provider-preference.spec.js

@@ -6,7 +6,6 @@ import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-h
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({

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

@@ -1,8 +1,5 @@
 <template>
-    <Form @submit="onSubmit" 
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        @invalid-submit="onInvalidSubmit" 
-        ref="theForm"  
-        >
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
@@ -34,7 +31,12 @@
             ref="ShopPreferenceDrawer" 
             @openSteering="openStateSteeringModal"
             :showSteeringLink="showSteeringLink"/>
-    </Form>    
+        <tpaRecalModal cmsWidgetName="TPARecalModal" 
+            ref="TPARecalModal"
+            :ackError="ackError" 
+            @buttonClick="navigateWithTPAAck"
+            /> 
+    </Form>
 
 </template>
 <script>
@@ -57,6 +59,7 @@ import providerPrefRadio from "./provider-pref-radio/provider-pref-radio";
 import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal";
 import steeringModal from "@/layouts/provider-preference/steering-modal/steering-modal";
 import shopPreferenceModal from "@/layouts/provider-preference/shop-preference-modal/shop-preference-modal";
+import tpaRecalModal from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue"
 
 // DEFINE VALIDATION RULES
 defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
@@ -76,7 +79,8 @@ export default {
         providerPrefRadio,
         recalModal,
         steeringModal,
-        shopPreferenceModal
+        shopPreferenceModal,
+        tpaRecalModal
     },
     data() {
         return {
@@ -124,6 +128,9 @@ export default {
                 }
             ));
             return modifiedAnswers;
+        },
+        ackError() {
+            return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
         }
     },
     methods: {
@@ -146,6 +153,10 @@ export default {
         navigateForward(scenario){
             this.$router.navigate(scenario, this.$route);
         },
+        navigateWithTPAAck() {
+            this.mainStore.saveProviderPreferenceData({selectedProvider: this.selectedProvider, tpaAcknowledgement: this.tpaAcknowledgement}); 
+            this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
+        },
         forwardButtonAction() {
             if(this.selectedProvider) {
                 let scenario = null; 
@@ -158,8 +169,8 @@ export default {
                         {
                             if(this.mainStore.hasRecalibrationPart)
                             {
-                                //open tpa adas modal here, else save selection and navigate forward
+                                this.$refs["TPARecalModal"].openModal();
-                                console.log('add tpa modal code');
+                                this.$refs["siteFooter"].removeLoader();
                                 return;
                             }
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;

src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js

@@ -4,9 +4,6 @@ import { shallowMount } from '@vue/test-utils';
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { useMainStore } from "@/store";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({

src/layouts/provider-preference/steering-modal/steering-modal.spec.js

@@ -5,8 +5,6 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js

@@ -0,0 +1,58 @@
+
+import tpaRecalModal from "./tpa-recal-modal.vue"
+
+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";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+  fetchCmsContentForPage: jest.fn(),
+  setupModalLinks: jest.fn(),
+}));
+  
+describe('tpa-Recal-Modal.vue', () => {
+    test('should show error if not acknowledged', () => {
+      const { wrapper } = setupMocks();
+      wrapper.vm.acknowledged = false;
+      wrapper.vm.footerButtonClick();
+      
+      expect(wrapper.vm.showError).toBeTruthy();
+    }) 
+  
+    test('should not show error if acknowledged', () => {
+        const { wrapper } = setupMocks();
+        wrapper.vm.acknowledged = true;
+        wrapper.vm.footerButtonClick();
+        
+        expect(wrapper.vm.showError).toBeFalsy();
+    }) 
+});
+
+function setupMocks(){
+
+    const mountOptions = getMountOptions({
+      router: {
+          navigate: jest.fn(),
+      },
+    });
+
+    const wrapper = shallowMount(
+        tpaRecalModal,
+        mountOptions
+    );
+    
+    const apiResponses = {};
+
+    settleAllPromises.mockImplementation(() => apiResponses);
+    fetchCmsContentForPage.mockImplementation (() => {});
+
+
+    return { wrapper };
+}

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue

@@ -0,0 +1,156 @@
+<template>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText"
+        @footer-button-event="footerButtonClick"
+        :isButtonDisabled="isButtonDisabled">
+        <div class="form-test-invalid">
+            <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
+            <div>
+                <div class="mb-4" v-html="ModalBodyText"></div>
+                <tpaRecalToggle class="mb-5" cmsWidgetName="TPARecalModalToggle"/>
+                <checkBox
+                    class="mb-2"
+                    :class="showError && ' has-error'"
+                    validationRules="option-required"
+                    checkboxName="tpaAcknowledgement"
+                    buttonID="tpaAcknowledgement"
+                    :tabIndex="0"
+                    :checkboxLabel="ModalSubBodyText"
+                    :screenReaderOnlyText="ModalSubBodyText"
+                    isRequired
+                    ref="tpaAcknowledgement"
+                    v-model="acknowledged"
+                />
+                <div v-if="showError" class="row form-test-error mt-1">
+                    <p>{{ackError}}</p>
+                </div>
+            </div>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "@/digital-components/modal/modal";
+import tpaRecalToggle from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue" 
+import checkBox from "@/ux-components/checkbox/checkbox.vue"
+
+export default {
+    name: "content-group-modal",
+    props: {
+        cmsWidgetName: String,
+        ackError: String,
+    },
+    data() {
+        return {
+            acknowledged: false,
+            showError: false
+        };
+    },
+    emits: ["buttonClick"],
+    computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
+        ModalHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        ModalBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },       
+        ModalSubBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+        isButtonDisabled() {
+            return !this.acknowledged
+        }
+    },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+
+        footerButtonClick() {
+            //check if acked, if not show error
+            if(this.acknowledged)
+            {
+                this.$refs[this.ModalName]?.closeModal();
+                this.$emit("buttonClick");
+            }
+            else
+            {
+                this.$refs[this.ModalName]?.resetButtonStyle();
+                this.showError = true;
+            }
+
+        },
+
+    },
+    watch: {
+        acknowledged(){
+            this.showError = false;
+        }
+    },
+    components: {
+        modal,
+        tpaRecalToggle,
+        checkBox,
+    },
+};
+</script>
+
+<style lang="scss">
+.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;
+                        }
+                        margin-bottom: .5rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.form-check {
+    .form-check-input {
+        &: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;
+    }
+}
+</style>

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js

@@ -0,0 +1,85 @@
+/* eslint-env jest */
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { issPageValues } from '@/router/router-constants/issPage-values';
+import { queryStrings } from '@/constants/query-strings';
+import { GaActions } from "@/constants/analytics";
+import tpaRecalToggle from './tpa-recal-toggle.vue';
+
+const mockText = Object.freeze({
+  HEADER: 'Mock Header',
+  BODY: 'Mock Body',
+});
+const mockRoute = {
+  query: {    
+    issPage: issPageValues.PROVIDER_PREFERENCE,
+  },
+};
+const mockRouter = {
+  navigate: jest.fn(),
+};
+
+const mountOptions = {
+  global: {
+    propsData: {
+      cmsWidgetName: "MockWidgetName",
+    },
+    mixins: [
+      {
+        methods: {
+          getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
+            if (cmsWidgetName === 'MockWidgetName') {
+              if (fieldName === 'HeaderText') {
+                return mockText.HEADER;
+              }
+
+              if (fieldName === 'BodyText') {
+                return mockText.BODY;
+              }
+            }
+
+            return '';
+          }),
+          pushEventToGA: jest.fn()
+        },
+        computed: {
+          GaActions() {
+            return GaActions;
+          },
+          queryStrings() {
+            return queryStrings;
+          },
+        }
+      },
+    ],
+    mocks: {
+      $route: mockRoute,
+      $router: mockRouter,
+    },
+  },
+};
+
+describe('more details section', () => {
+  test('should NOT be displayed on the screen as a default.', () => {
+    const { container } = render(tpaRecalToggle, mountOptions);
+
+    const moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+
+    expect(moreDetailsSection).not.toBeVisible();
+  });
+
+  test('should toggle when arrow clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(tpaRecalToggle, mountOptions);
+    const toggleLink = container.querySelector('#moreDetails');;
+
+    await user.click(toggleLink);
+    let moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+    expect(moreDetailsSection).toBeVisible();
+
+    await user.click(toggleLink);
+    moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+    expect(moreDetailsSection).not.toBeVisible();
+  });
+});

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="tpa-recal-toggle mt-2 mb-3">
+      <div
+        class="tpa-toggle"
+        :class="[isDetailVisible ? 'active' : '']"
+        @click="handleClickToggle"
+      >
+        <textLink
+          linkType="text"
+          href="#!"
+          :text="textForToggle"
+          id="moreDetails"
+        />
+      </div>
+      <Transition>
+        <div
+          v-show="isDetailVisible"
+          id="tpa-recal-detail-wrapper"
+          class="mt-2"
+        >
+          <div
+            v-html="detailContent"
+            id="tpa-recal-detail-content"
+            class="mb-2"
+          />
+        </div>
+      </Transition>
+    </div>
+  </template>
+  <script>
+  import textLink from '@/ux-components/text-link/text-link.vue';
+  
+  export default {
+    name: 'tpa-recal-toggle',
+    props: {
+        cmsWidgetName: String,
+    },
+    components: {
+      textLink,
+    },
+    data() {
+      return {
+        isDetailVisible: false,
+      };
+    },
+    computed: {
+      textForToggle() {
+        return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
+      },
+      detailContent() {
+        return this.getCmsContent(this.cmsWidgetName, 'BodyText');
+      },
+    },
+    methods: {
+      handleClickToggle() {
+        this.isDetailVisible = !this.isDetailVisible;
+      },
+    },
+  };
+  </script>
+  <style lang="scss">
+    .tpa-recal-toggle {
+      .tpa-toggle {
+        &::after {
+          content: "";
+          transition: all 0.5s ease;
+          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+          background-repeat: no-repeat;
+          margin-left: 0.5rem;
+          width: 16px;
+          height: 9px;
+          display: inline-block;
+        }
+        &.active::after {
+          transform: rotate(180deg);
+        }
+        a {
+          font-size: 0.875rem;
+        }
+      }
+    }
+    #tpa-recal-detail-wrapper {
+      // START - Vue Transition
+      &.v-enter-active,
+      &.v-leave-active {
+        transition: opacity 250ms ease-in;
+      }
+  
+      &.v-enter-from,
+      &.v-leave-to {
+        opacity: 0;
+      }
+      // END - Vue Transition
+  
+      img {
+        width: 100%;
+      }
+    }
+    #tpa-recal-detail-content {
+      font-size: 1rem;
+      p {
+        font-size: 1rem;
+        margin-bottom: 0;
+      }
+      ol {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+      }
+    }
+  </style>
+  

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

@@ -26,6 +26,14 @@ const lookupVehicleByVin = {
     },
   },
 };
+const lookupVehicleByVinError = {
+  methodName: 'lookupVehicleByVin',
+  mockResponse: {
+    data: {
+      error: true,
+    },
+  },
+};
 const getPartsOrQuestions = {
   methodName: 'getPartsOrQuestions',
   mockResponse: null,
@@ -457,6 +465,34 @@ describe('vin-lookup.vue', () => {
             );
         });
       });
+
+      test("Selected vehicle VIN do not match vehicles (CarIDs) in our system then navigate forward to bailout page.", async () => {
+        //Arrange
+        const user = userEvent.setup();
+        lookupVehicleByVin.mockResponse.data.error = true;
+
+        jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
+        .mockResolvedValue(lookupVehicleByVinError.mockResponse);
+
+        mountOptions.data = () => ({
+          needToLookupVehicle: true,
+          bailout: true,
+          vin: mockValidVin,
+        });
+
+        const { container } = render(VinLookupComponent, mountOptions);
+        const continueButton = container.querySelector(continueButtonQuerySelector);
+      await user.click(continueButton);
+
+      await flushPromises();
+      await waitFor(() => {
+        expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+        expect(mockRouter.navigate).toHaveBeenCalledWith(
+          navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+          mockRoute
+        );
+      });
+    });
     });
   });
 });

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

@@ -71,6 +71,7 @@ export default {
             vin: this.getVinFromStore(),
             forwardButtonCarStyle:"",
             vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
+            bailout: false,
         };
     },
     provide() {
@@ -147,10 +148,15 @@ export default {
                     // Temp solution to turn on 'disabled' style on the Continue button
                     //  because the form itself actually passes its client-side validation.
                     //  SSR-189 Scenario #4.
-                    this.$refs.siteFooter.disableForwardButton();
+                    this.$refs.siteFooter.enableForwardAction();
-                    return;
+                    this.bailout=true
                 }
 
+                if(this.bailout){                
+                    return this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+                    this.$route);
+                }
                 // Add vin bcs the response from the service doesn't contain vin
                 this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
             }

src/router/router-constants/routing-table.js

@@ -74,7 +74,7 @@ const routingTable = function(store) {
       maps: [
           {
               scenario: navigationScenarios.CLICKED_BACK,
-              destinationIssPageValue: issPageValues.VEHICLE_STYLE
+              destinationIssPageValue: issPageValues.VEHICLE_SELECTION
           },
           {
               scenario: navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
@@ -141,6 +141,10 @@ const routingTable = function(store) {
           {
             scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
             destinationIssPageValue: issPageValues.COVERAGE_STATEMENT
+          },
+          {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+            destinationIssPageValue: issPageValues.BAILOUT_PAGE
           }
       ]
     },

src/store/index.js

@@ -1223,7 +1223,29 @@ export const useMainStore = defineStore({
         this.resetGlassPartsState();
         this.resetSupportingItemsState();
         this.resetVapsState();
+      },
+
+      resetPageFields()
+      {       
+
+        this.order.policy.policyNumber = null;
+        this.order.policy.dateOfLoss = null;
+        this.order.policy.damageCause = null;
+        this.order.policy.damageCity = null;
+        this.order.policy.damageState = null;
+        this.order.customer.phoneNumber = null;
+        this.order.customer.emailAddress = null;
+        this.order.customer.firstName = null;
+        this.order.customer.lastName = null;
+        this.order.customer.address.city = null;
+        this.order.customer.address.state = null;
+        this.order.customer.address.zipCode = null;
+        this.order.customer.address.streetAddress = null;
+        this.order.customer.address.streetAddress2 = null;
+        this.resetVehicleState();
+        this.resetDamageState();
       }
+
     },
     persist: true
 });

src/ux-components/checkbox/checkbox.vue

@@ -8,9 +8,12 @@
             :name="checkboxName"
             :id="buttonID"
             :tabindex="tabIndex"
-            :aria-required="isRequired" />
+            :aria-required="isRequired"
+            @change="handleCheckChange"
+            :ref="checkboxName"
+             />
         <label class="d-flex align-items-start" :for="buttonID">
-            <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+            <p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>
     </div>
@@ -28,6 +31,11 @@ export default {
         isRequired: Boolean,
         hasError: Boolean,
     },
+    methods: {
+      handleCheckChange() {
+        this.$emit("update:modelValue", this.$refs[this.checkboxName].checked);
+      },
+    },
 };
 </script>