nightly

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;

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>

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