jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
CSR-460 Change copy and image from hard coded to CMS driven.
This commit is contained in:
bmauger 2022-08-04 13:28:17 -04:00 committed by GitHub
commit 714f863d98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/layouts/vin-lookup/vin-information/vin-information.spec.js
View file

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

33
src/layouts/vin-lookup/vin-information/vin-information.vue
View file

@ -1,11 +1,15 @@
<template> <template>
<div class="vin-information"> <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>
<div class="vin-info"> <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>
</div> </div>
</template> </template>
@ -13,6 +17,8 @@
<script> <script>
import textLink from "@/ux-components/text-link/text-link"; import textLink from "@/ux-components/text-link/text-link";
//Supporting files
import { settleAllPromises } from "@/helpers/layout-helper";
export default { export default {
name: "vinInformation", name: "vinInformation",
components: { components: {
@ -21,15 +27,23 @@ export default {
data() { data() {
return { return {
isActive: false, 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: { methods: {
toggleClass: function(event){ toggleClass: function(event){
this.isActive = !this.isActive; 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; transition: all 250ms ease-out;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
p {
margin-bottom: .5rem;
}
img { img {
max-width: 420px; max-width: 100%;
width: 117%; width: 117%;
height: auto; height: auto;
} }