From f2e4fc3d97364d3a73864953a64f30284a2235f9 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Mon, 8 May 2023 16:43:34 -0400
Subject: [PATCH 1/6] nightly

---
 .../provider-preference.vue                   | 11 ++-
 .../tpa-recal-modal/tpa-recal-modal.vue       | 85 +++++++++++++++++++
 src/store/index.js                            |  4 +-
 3 files changed, 95 insertions(+), 5 deletions(-)
 create mode 100644 src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue

diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 130738fe..70b1459f 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -34,6 +34,10 @@
             ref="ShopPreferenceDrawer" 
             @openSteering="openStateSteeringModal"
             :showSteeringLink="showSteeringLink"/>
+        <tpaRecalModal cmsWidgetName="TPARecalModal" 
+            ref="TPARecalModal" 
+            @buttonClick="() => navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED)"
+            />
     </Form>    
 
 </template>
@@ -57,6 +61,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 +81,8 @@ export default {
         providerPrefRadio,
         recalModal,
         steeringModal,
-        shopPreferenceModal
+        shopPreferenceModal,
+        tpaRecalModal
     },
     data() {
         return {
@@ -158,8 +164,7 @@ export default {
                         {
                             if(this.mainStore.hasRecalibrationPart)
                             {
-                                //open tpa adas modal here, else save selection and navigate forward
-                                console.log('add tpa modal code');
+                                this.$refs["TPARecalModal"].openModal();
                                 return;
                             }
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
new file mode 100644
index 00000000..f0c9ba30
--- /dev/null
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@@ -0,0 +1,85 @@
+<template>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText"
+        @footer-button-event="footerButtonClick">
+        <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
+        <div>
+            <div class="mb-4" v-html="ModalBodyText"></div>
+            <div v-if="ModalSubBodyText" v-html="ModalSubBodyText"></div>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "@/digital-components/modal/modal";
+
+export default {
+    name: "content-group-modal",
+    props: {
+        cmsWidgetName: String,
+    },
+    emits: ["buttonClick"],
+    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() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
+        },
+        ModalImage() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+    },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+
+        footerButtonClick() {
+            this.$refs[this.ModalName].closeModal();
+            this.$emit("buttonClick");
+        },
+    },
+    components: {
+        modal,
+    },
+};
+</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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/store/index.js b/src/store/index.js
index c6eef029..b545d32c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1205,8 +1205,8 @@ export const useMainStore = defineStore({
       },
 
       resetDamagePartsAndDependencies() {
-        this.resetDamageState();
-        this.resetGlassPartsState();
+        //this.resetDamageState();
+        //this.resetGlassPartsState();
         this.resetSupportingItemsState();
         this.resetVapsState();
       },

From 55efa1f27fdde140a8942c17f1a6f61590cfed5f Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Tue, 9 May 2023 17:37:49 -0400
Subject: [PATCH 2/6] daily

---
 .../tpa-recal-modal/tpa-recal-modal.vue       |  41 +++++--
 .../tpa-recal-toggle/tpa-recal-toggle.vue     | 110 ++++++++++++++++++
 src/ux-components/checkbox/checkbox.vue       |  10 +-
 3 files changed, 151 insertions(+), 10 deletions(-)
 create mode 100644 src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue

diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
index f0c9ba30..6f1bbfed 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@@ -7,19 +7,38 @@
         <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
         <div>
             <div class="mb-4" v-html="ModalBodyText"></div>
-            <div v-if="ModalSubBodyText" v-html="ModalSubBodyText"></div>
+            <tpaRecalToggle cmsWidgetName="TPARecalModalToggle"/>
+            <div>
+                <checkBox 
+                    checkboxName="tpaAcknowledgement"
+                    buttonID="tpaAcknowledgement"
+                    :tabIndex="0"
+                    :checkboxLabel="ModalSubBodyText"
+                    :screenReaderOnlyText="ModalSubBodyText"
+                    isRequired
+                    ref="tpaAcknowledgement"
+                    v-model="acknowledged"
+                />
+            </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,
     },
+    data() {
+        return {
+            acknowledged: false,
+        };
+    },
     emits: ["buttonClick"],
     computed: {
         ModalName() {
@@ -28,21 +47,15 @@ export default {
         ModalHeadline() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
-        ModalSubheadertext() {
-            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
-        },
         ModalBodyText() {
             return this.getCmsContent(this.cmsWidgetName, "BodyText");
-        },
+        },       
         ModalSubBodyText() {
             return this.getCmsContent(this.cmsWidgetName, "BodyText2");
         },
-        ModalImage() {
-            return this.getCmsContent(this.cmsWidgetName, "Image");
-        },
         ModalCloseButtonText() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
-        },
+        }
     },
     methods: {
         openModal() {
@@ -50,12 +63,22 @@ export default {
         },
 
         footerButtonClick() {
+            //check if acked, if not show error
             this.$refs[this.ModalName].closeModal();
             this.$emit("buttonClick");
         },
     },
+    watch: {
+        acknowledged(newValue){
+            //enable/disable footer based on value
+            //need to update modal to accept prop for this
+            console.log(newValue);
+        }
+    },
     components: {
         modal,
+        tpaRecalToggle,
+        checkBox
     },
 };
 </script>
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
new file mode 100644
index 00000000..a5504422
--- /dev/null
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
@@ -0,0 +1,110 @@
+<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"
+        />
+      </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>
+  
\ No newline at end of file
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index cbc1120c..7b82d1f0 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -8,7 +8,10 @@
             :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>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
