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

src/iss-components/steering-text/steering-text.spec.js

@@ -0,0 +1,45 @@
+import { shallowMount } from "@vue/test-utils";
+import steeringTextModal from "./steering-text";
+import { createApp } from 'vue';
+import { createPinia } from "pinia";
+import App from '@/App.vue';
+
+describe("steering-text.vue", () => {
+    test("Should display steering text from CMS for state MA", async () => {
+        // Act
+       
+       const wrapper = shallowMount(steeringTextModal, {
+        mixins: [mockMixin],
+        props: {
+            cmsWidgetName: "MASteeringTextWidget",
+        },
+        attachTo: document.body,
+    });
+    expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+    });
+    
+    
+});
+
+const vueApp = createApp(App);
+const pinia = createPinia();
+vueApp.use(pinia);
+///////////////
+// Constants //
+///////////////
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+
+const mockCmsContent = {
+    BodyText: "MASteeringText",
+   
+};
+
+

src/iss-components/steering-text/steering-text.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>       
+        <textBlock          
+            cmsWidgetName="MASteeringText"         
+            id="SteeringTextContent"
+        />
+        <div>
+            <p class="small" v-if="isStateMA" v-html="MASteeringText" ></p>
+        </div>  
+       
+    </div>
+   
+</template>
+
+<script>
+import { useMainStore } from "@/store";
+
+ export default{
+    name: "steeringTextModal",    
+    computed: {     
+        MASteeringText() {            
+                return this.getCmsContent("MASteeringText", "BodyText");                
+            },
+        isStateMA()
+            {
+                if (this.mainStore.order.customer.address.state=='MA')
+                {
+                    return true
+                }
+            }
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    }
+ }
+</script>

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

@@ -34,6 +34,7 @@
           </p>
         </div>
         <recalModal cmsWidgetName="RecalModal" />
+        <steeringText  cmsWidgetName="MASteeringText" ></steeringText>
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -55,7 +56,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import textBlock from "@/digital-components/text-block/text-block";
 import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
-
+import steeringText from "@/iss-components/steering-text/steering-text.vue";
 // Import Supporting Files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
@@ -72,8 +73,9 @@ export default {
     siteSubHeader,
     Form,
     textBlock,
-    recalModal
-  },
+    recalModal,
+    steeringText
+},
   computed: {
     bodyText() {
       if (useMainStore().order.damage.isRepair) {

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

@@ -3,7 +3,7 @@
     <div class="page-container-grouped-styles overflow-auto">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
-      <div class="fade-on-route-transition sub-container make-tall px-5">
+      <div class="fade-on-route-transition sub-container make-tall overflow-scroller px-5">
         <div v-html="ProviderPreferenceHeaderText"  class="text-center mt-4 mb-4" ></div>
         <div
             v-html="ProviderPreferenceBodyText"
@@ -118,6 +118,10 @@ export default {
 };
 </script>
 <style lang="scss">
+.overflow-scroller {    
+    height: calc(100% - 220px) !important;   
+    overflow-X: hidden !important;   
+}
 #sub-header span{
 color: #000000;
 }