Merge pull request #638 from Safelite/BRM-update-vin-info-to-use-cms

CSR-460 Change copy and image from hard coded to CMS driven.

src/layouts/vin-lookup/vin-information/vin-information.spec.js

@@ -4,7 +4,9 @@ import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information
 describe("vinInformation.vue", () => {
   it("Should return input class active if isActive is true", async () => {
     // Act
-    const wrapper = shallowMount(vinInformation);
+    const wrapper = shallowMount(vinInformation, {
+      mixins: [mockMixin]
+    });
 
     await wrapper.setData({
       isActive: true,
@@ -16,3 +18,9 @@ describe("vinInformation.vue", () => {
     expect(wrapper.vm.isActive).toEqual(false);
   });
 });
+
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn()
+  }
+}

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

@@ -1,11 +1,15 @@
 <template>
   <div class="vin-information">
-    <div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+    <div class="vin-toggle d-inline-flex mt-2" :class="[isActive ? 'active' : '']" @click="toggleClass()">
-      <textLink :text="HeadlineText" linkType="text" href="#!" />
+      <textLink
+        linkType="text"
+        href="#!"
+        :text="WhereCanIFindMyVINHeadline"
+      />
     </div>
     <div class="vin-info">
-      <div class="mt-2" v-html="BodyText"></div>
+      <div class="mt-2" v-html="WhereCanIFindMyVINBodyCopy"></div>
-      <img :src="OptionalImage" alt="" />
+      <img :src="WhereCanIFindMyVINImage" alt="" />
     </div>
   </div>
 </template>
@@ -13,6 +17,8 @@
 <script>
 
 import textLink from "@/ux-components/text-link/text-link";
+//Supporting files
+import { settleAllPromises } from "@/helpers/layout-helper";
 export default {
   name: "vinInformation",
   components: {
@@ -21,15 +27,23 @@ export default {
   data() {
     return {
       isActive: false,
-      HeadlineText: "Where can I find my VIN?",
-      BodyText: "<p class='mb-2'>You can find your VIN in a few places:</p> <ol> <li>Driver side windshield</li> <li>Driver side doorjamb</li> <li>Vehicle registration card</li> <li>Auto insurance card or app</li> </ol>",
-      OptionalImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/vin_location.svg?sfvrsn=63a9a2cf_3",
     };
   },
   methods: {
     toggleClass: function(event){
        this.isActive = !this.isActive;
     }
+  },
+  computed: {
+    WhereCanIFindMyVINHeadline(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "HeaderText");
+    },
+    WhereCanIFindMyVINBodyCopy(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "BodyText");
+    },
+    WhereCanIFindMyVINImage(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "Image");
+    },
   }
 }
 
@@ -72,8 +86,11 @@ export default {
     transition: all 250ms ease-out;
     overflow: hidden;
     opacity: 0;
+    p {
+      margin-bottom: .5rem;
+    }
     img {
-      max-width: 420px;
+      max-width: 100%;
       width: 117%;
       height: auto;
     }

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

@@ -56,19 +56,19 @@
             />
           </div>
         </div>
-        <alert ref="alertInvalidZip" 
+        <alert ref="alertInvalidZip"
-          v-if="displayInvalidZipAlert" 
+          v-if="displayInvalidZipAlert"
-          class="my-4" 
+          class="my-4"
-          cmsWidgetName="AlertInvalidZipWidget" 
+          cmsWidgetName="AlertInvalidZipWidget"
-          alertClass="alert-danger" 
+          alertClass="alert-danger"
-          v-bind:isDismissible="false" 
+          v-bind:isDismissible="false"
-        />        
+        />
         <alert
           class="my-4"
           :manualHeadline="AlertPerfectMatchInsuranceVerifiedHeader"
           :manualCopy="AlertPerfectMatchInsuranceVerifiedBody"
           v-model="customAlertData"
-          v-if="vinPopulatedOnPageLoad && isInsuranceVerified" 
+          v-if="vinPopulatedOnPageLoad && isInsuranceVerified"
           alertClass="alert-success"
         />
         <alert
@@ -173,7 +173,7 @@ export default {
     return {
       vin: this.getVinFromStore(),
       serviceZipCode: this.getZipFromStore(),
-      emailAddress: this.getEmailFromStore(),      
+      emailAddress: this.getEmailFromStore(),
       isCarIdDifferent: false,
       customAlertData: {},
       previouslyEnteredCarId: '',
@@ -198,7 +198,7 @@ export default {
     getZipFromStore(){
       return this.$store.getters.order.serviceLocation.zipCode;
     },
-    attachCustomEvents() { 
+    attachCustomEvents() {
       this.prependActionToMethod(this, this.forwardButtonAction, () => {
         this.pushEventToGA(
           this.$route.query[this.queryStrings.FMG_PAGE],
@@ -243,9 +243,9 @@ export default {
         if (this.serviceZipCode && !isZipValid) {
           this.displayInvalidZipAlert = true;
           return this.$refs.funnelFooter.removeLoader();
-        } 
+        }
         this.displayInvalidZipAlert = false;
-        
+
         // If either lookup fails, remove the loader and stop processing the page.
         if (!resultMap.vehicleLookupResponse || !resultMap.serviceZipValidationResponse.isServiceable) {
           // If the vehicle result is undefined, the vin entered was invalid.
@@ -270,7 +270,7 @@ export default {
           this.previouslyEnteredCarId = resultMap.vehicleLookupResponse.carId;
           this.customAlertData.vehicleInfo = resultMap.vehicleLookupResponse;
           this.displayMatchedDifferentVehicleAlert = true;
-          
+
           this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(resultMap.vehicleLookupResponse.carId);
 
           // Update button "Continue with..."
@@ -292,12 +292,12 @@ export default {
           }, false);
 
         return await this.navigateForward();
-        
+
       }
 
       // If a VIN has already been found. Validate the Service Zip (in case of changes)
       const zipValidationResponse = await this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {zip: this.serviceZipCode});
-      
+
       // Check if Service Zip entered is serviceable
       if (zipValidationResponse.data.isServiceable) {
         // If the Service Zip entered is serviceable then save the Zip Info and Email Address and navigate forward
@@ -379,8 +379,8 @@ export default {
       }
       else {
         return 'XXXXXXXXXXXXXXXXX';
-      }    
+      }
-    }, 
+    },
   },
   watch: {
     vin() {
@@ -397,10 +397,10 @@ export default {
     vehicleBanner,
     funnelSubHeader,
     textboxQuestion,
-    alert,   
+    alert,
     vinInformation,
     loadingModal,
-    Form,    
+    Form,
   },
 };
 </script>