Merge pull request #164 from Safelite/SSR-219-create-coverage-statement-page

Create CSM entries and markup for coverage statement page.

src/digital-components/text-block/text-block.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="text-block w-100 mt-2"
+        class="text-block w-100"
         :class="[justifyText, typeStyle, fontWeight]"
         v-html="this.TextBlockCopy"></div>
 </template>
@@ -25,12 +25,15 @@ export default {
 <style lang="scss" scoped>
 .text-block {
     &.left {
+        display: flex;
         justify-content: flex-start;
     }
     &.right {
+        display: flex;
         justify-content: flex-end;
     }
     &.center {
+        display: flex;
         justify-content: center;
     }
     &.bold {

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -2,7 +2,7 @@
     <div :class="`page-container-grouped-styles questions-page`">
         <loadingModal ref="loadingModal" />
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+        <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
         <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
         <div class="fade-on-route-transition sub-container make-tall">
             <alert

src/iss-components/vehicle-banner/vehicle-banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vehicle_banner mb-3 text-center">
+  <div class="vehicle_banner text-center">
     <img
       class="vehicle-image img-fluid"
       :src="vehicleImageToDisplay"

src/layouts/address-lookup/address-lookup.vue

@@ -8,6 +8,7 @@
         <div class="page-container-grouped-styles">
             <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
             <vehicleBanner
+                class="mb-3"
                 cmsWidgetName="VehicleBannerWidget"
                 ref="vehicleBanner"
                 :displayGenericVehicleImage="false" />

src/layouts/address-vehicles/address-vehicles.vue

@@ -8,6 +8,7 @@
     <div class="page-container-grouped-styles overflow-auto">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <vehicleBanner
+        class="mb-3"
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
       />

src/layouts/capability-questions/capability-questions.vue

@@ -11,6 +11,7 @@
       <vehicleBanner
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
+        class="mb-3"
       />
       <siteSubHeader
         cmsWidgetName="SiteSubHeaderWidget"

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

@@ -11,13 +11,30 @@
       <vehicleBanner
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
+        class="mb-0"
       />
-      <siteSubHeader
+      <div class="fade-on-route-transition sub-container make-tall">
-        cmsWidgetName="SiteSubHeaderWidget"
+        <textBlock
+            cmsWidgetName="verifyingCoverageStatement"
+            typeStyle="h5"
+            justifyText="center"
+            class="mt-4 mb-4"
         />
-      <div class="fade-on-route-transition sub-container make-tall mt-5">
+        <textBlock
-        <p>Placeholder for coverage-statement page</p>
+            cmsWidgetName="continueWithSchedulingCopy"
-
+            typeStyle="body"
+            class="mt-0"
+        />
+        <textBlock
+            cmsWidgetName="whatHappensNextCopy"
+            class="mt-4 mb-2 fw-bold"
+        />
+        <textBlock
+            cmsWidgetName="UnverifiedADASNextStepsWidget"
+            typeStyle="body"
+        />
+        <a href="#!" data-bs-toggle="modal" data-bs-target="#RecalModal" aria-label="Modal window">Recalibration</a>
+        <modal cmsWidgetName="RecalModal" />
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -30,9 +47,6 @@
   </Form>
 </template>
 <script>
-// Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { settleAllPromises } from '@/helpers/layout-helper';
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
@@ -41,6 +55,12 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import textBlock from "@/digital-components/text-block/text-block";
+import modal from "@/digital-components/modal/modal";
+
+// Import Supporting Files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { settleAllPromises } from '@/helpers/layout-helper';
 
 export default {
   name: 'coverage-statement',
@@ -51,6 +71,8 @@ export default {
     siteSubHeader,
     Form,
     vehicleBanner,
+    textBlock,
+    modal,
   },
   data() {
     return {};
@@ -87,3 +109,12 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+    ol {
+        margin-left: -1rem;
+        li {
+            margin-bottom: .5rem;
+        }
+    }
+</style>

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -6,6 +6,7 @@
     <div class="page-container-grouped-styles overflow-auto">
       <siteHeader cms-widget-name="SiteHeaderWidget" />
       <vehicleBanner
+        class="mb-3"
         cms-widget-name="VehicleBannerWidget"
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -3,6 +3,7 @@
         <div class="page-container-grouped-styles overflow-auto">
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
             <vehicleBanner
+                class="mb-3"
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -8,6 +8,7 @@
         cms-widget-name="SiteHeaderWidget"
       />
       <VehicleBanner
+        class="mb-3"
         cms-widget-name="VehicleBannerWidget"
         :display-generic-vehicle-image="false"
       />

src/layouts/vehicle-make/vehicle-make.vue

@@ -3,7 +3,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="select-car">
         <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
+          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
           <siteSubHeader
             cmsWidgetName="SiteSubHeaderWidget"
             :hasBackButton="true"

src/layouts/vehicle-model/vehicle-model.vue

@@ -3,7 +3,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="select-car">
         <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
           <siteSubHeader
             cmsWidgetName="SiteSubHeaderWidget"
             :hasBackButton="true"
@@ -109,4 +109,3 @@
     },
   };
   </script>
-  

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -3,6 +3,7 @@
         <div class="page-container-grouped-styles vehicle-parts">
             <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
             <vehicleBanner
+                class="mb-3"
                 ref="vehicleBanner"
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />

src/layouts/vehicle-style/vehicle-style.vue

@@ -3,7 +3,7 @@
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
         <div class="select-car">
             <div class="select-car-form rounded text-center">
-                <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+                <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
                 <siteSubHeader
                     cmsWidgetName="SiteSubHeaderWidget"
                     :hasBackButton="true"

src/layouts/vehicle-year/vehicle-year.vue

@@ -3,7 +3,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="select-car">
         <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
+          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
           <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
           <div class="fade-on-route-transition">
             <yearQuestion
@@ -99,4 +99,3 @@
     },
   };
   </script>
-  

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

@@ -9,6 +9,7 @@
         cmsWidgetName="SiteHeaderWidget"
       />
       <vehicleBanner
+        class="mb-3"
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
       />

src/layouts/welcome-page/welcome-page.vue

@@ -34,7 +34,7 @@
             </div>
             <div class="row">
                 <div class="col">
-                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
+                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" class="mt-2" />
                 </div>
             </div>
             <div class="row mt-4">

src/styles/common-typography-styles.scss

@@ -25,7 +25,7 @@ h4,.h4 {
   font-weight: 300;
 }
 h5,.h5 {
-  line-height: 1.325;
+  line-height: 1.6;
   font-weight: 400;
 }
 h6,.h6 {