From a48e2c1d0137de9f32b67f472e821a4d6b76c22a Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 3 Aug 2022 13:19:23 -0400
Subject: [PATCH 1/3] CSR-460 Change copy and image from hard coded to CMS
 driven.

---
 .../vin-information/vin-information.vue       | 53 ++++++++++++++++---
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index 91cee616f..ad0ea566d 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.vue
+++ b/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()">
-      <textLink :text="HeadlineText" linkType="text" href="#!" />
+    <div class="vin-toggle d-inline-flex mt-2" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+      <textLink
+        linkType="text"
+        href="#!"
+        :text="WhereCanIFindMyVINToggle"
+      />
     </div>
     <div class="vin-info">
-      <div class="mt-2" v-html="BodyText"></div>
-      <img :src="OptionalImage" alt="" />
+      <div class="mt-2" v-html="WhereCanIFindMyVINBodyCopy"></div>
+      <img :src="WhereCanIFindMyVINImage" alt="" />
     </div>
   </div>
 </template>
@@ -13,23 +17,53 @@
 <script>
 
 import textLink from "@/ux-components/text-link/text-link";
+//Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 export default {
   name: "vinInformation",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
   components: {
     textLink,
   },
   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: {
+    WhereCanIFindMyVINToggle(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "HeaderText");
+    },
+    WhereCanIFindMyVINBodyCopy(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "BodyText");
+    },
+    WhereCanIFindMyVINImage(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "Image");
+    },
   }
 }
 
@@ -72,8 +106,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;
     }

From c61e83695a572176ed5388ac9f1fb2b5aad34364 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 3 Aug 2022 13:24:23 -0400
Subject: [PATCH 2/3] Change variable name to something more descriptive.

---
 src/layouts/vin-lookup/vin-information/vin-information.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index ad0ea566d..a4c2fcdb1 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.vue
+++ b/src/layouts/vin-lookup/vin-information/vin-information.vue
@@ -4,7 +4,7 @@
       <textLink
         linkType="text"
         href="#!"
-        :text="WhereCanIFindMyVINToggle"
+        :text="WhereCanIFindMyVINHeadline"
       />
     </div>
     <div class="vin-info">
@@ -55,7 +55,7 @@ export default {
     }
   },
   computed: {
-    WhereCanIFindMyVINToggle(){
+    WhereCanIFindMyVINHeadline(){
       return this.getCmsContent("WhereCanIFindMyVINToggle", "HeaderText");
     },
     WhereCanIFindMyVINBodyCopy(){

From 62550ab6a07510377e9c88277b1b5d2c3f9be682 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 4 Aug 2022 13:23:34 -0400
Subject: [PATCH 3/3] Update unit test.

---
 .../vin-information/vin-information.spec.js   | 10 ++++-
 .../vin-information/vin-information.vue       | 20 ----------
 src/layouts/vin-lookup/vin-lookup.vue         | 38 +++++++++----------
 3 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-information/vin-information.spec.js b/src/layouts/vin-lookup/vin-information/vin-information.spec.js
index b80daf9ef..7ffdeedf8 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.spec.js
+++ b/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()
+  }
+}
diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index a4c2fcdb1..50194ee7b 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.vue
+++ b/src/layouts/vin-lookup/vin-information/vin-information.vue
@@ -18,29 +18,9 @@
 
 import textLink from "@/ux-components/text-link/text-link";
 //Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 export default {
   name: "vinInformation",
-  async beforeRouteEnter(to, from, next) {
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
-
-    const resultMap = await settleAllPromises(promiseResultMap);
-
-    // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
   components: {
     textLink,
   },
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 4ba6a9fe9..84c17cfd9 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -56,19 +56,19 @@
             />
           </div>
         </div>
-        <alert ref="alertInvalidZip" 
-          v-if="displayInvalidZipAlert" 
-          class="my-4" 
-          cmsWidgetName="AlertInvalidZipWidget" 
-          alertClass="alert-danger" 
-          v-bind:isDismissible="false" 
-        />        
+        <alert ref="alertInvalidZip"
+          v-if="displayInvalidZipAlert"
+          class="my-4"
+          cmsWidgetName="AlertInvalidZipWidget"
+          alertClass="alert-danger"
+          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>