Merge branch 'develop' into feature/CSR-297

src/common-components/vin-information/vin-information.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/common-components/vin-information/vin-information.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="vin-information">
+    <div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+      <textLink :text="HeadlineText" linkType="text" href="#!" />
+    </div>
+    <div class="vin-info">
+      <div class="mt-3" v-html="BodyText"></div>
+      <img :src="OptionalImage" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: "vinInformation",
+  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;
+    }
+  }
+}
+
+</script>
+
+<style lang="scss">
+.vin-information {
+  p,li {
+    font-size: .875rem;
+    color: $gray-600;
+  }
+  a {
+    font-size: .875rem;
+  }
+  .vin-toggle {
+    &:after {
+      content: "";
+      transition: all .5s ease;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right center;
+      margin-left: .5rem;
+      width: 16px;
+      height: auto;
+    }
+    &.active:after {
+      transform: rotate(180deg);
+    }
+    &.active + .vin-info {
+      max-height: 500px;
+      transition: all 250ms ease-in;
+      opacity: 1;
+    }
+  }
+  .vin-info {
+    max-height: 0;
+    transition: all 250ms ease-out;
+    overflow: hidden;
+    opacity: 0;
+    img {
+      width: 117%;
+      height: auto;
+    }
+  }
+}
+</style>

src/global-methods.js

@@ -5,7 +5,7 @@ import httpStatusCodes from "http-status-codes";
 export default {
   callHttpClient({ method, endpoint, payload }) {
     return new Promise((resolve, reject) => {
-      var apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
+      const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
       const payloadAndAnalyticsData = Object.assign({}, payload, {
         AppName: "FixMyGlass",
       });

src/layouts/component-test/component-test.vue

@@ -1,5 +1,15 @@
   <template>
     <div class="container-fluid container-shadow p-2 rounded-3">
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <vinInformation/>
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Text Input</h4>
@@ -1134,6 +1144,7 @@
   import textLink from "@/ux-components/text-link/text-link";
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+  import vinInformation from "@/common-components/vin-information/vin-information";
   export default {
     name: "App",
     components: {
@@ -1148,6 +1159,7 @@
       textLink,
       textboxQuestion,
       dropdownQuestion,
+      vinInformation,
     },
     data() {
       return {

src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js

@@ -18,9 +18,7 @@ describe("damage-location-question.vue", () => {
     //Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Backseat"] }]);
   });
-});
 
-describe("damage-location-question.vue", () => {
   test("Answers to display filtered by data from api.", async () => {
 
     //Arrange

src/layouts/vehicle-parts/vehicle-parts.spec.js

@@ -66,7 +66,7 @@ const basePartResponse = {
 }
 
 
-describe("vehicle-damage.vue", () => {
+describe("vehicle-parts.vue", () => {
 
     test("Page header is initialized with api data", async (done) => {
         //Arrange

src/router/index.js

@@ -57,17 +57,20 @@ const routes = [
         try {
           // If we already have our route, go to it.
           if (router.hasRoute(to.query.fmgPage)) {
+
             // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
-            const component = router
-              .getRoutes()
-              .filter((x) => x.name === to.query.fmgPage)[0].components;
+            let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components;
+
+            // If the component hasn't been loaded fully, load it before we check prerequisites.
+            if (component.default.methods === undefined) {
+              component = await component.default();
+            }
 
             if (!arePagePrerequisitesValid(component)) {
               await GoToFunnelStartOn404(next);
             }
 
-
-           return next({ name: to.query.fmgPage, query: to.query, params: to.params });
+            return next({ name: to.query.fmgPage, query: to.query, params: to.params });
           }
 
           // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
@@ -82,10 +85,7 @@ const routes = [
 
           // Call the next components arePagePrerequisitesValid method before load.
           // If it returns false, use the 404 logic.
-          const nextComponent = await router
-            .getRoutes()
-            .filter((x) => x.name === routeData[0].name)[0]
-            .components.default();
+          const nextComponent = await router.getRoutes().filter((x) => x.name === routeData[0].name)[0].components.default();
 
           if (!arePagePrerequisitesValid(nextComponent)) {
             await GoToFunnelStartOn404(next);

src/ux-components/radio/radio.spec.js

@@ -60,4 +60,42 @@ describe("radio.vue", () => {
 
     expect(paragraph.text()).toEqual("screenreader text");
   });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "Windshield",
+        value: "List Card Checkbox",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+      },
+    });
+    wrapper.vm.handleCheckChange();
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: Boolean}]);
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        modelValue: ["List Card Checkbox"],
+        value: "Car-Front",
+        selectedValues: ["Car-Front"]
+      },
+    });
+    // Assert
+    expect(wrapper.componentVM.checkValue).toEqual(true);
+  });
 });

src/ux-components/radio/radio.vue

@@ -10,7 +10,8 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged()"
+    @change="handleCheckChange()"
+    :checked="checkValue"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -36,6 +37,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data() {
@@ -44,15 +46,15 @@ export default {
     };
   },
   created() {
-    if (this.selectedButtonIDs) {
-      this.checkValue = this.selectedButtonIDs[0];
+    if (this.selectedValues) {
+      this.checkValue = this.selectedValues[0] === this.value;
     }
   },
   methods: {
     handleClick(value) {
       this.handleChange(value);
     },
-    handleCheckChanged(newValue, oldValue) {
+    handleCheckChange(newValue, oldValue) {
       const isInitialization = typeof oldValue === "function";
       if (!isInitialization) {
 
@@ -68,19 +70,19 @@ export default {
     },
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
-    const { checked, handleChange, errorMessage } = useField(
-      groupName,
-      undefined,
-      {
-        type: "radio",
-        checkedValue: value,
-      }
-    );
+    const inputType = "radio";
+    const {
+        value: inputValue,
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules,
+    {
+      type: inputType,
+      checkedValue: props.value,
+    });
     return {
-      checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };