Updates to remove vin-lookup from PR.

jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
     "!src/layouts/reveal/**/*.vue",
     "!src/ux-components/text-link/**/*.vue",
     "!src/common-components/question-chain/**/*.vue",
+    "!src/layouts/quote/**/*.vue",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

src/common-components/button-question/button-question.vue

@@ -25,6 +25,7 @@
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
               :isWide=isWide
+              :isCashOrInsurance=isCashOrInsurance
               :isRequired=isRequired
               :buttonImage="answer.AnswerImageUrl"
               :buttonImageId="answer.ImageId"
@@ -34,10 +35,10 @@
               :selectedValues="selectedValues"
               data-test="button"
               :validationRules="validationRules"
-              :class="[suppressError ? 'alertError' : '']"
+              :class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
               :clearOnUnmount="clearOnUnmount"
             />
-            <!-- For nested questions --> 
+            <!-- For nested questions -->
             <transition name="fade" mode="out-in">
               <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
                 <slot></slot>
@@ -87,6 +88,7 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
+    isCashOrInsurance: Boolean,
     modelValue: [Array, String],
     validationRules: String,
     suppressError: Boolean,

src/layouts/quote/quote.vue

@@ -1,10 +1,120 @@
+
+<template>
+    <Form
+      @submit="onSubmit"
+      @invalid-submit="onInvalidSubmit"
+      ref="theForm"
+      v-slot="{ meta }"
+    >
+      <div class="page-container-grouped-styles">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
+        <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+        <div class="fade-on-route-transition sub-container make-tall">
+          <buttonQuestion
+            :answers="years"
+            text-position="text-start"
+            questionText="List Button as Radio"
+            groupName="years"
+            />
+          <buttonQuestion
+            questionText="CASH OR INSURANCE"
+            :answers="answersFromCms"
+            groupName="cash-or-insurance"
+            buttonType="listButtonHorizontal"
+            useTextForValue
+            isCashOrInsurance
+            isRequired
+            />
+            <radio/>
+          <funnel-footer
+            cmsWidgetName="FunnelFooterWidget"
+            :isForwardActionDisabled="!meta.valid"
+            :isBackButtonHidden=shouldHideBackButton
+            @back-clicked="backButtonAction"
+            @ForwardClicked="forwardButtonAction"
+          />
+        </div>
+      </div>
+    </Form>
+</template>-->
+<!-- <buttonQuestion
+    :answers="years"
+    text-position="text-start"
+    questionText="List Button as Radio"
+    groupName="years"
+    />
+<buttonQuestion
+    questionText="CASH OR INSURANCE"
+    :answers="answersFromCms"
+    groupName="cash-or-insurance"
+    buttonType="listButtonHorizontal"
+    useTextForValue
+
+    isRequired
+    /> -->
+
 <script>
+// Components
+import buttonQuestion from "@/common-components/button-question/button-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
+import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
+
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
+
 export default {
     name: "quote",
+    async beforeRouteEnter(to, from, next) {
+      // Call APIs
+      const cmsContent = await fetchCmsContentForPage(to.query.fmgPage);
+
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.setCmsContent(cmsContent);
+      });
+    },
     methods: {
         arePagePrerequisitesValid() {
             return true;
         }
-    }
+    },
-}
+    computed: {
-</script>
+        years() {
+            return ["2011", "2012"];
+        },
+        answersFromCms() {
+            return ["Pay on my own", "Pay with insurance"];
+        },
+        selectedChipCountValues: {
+        get: function() {
+            return this.modelValue;
+        },
+        set: function(newValue) {
+            this.$emit("update:modelValue", newValue);
+        }
+    },
+      },
+    components: {
+      funnelHeader,
+      funnelFooter,
+      vehicleBanner,
+      funnelSubHeader,
+      Form,
+      buttonQuestion
+    },
+
+};
+</script>

src/router/index.js

