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

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;
     }