nightly

src/layouts/coverage-statement/coverage-statement.vue

@@ -33,7 +33,7 @@
             ref="coverageStatementBodyText">
           </p>
         </div>
-        <recalModal cmsWidgetName="RecalModal" />
+        
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -43,7 +43,9 @@
         />
       </div>
     </div>
+    <recalModal cmsWidgetName="RecalModal" />
   </Form>
+
 </template>
 <script>
 
@@ -108,6 +110,10 @@ export default {
     var damageString = getDamageString();
     return damageString == "match" ? "" : damageString;
     },
+    openModal(name)
+    {
+      $refs[name].openModal();
+    },
   },
   async beforeRouteEnter(to, from, next) {
     // Call APIs

src/layouts/coverage-statement/recal-modal/recal-modal.vue

@@ -1,36 +1,36 @@
 <template>
-    <div>
-        <modal
-            :ref="cmsWidgetName"
-            :modalId="cmsWidgetName"
-            :footerButtonText="ModalCloseButtonText" 
-        >
-            <div class="recal-modal-body ps-4 pe-4 pt-0 pb-5">
-                <h5 class="mb-4 text-center" v-html="ModalHeadline"></h5>
-                <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
-                <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
-                <p class="mb-0 small" v-html="ModalBodyText"></p>
-                <p
-                    class="my-4 caption modal-sub-body"
-                    v-if="ModalSubBodyText"
-                    v-html="ModalSubBodyText">
-                </p>
-            </div>
-        </modal>
-    </div>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText" 
+    >
+        <div class="recal-modal-body ps-4 pe-4 pt-0 pb-5">
+            <h5 class="mb-4 text-center" v-html="ModalHeadline"></h5>
+            <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
+            <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
+            <p class="mb-0 small" v-html="ModalBodyText"></p>
+            <p
+                class="my-4 caption modal-sub-body"
+                v-if="ModalSubBodyText"
+                v-html="ModalSubBodyText">
+            </p>
+        </div>
+    </modal>
 
 </template>
 
 <script>
-import buttonMain from "@/ux-components/button-main/button-main";
 import modal from "@/digital-components/modal/modal";
 
 export default {
-    name: "modal",
+    name: "recal-modal",
     props: {
         cmsWidgetName: String,
     },
     computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
         ModalHeadline() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
@@ -50,13 +50,8 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
     },
-    methods: {
-        resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
-        },
-    },
     components: {
-        buttonMain,
+        modal,
     },
 };
 </script>