@@ -19,7 +19,15 @@ import eventBus from "@/helpers/event-bus/event-bus";
 import store from "@/store";
 import analyticsMixin from "@/mixins/analytics-mixin";
 
+// Components
+import quote from "@/layouts/quote/quote.vue";
+
 const routes = [
+  {
+    path: "/quote", // This is a temporary route for testing.
+    name: "quote",
+    component: quote,
+  },
   {
     path: "/",
     name: "root",

src/router/router-constants/fmgPage-values.js

@@ -1,4 +1,5 @@
 const fmgPageValues = {
+  QUOTE: "quote",
   VEHICLE_YEAR: "vehicle-year",
   VEHICLE_MAKE: "vehicle-make",
   VEHICLE_MODEL: "vehicle-model",

src/router/router-constants/routing-table.js

@@ -114,12 +114,13 @@ const routingTable = [
       },
       {
         scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
+        //destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
+        destinationFmgPageValue: fmgPageValues.QUOTE,
       },
       {
         scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
         destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
-      }
+      },
     ],
   },
   {
@@ -178,7 +179,7 @@ const routingTable = [
       {
         scenario: navigationScenarios.CLICKED_FORWARD,
         destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      },   
+      },
       {
         scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
         destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
@@ -186,7 +187,7 @@ const routingTable = [
       {
         scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
         destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
-      }      
+      }
     ],
   },
   {

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -1,54 +1,54 @@
 <template>
   <div
-    class="list-group list-button-horizontal d-flex flex-column w-100"
+  class="list-group list-button-horizontal d-flex flex-column w-100"
-    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
+  :class="[(errors.length > 0 || hasError) ? 'has-error' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
-    @keyup.space="triggerButton()"
+  @keyup.space="triggerButton()"
-    @keyup.up="handleKeyupArrow()"
+  @keyup.up="handleKeyupArrow()"
-    @keyup.down="handleKeyupArrow()"
+  @keyup.down="handleKeyupArrow()"
-    @keyup.left="handleKeyupArrow()"
+  @keyup.left="handleKeyupArrow()"
-    @keyup.right="handleKeyupArrow()"
+  @keyup.right="handleKeyupArrow()"
   >
-    <input
+  <input
-      :type="isMultiSelect ? 'checkbox' : 'radio'"
+  :type="isMultiSelect ? 'checkbox' : 'radio'"
-      :id="buttonID"
+  :id="buttonID"
-      :name="groupName"
+  :name="groupName"
-      :value="value"
+  :value="value"
-      :aria-required="isRequired"
+  :aria-required="isRequired"
-      v-model="checkValue"
+  v-model="checkValue"
-      @change="handleInputChange()"
+  @change="handleInputChange()"
-    />
+  />
-    <label
+  <label
-      tabindex="-1"
+  tabindex="-1"
-      :for="buttonID"
+  :for="buttonID"
-      :aria-labelledby="buttonID"
+  :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
+  class="d-flex flex-column justify-content-center p-3"
-      @mouseup="triggerButton()"
+  @mouseup="triggerButton()"
-    >
+  >
-      <span
+  <span
-        class="m-0"
+  class="m-0"
-        :class="textPosition"
+  :class="textPosition"
-      >
+  >
-        {{buttonLabel}}
+  {{buttonLabel}}
-      </span>
+</span>
-      <span
+<span
-        v-if="buttonLabelSubCopy"
+v-if="buttonLabelSubCopy"
-        class="m-0 small"
+class="m-0 small"
-        :class="textPosition"
+:class="textPosition"
-      >
+>
-        {{ buttonLabelSubCopy }}
+{{ buttonLabelSubCopy }}
-      </span>
+</span>
-      <span 
+<span
-        v-if="screenReaderOnlyText" 
+v-if="screenReaderOnlyText"
-        class="sr-only"
+class="sr-only"
-      >
+>
-        {{ screenReaderOnlyText }}
+{{ screenReaderOnlyText }}
-      </span>
+</span>
-      <loader
+<loader
-        v-if="isLoaderDisplayed && selectingInitiatesLoad"
+v-if="isLoaderDisplayed && selectingInitiatesLoad"
-        :class="[loaderColor, loaderPosition]"
+:class="[loaderColor, loaderPosition]"
-      />
+/>
-    </label>
+</label>
-  </div>
+</div>
 </template>
 
 <script>
@@ -70,6 +70,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     isRequired: Boolean,
+    isCashOrInsurance: Boolean,
     value: {
       // Field initial value
       type: String,
@@ -92,8 +93,8 @@ export default {
   created() {
     if (Array.isArray(this.selectedValues)) {
       this.checkValue = this.isMultiSelect
-        ? this.selectedValues.includes(this.value)
+      ? this.selectedValues.includes(this.value)
-        : this.selectedValues[0];
+      : this.selectedValues[0];
     }
   },
   unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
@@ -107,9 +108,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleInputChange() {
-        if(!this.selectingInitiatesLoad) {
+      if(!this.selectingInitiatesLoad) {
-          this.handleCheckChange();
+        this.handleCheckChange();
-        }
+      }
     },
     handleKeyupArrow() {
       if (this.isMultiSelect) {
@@ -123,9 +124,9 @@ export default {
     triggerButton() {
       if(this.selectingInitiatesLoad) {
         this.displayLoader();
-          this.handleCheckChange();
+        this.handleCheckChange();
       }
-      
+
       this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
@@ -224,7 +225,54 @@ export default {
     span {
       font-size: .875rem;
     }
-  }  
+  }
+
+  // Cash/Insurance option radio button styling
+  &.radio-fancy {
+    label {
+      border: 1px solid $blue-700;
+      z-index: 2;
+      color: $blue;
+      span {
+        font-size: 1rem;
+        font-weight: 500;
+      }
+    }
+    label:hover {
+      background-color: $blue-700;
+      color: $white;
+      box-shadow: none;
+    }
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      height: 0;
+      opacity: 0;
+      width: 0;
+
+      &:focus-visible + label {
+        border-radius: 0.5rem;
+        z-index: 2;
+      }
+      &:focus + label {
+        z-index: 3;
+      }
+      &:checked + label {
+        outline: none;
+        box-shadow: none;
+        color: $white;
+        background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
+        border-radius: 0.5rem;
+        z-index: 5;
+      }
+      &:checked:focus + label {
+        box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+      }
+      &:checked + label p:first-child {
+        font-weight: 500;
+      }
+    }
+  }
 }
 
 .col {
@@ -233,7 +281,6 @@ export default {
       label {
         border-bottom-left-radius: 0.5rem;
         border-top-left-radius: 0.5rem;
-        z-index: 2;
       }
     }
   }
@@ -246,5 +293,44 @@ export default {
       }
     }
   }
+
+  //Cash/insurance styling
+  &:first-of-type {
+    .list-button-horizontal.radio-fancy {
+      input[type="radio"] {
+        &:checked + label {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+          // border-bottom-right-radius: 0;
+          // border-top-right-radius: 0;
+          //z-index: 2;
+        }
+        &:checked:focus + label {
+          border-bottom-right-radius: 0.5rem;
+          border-top-right-radius: 0.5rem;
+          //z-index: 2;
+        }
+      }
+    }
+  }
+
+  &:last-of-type {
+    .list-button-horizontal.radio-fancy {
+      input[type="radio"] {
+        &:checked + label {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          // border-bottom-right-radius: 0;
+          // border-top-right-radius: 0;
+          //z-index: 2;
+        }
+        &:checked:focus + label {
+          border-bottom-left-radius: 0.5rem;
+          border-top-left-radius: 0.5rem;
+          //z-index: 2;
+        }
+      }
+    }
+  }
 }
 </style>