@@ -28,6 +31,11 @@ export default {
         isRequired: Boolean,
         hasError: Boolean,
     },
+    methods: {
+      handleCheckChange() {
+        this.$emit("update:modelValue", this.$refs[this.checkboxName].checked);
+      },
+    },
 };
 </script>
 

From 5f41c055c1c5fa11d69ad62d1e968df415e5c6be Mon Sep 17 00:00:00 2001
From: saumyaChaturvedi123
 <108388239+saumyaChaturvedi123@users.noreply.github.com>
Date: Thu, 11 May 2023 18:30:22 +0530
Subject: [PATCH 3/6] SSR-466

resetting store values on entry page
---
 src/layouts/entry-page/entry-page.vue |  1 +
 src/store/index.js                    | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/layouts/entry-page/entry-page.vue b/src/layouts/entry-page/entry-page.vue
index 4f06bb03..6154f950 100644
--- a/src/layouts/entry-page/entry-page.vue
+++ b/src/layouts/entry-page/entry-page.vue
@@ -19,6 +19,7 @@
         setup() {
             const mainStore = useMainStore();
             mainStore.resetISSConfigState();
+            mainStore.resetPageFields();
             return { mainStore };
         },
         mounted() {
diff --git a/src/store/index.js b/src/store/index.js
index 25463efb..9f7dd2cc 100644
--- a/src/store/index.js
+++ b/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
 });

From ad28412f87d3d024371baa023f40fec52146e5c4 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Thu, 11 May 2023 15:44:28 -0400
Subject: [PATCH 4/6] added tap recal modal

---
 src/digital-components/modal/modal.vue        |  5 +-
 .../provider-preference.spec.js               |  1 -
 .../provider-preference.vue                   | 22 +++--
 .../shop-preference-modal.spec.js             |  3 -
 .../steering-modal/steering-modal.spec.js     |  2 -
 .../tpa-recal-modal/tpa-recal-modal.spec.js   | 58 +++++++++++++
 .../tpa-recal-modal/tpa-recal-modal.vue       | 74 +++++++++++++---
 .../tpa-recal-toggle/tpa-recal-toggle.spec.js | 85 +++++++++++++++++++
 .../tpa-recal-toggle/tpa-recal-toggle.vue     |  1 +
 src/ux-components/checkbox/checkbox.vue       |  2 +-
 10 files changed, 223 insertions(+), 30 deletions(-)
 create mode 100644 src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js
 create mode 100644 src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index fb06197d..f5c9a221 100644
--- a/src/digital-components/modal/modal.vue
+++ b/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?.();
diff --git a/src/layouts/provider-preference/provider-preference.spec.js b/src/layouts/provider-preference/provider-preference.spec.js
index a2140519..9c84a066 100644
--- a/src/layouts/provider-preference/provider-preference.spec.js
+++ b/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", () => ({
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 70b1459f..954cede7 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -1,8 +1,5 @@
 <template>
-    <Form @submit="onSubmit" 
-        @invalid-submit="onInvalidSubmit" 
-        ref="theForm"  
-        >
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
@@ -35,10 +32,11 @@
             @openSteering="openStateSteeringModal"
             :showSteeringLink="showSteeringLink"/>
         <tpaRecalModal cmsWidgetName="TPARecalModal" 
-            ref="TPARecalModal" 
-            @buttonClick="() => navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED)"
-            />
-    </Form>    
+            ref="TPARecalModal"
+            :ackError="ackError" 
+            @buttonClick="navigateWithTPAAck"
+            /> 
+    </Form>
 
 </template>
 <script>
@@ -130,6 +128,9 @@ export default {
                 }
             ));
             return modifiedAnswers;
+        },
+        ackError() {
+            return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
         }
     },
     methods: {
@@ -152,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; 
@@ -165,6 +170,7 @@ export default {
                             if(this.mainStore.hasRecalibrationPart)
                             {
                                 this.$refs["TPARecalModal"].openModal();
+                                this.$refs["siteFooter"].removeLoader();
                                 return;
                             }
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
diff --git 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
index 70658f9e..8d85cc02 100644
--- 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
@@ -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", () => ({
diff --git a/src/layouts/provider-preference/steering-modal/steering-modal.spec.js b/src/layouts/provider-preference/steering-modal/steering-modal.spec.js
index 7b479d4f..f213f228 100644
--- a/src/layouts/provider-preference/steering-modal/steering-modal.spec.js
+++ b/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", () => ({
diff --git 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
new file mode 100644
index 00000000..bf565f23
--- /dev/null
+++ b/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 };
+}
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
index 6f1bbfed..5aaea389 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@@ -3,13 +3,17 @@
         :ref="ModalName"
         :modalId="ModalName"
         :footerButtonText="ModalCloseButtonText"
-        @footer-button-event="footerButtonClick">
-        <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
-        <div>
-            <div class="mb-4" v-html="ModalBodyText"></div>
-            <tpaRecalToggle cmsWidgetName="TPARecalModalToggle"/>
+        @footer-button-event="footerButtonClick"
+        :isButtonDisabled="isButtonDisabled">
+        <div class="form-test-invalid">
+            <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
             <div>
-                <checkBox 
+                <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"
@@ -19,6 +23,9 @@
                     ref="tpaAcknowledgement"
                     v-model="acknowledged"
                 />
+                <div v-if="showError" class="row form-test-error mt-1">
+                    <p>{{ackError}}</p>
+                </div>
             </div>
         </div>
     </modal>
@@ -33,10 +40,12 @@ export default {
     name: "content-group-modal",
     props: {
         cmsWidgetName: String,
+        ackError: String,
     },
     data() {
         return {
             acknowledged: false,
+            showError: false
         };
     },
     emits: ["buttonClick"],
@@ -55,6 +64,9 @@ export default {
         },
         ModalCloseButtonText() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+        isButtonDisabled() {
+            return !this.acknowledged
         }
     },
     methods: {
@@ -64,21 +76,29 @@ export default {
 
         footerButtonClick() {
             //check if acked, if not show error
-            this.$refs[this.ModalName].closeModal();
-            this.$emit("buttonClick");
+            if(this.acknowledged)
+            {
+                this.$refs[this.ModalName]?.closeModal();
+                this.$emit("buttonClick");
+            }
+            else
+            {
+                this.$refs[this.ModalName]?.resetButtonStyle();
+                this.showError = true;
+            }
+
         },
+
     },
     watch: {
-        acknowledged(newValue){
-            //enable/disable footer based on value
-            //need to update modal to accept prop for this
-            console.log(newValue);
+        acknowledged(){
+            this.showError = false;
         }
     },
     components: {
         modal,
         tpaRecalToggle,
-        checkBox
+        checkBox,
     },
 };
 </script>
@@ -99,10 +119,38 @@ export default {
                         &: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>
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js
new file mode 100644
index 00000000..869356ae
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
index a5504422..c524fcf6 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
@@ -9,6 +9,7 @@
           linkType="text"
           href="#!"
           :text="textForToggle"
+          id="moreDetails"
         />
       </div>
       <Transition>
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 7b82d1f0..7427730f 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -13,7 +13,7 @@
             :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>

From 89510338eca0ed97ef504671b8049c039a27b45e Mon Sep 17 00:00:00 2001
From: Manjiri Jethe <manjiri.jethe@safelite.com>
Date: Fri, 12 May 2023 17:58:34 +0530
Subject: [PATCH 5/6] VIN passed or input doesn't match a CarID in our system

SSRR-462
---
 src/layouts/vin-lookup/vin-lookup.spec.js    | 36 ++++++++++++++++++++
 src/layouts/vin-lookup/vin-lookup.vue        | 11 ++++--
 src/router/router-constants/routing-table.js |  4 +++
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js
index 894ac297..35ae1377 100644
--- a/src/layouts/vin-lookup/vin-lookup.spec.js
+++ b/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
+        );
+      });
+    });
     });
   });
 });
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 58356d9c..0bb282fc 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/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,16 @@ 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();
-                    return;
+                    this.$refs.siteFooter.enableForwardAction();
+                    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 });
             }
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index f57b253b..997886bb 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -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
           }
       ]
     },

From 228f565d2f16020d420cc5037707fb90b7967573 Mon Sep 17 00:00:00 2001
From: Manjiri Jethe <manjiri.jethe@safelite.com>
Date: Fri, 12 May 2023 18:02:27 +0530
Subject: [PATCH 6/6] Update vin-lookup.vue

---
 src/layouts/vin-lookup/vin-lookup.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 0bb282fc..72c16127 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -152,8 +152,7 @@ export default {
                     this.bailout=true
                 }
 
-                if(this.bailout){
-                
+                if(this.bailout){                
                     return this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
                     this.$route);