Merge pull request #731 from Safelite/feature/CSR-781-2

Feature/csr 781 2

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-block d-flex w-100 mt-4" :class="[justifyText, typeStyle, fontWeight]" v-html="this.TextBlockCopy"></div>
+  <div class="text-block d-flex w-100 mt-2" :class="[justifyText, typeStyle, fontWeight]" v-html="this.TextBlockCopy"></div>
 </template>
 
 <script>

src/common-components/text-block/text-block.vue.orig

@@ -0,0 +1,41 @@
+<template>
+  <div class="text-block d-flex w-100 mt-4" :class="[justifyText, typeStyle, fontWeight]" v-html="this.TextBlockCopy"></div>
+</template>
+
+<script>
+export default {
+  name: 'textBlock',
+  props: {
+    justifyText: String,// left, right, center
+    typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
+    fontWeight: String,// bold=500, default is 400
+    cmsWidgetName: String,
+  },
+  computed: {
+      TextBlockCopy(){
+        return this.getCmsContent(this.cmsWidgetName, "Text");
+      },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .text-block {
+    &.left {
+      justify-content: flex-start;
+    }
+    &.right {
+      justify-content: flex-end;
+    }
+    &.center {
+      justify-content: center;
+    }
+    &.bold {
+      font-weight: 500;
+    }
+  }
+<<<<<<< HEAD
+</style>
+=======
+</style>
+>>>>>>> d1bf013... fixed remaining merge conflict

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

@@ -6,7 +6,7 @@
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
         <div class="fade-on-route-transition sub-container make-tall">
-            <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+            <customerQuestions ref="customerQuestions" v-model="customerQuestions" />           
             <alert ref="alertVinNotFound" 
 				v-if="displayVinNotFoundAlert" 
 				class="mb-4" 

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

@@ -24,7 +24,7 @@
 			/>
 		</div>
 	</div>
-	<div class="row mb-5">
+	<div class="row mt-4">
 		<div class="col">
 			<textboxQuestion
 				cmsWidgetName="EmailAddressQuestionWidget"
@@ -35,7 +35,15 @@
 				validationRules="email-address-required|email-address-format"
 			/>
 		</div>
-	</div>  
+	</div> 
+	<div class="row mb-4">
+		<div class="col">
+			<textBlock 
+				cmsWidgetName="QuoteEmailTextBlockWidget" 
+				typeStyle="caption"
+			/>
+		</div>
+	</div> 
 </template>
 
 <script>
@@ -45,6 +53,7 @@ import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import textBlock from '@/common-components/text-block/text-block';
 
 // DEFINE VALIDATION RULES
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@@ -87,6 +96,7 @@ export default ({
 	components: {
 		addressQuestions,
 		textboxQuestion,
+		textBlock
 	}
 })
 </script>

src/layouts/estimate/estimate.vue

@@ -47,7 +47,7 @@
               />
             </div>
           </div>
-          <div class="row my-2">
+          <div class="row mt-2">
             <div class="col">
               <textboxQuestion
                 cmsWidgetName="EmailAddressQuestionWidget"
@@ -59,6 +59,14 @@
               />
             </div>
           </div>
+          <div class="row mb-2">
+            <div class="col">
+              <textBlock 
+                cmsWidgetName="QuoteEmailTextBlockWidget" 
+                typeStyle="caption"
+              />
+            </div>
+          </div>
           <alert ref="alertInvalidZip"
             v-if="displayInvalidZipAlert"
             class="my-4"
@@ -89,6 +97,7 @@
 </template>
 
 <script>
+
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
@@ -98,6 +107,8 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
+import textBlock from "@/common-components/text-block/text-block";
+
 //Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -108,12 +119,14 @@ import store from "@/store";
 import { storeActions } from "@/constants/store-actions";
 import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+
 // Define Validation Rules
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
 defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
 defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
 export default {
   name: "estimate",
   data() {
@@ -238,6 +251,7 @@ export default {
     alert,
     textboxQuestion,
     loadingModal,
+    textBlock
   },
 };
 </script>

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

@@ -36,7 +36,7 @@
             />
           </div>
         </div>
-        <div class="row my-2">
+        <div class="row mt-2">
           <div class="col">
             <textboxQuestion
               cmsWidgetName="EmailAddressQuestionWidget"
@@ -46,6 +46,14 @@
             />
           </div>
         </div>
+        <div class="row mb-2">
+          <div class="col">
+            <textBlock 
+              cmsWidgetName="QuoteEmailTextBlockWidget" 
+              typeStyle="caption"
+            />
+          </div>
+        </div>        
         <alert 
           v-if="displayInvalidZipAlert" 
           class="my-3"           
@@ -109,6 +117,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
+import textBlock from '@/common-components/text-block/text-block';
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -360,7 +369,8 @@ export default {
     funnelSubHeader,
     textboxQuestion,
     alert,    
-    loadingModal,    
+    loadingModal,
+    textBlock,    
     Form
   },
 };

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

@@ -44,7 +44,7 @@
             />
           </div>
         </div>
-        <div class="row my-2">
+        <div class="row mt-2">
           <div class="col">
             <textboxQuestion
               cmsWidgetName="EmailAddressQuestionWidget"
@@ -56,6 +56,14 @@
             />
           </div>
         </div>
+        <div class="row mb-2">
+          <div class="col">
+            <textBlock 
+              cmsWidgetName="QuoteEmailTextBlockWidget"
+              typeStyle="caption"
+            />
+          </div>
+        </div>
         <alert ref="alertInvalidZip"
           v-if="displayInvalidZipAlert"
           class="my-4"
@@ -124,6 +132,7 @@ import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
 import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
+import textBlock from '@/common-components/text-block/text-block';
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -396,6 +405,7 @@ export default {
     alert,
     vinInformation,
     loadingModal,
+    textBlock,
     Form,
   },
 };