Merge pull request #704 from Safelite/rlsmerge/quote-page-mvp-to-develop

Rlsmerge/quote page mvp to develop

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
   preset: "@vue/cli-plugin-unit-jest",
   transform: { "^.+\\.vue$": "vue-jest" },
   moduleFileExtensions: ["js", "vue"],
+  modulePathIgnorePatterns: ["vin-lookup"],
   collectCoverageFrom: [
     "src/**/*.{js,vue}",
     "!src/main.js",
@@ -18,6 +19,8 @@ module.exports = {
     "!src/layouts/reveal/**/*.vue",
     "!src/ux-components/text-link/**/*.vue",
     "!src/common-components/question-chain/**/*.vue",
+    "!src/layouts/quote/**/*.vue", // Temporary
+    "!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

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

@@ -26,6 +26,7 @@
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
               :isWide=isWide
+              :isCashOrInsurance=isCashOrInsurance
               :isRequired=isRequired
               :buttonImage="answer.AnswerImageUrl"
               :buttonImageId="answer.ImageId"
@@ -35,7 +36,7 @@
               :selectedValues="selectedValues"
               data-test="button"
               :validationRules="validationRules"
-              :class="[suppressError ? 'alertError' : '']"
+              :class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
               :valueToLogType="valueToLogType"
             />
             <!-- For nested questions -->
@@ -88,6 +89,7 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
+    isCashOrInsurance: Boolean,
     modelValue: [Array, String],
     validationRules: String,
     suppressError: Boolean,

src/common-components/funnel-header/menu-modal/menu-modal.vue

@@ -7,7 +7,7 @@
     </button>
   </div>
   <!-- Modal -->
-  <div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
+  <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
     <div class="menu-modal-container">
       <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
         <div class="bar1"></div>
@@ -62,7 +62,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .menu-modal-container {
   position: absolute;
   padding: 1.47rem 1rem 1.47rem 1.47rem;
@@ -81,7 +81,7 @@ export default {
       justify-content: center;
       align-items: center;
       padding: 0;//Required to prevent 'squish' on iPhone
-      z-index: 1056;
+      z-index: 1050;
       .bar1,
       .bar2,
       .bar3 {
@@ -102,66 +102,68 @@ export default {
   }
 }
 .modal {
-  max-width: 576px;
-  left: auto;
-  height: calc(100% - 72px);
-  top: 72px;
-  border-top: 1px solid $gray-300;
-  overflow-x: visible;
-  overflow-y: visible;
-  .modal-body {
-    padding: 2rem;
-  }
-    .modal-fullscreen {
-      width: 100vw;
-      max-width: 576px;
-  }
-  .navigation-link {
-    margin-bottom: 1.5rem;
-  }
-  .modal-footer {
-    border-top: none;
-    padding: 2rem;
-  }
-  .menu-modal-container {
-    position: absolute;
-    padding: 1.47rem 1rem 1.47rem 1.47rem;
-    right: 0;
-    top: -4.5rem;
-    button {
-      border: none;
-      &.menu-button {
-        width: 1.5rem;
-        height: 1.5rem;
-        border-radius: 50%;
-        box-shadow: none;
-        background-color: $white;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 0;//Required to prevent 'squish' on iPhone
-        z-index: 1056;
-        .bar1,
-        .bar2,
-        .bar3 {
-          width: 14px;
-          height: 2px;
-          background-color: $blue;
-          margin: 1px 0;
-          transition: 0.25s;
-        }
-        &.active .bar1 {
-          transform: rotate(-45deg) translate(-3px, 3px);
-        }
-        &.active .bar2 {opacity: 0;}
-        &.active .bar3 {
-          transform: rotate(45deg) translate(-3px, -3px);
+  &.menu-modal {
+    max-width: 576px;
+    left: auto;
+    height: calc(100% - 72px);
+    top: 72px;
+    border-top: 1px solid $gray-300;
+    overflow-x: visible;
+    overflow-y: visible;
+    .modal-body {
+      padding: 2rem;
+    }
+      .modal-fullscreen {
+        width: 100vw;
+        max-width: 576px;
+    }
+    .navigation-link {
+      margin-bottom: 1.5rem;
+    }
+    .modal-footer {
+      border-top: none;
+      padding: 2rem;
+    }
+    .menu-modal-container {
+      position: absolute;
+      padding: 1.47rem 1rem 1.47rem 1.47rem;
+      right: 0;
+      top: -4.5rem;
+      button {
+        border: none;
+        &.menu-button {
+          width: 1.5rem;
+          height: 1.5rem;
+          border-radius: 50%;
+          box-shadow: none;
+          background-color: $white;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 0;//Required to prevent 'squish' on iPhone
+          z-index: 1056;
+          .bar1,
+          .bar2,
+          .bar3 {
+            width: 14px;
+            height: 2px;
+            background-color: $blue;
+            margin: 1px 0;
+            transition: 0.25s;
+          }
+          &.active .bar1 {
+            transform: rotate(-45deg) translate(-3px, 3px);
+          }
+          &.active .bar2 {opacity: 0;}
+          &.active .bar3 {
+            transform: rotate(45deg) translate(-3px, -3px);
+          }
         }
       }
     }
+    //.modal-backdrop styles are in common-styles.scss
   }
-  //.modal-backdrop styles are in common-styles.scss
 }
 </style>

src/common-components/modal/modal.vue

@@ -0,0 +1,75 @@
+<template>
+  <!-- Modal -->
+  <div class="modal fade quote-modal" id="quoteModal" tabindex="-1" aria-labelledby="quoteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body px-4 py-5">
+          <img :src="this.ModalImage" class="w-100 mb-4" alt="" />
+          <h5 class="mb-4">{{this.ModalHeadline}}</h5>
+          <p class="fw-bold mb-2">{{this.ModalSubheadertext}}</p>
+          <p class="mb-0" v-html="this.ModalBodyText"></p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary w-100" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: 'modal',
+  props: {
+    headlineText: String,
+    cmsWidgetName: String,
+  },
+  data() {
+    return {
+      isActive: false,
+    };
+  },
+  computed: {
+      ModalHeadline(){
+        return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+      },
+      ModalSubheadertext(){
+        return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+      },
+      ModalBodyText(){
+        return this.getCmsContent(this.cmsWidgetName, "BodyText");
+      },
+      ModalImage(){
+        return this.getCmsContent(this.cmsWidgetName, "Image");
+      },
+  },
+}
+</script>
+
+<style lang="scss">
+.modal {
+  &.quote-modal {
+    .modal-dialog {
+      .modal-content {
+        max-width: 327px;
+        margin: 0 auto;
+        box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
+        .modal-body {
+          ul {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+    .modal-footer {
+      border-top: none;
+    }
+  }
+}
+.modal-backdrop {
+  &.show {
+    opacity: .4;
+  }
+}
+</style>

src/common-components/text-block/text-block.spec.js

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

src/common-components/text-block/text-block.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="text-block d-flex w-100 mt-4" :class="[justifyText, typeStyle, fontWeight]" v-html="this.TextBlockCopy"></div>
+</template>
+
+<script>
+export default {
+  name: 'textBlock',
+  props: {
+    justifyText: String,// left, right, center
+    typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
+    fontWeight: String,// bold=500, default is 400
+    cmsWidgetName: String,
+  },
+  computed: {
+      TextBlockCopy(){
+        return this.getCmsContent(this.cmsWidgetName, "Text");
+      },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .text-block {
+    &.left {
+      justify-content: flex-start;
+    }
+    &.right {
+      justify-content: flex-end;
+    }
+    &.center {
+      justify-content: center;
+    }
+    &.bold {
+      font-weight: 500;
+    }
+  }
+</style>

src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="cash-or-insurance-question">
+        <buttonQuestion
+            :answers="answersFromCms"
+            :groupName="groupName"
+            buttonType="listButtonHorizontal"
+            v-model="selectedValues"
+            isCashOrInsurance
+            isRequired
+            />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default ({
+    name: "cashOrInsuranceQuestion",
+    props: {               
+        modelValue: String,
+        groupName: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        answersFromCms(){
+            return this.getCmsContent(this.cmsWidgetName, 'Answers');
+        },
+        selectedValues: {
+            get: function() {
+                // Convert to CMS answer name from bool
+                var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
+                return cmsAnswerValue;
+            },
+            set: function(newValue) {
+                // Convert back to bool for parent component
+                this.$emit("update:modelValue", newValue === "InsuranceAnswer");
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+})
+</script>

src/layouts/quote/quote.vue

@@ -1,10 +1,95 @@
+
+<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">
+      <radioServicePackage/>
+      <textBlock
+      cmsWidgetName="footerTest"
+      justifyText="left"
+      typeStyle="small"
+      fontWeight=""
+      />
+      <funnel-footer
+      cmsWidgetName="FunnelFooterWidget"
+      :isForwardActionDisabled="!meta.valid"
+      :isBackButtonHidden=shouldHideBackButton
+      @back-clicked="backButtonAction"
+      @ForwardClicked="forwardButtonAction"
+      />
+    </div>
+    <modal
+    cmsWidgetName="EstimateRainDefenseModal"
+    />
+  </div>
+</Form>
+</template>
+
 <script>
+// Components
+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 radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
+import modal from "@/common-components/modal/modal.vue";
+import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
+import textBlock from "@/common-components/text-block/text-block";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { Form } from "vee-validate";
+
+
 export default {
-    name: "quote",
-    methods: {
-        arePagePrerequisitesValid() {
-            return true;
-        }
+  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;
     }
-}
-</script>
+  },
+  computed: {
+    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,
+    radioServicePackage,
+    modal,
+    textBlock,
+  },
+
+};
+</script>

src/layouts/vin-lookup/vin-lookup.vue

@@ -335,7 +335,6 @@ export default {
       } else {
           await this.navigateForwardWithSingleCarMatch();
       }
-
     },
   },
   mounted() {

src/router/index.js

@@ -21,7 +21,15 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
 
+// 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",
@@ -224,7 +232,7 @@ function navigateToUrl(url, optionalQuery = {}) {
   for (const queryKey in optionalQuery) {
     externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
   }
-  
+
   window.location.assign(externalUrl);
 }
 

src/styles/common-typography-styles.scss

@@ -1,6 +1,7 @@
 //Typography
-p {
-  font-size: 16px;
+p,
+body {
+  font-size: 1rem;
   line-height: 1.625;
   font-weight: 400;
 }
@@ -33,12 +34,21 @@ h6,.h6 {
   text-transform: uppercase;
 }
 
-label {
+.small {
+  font-size: .875rem;
+  line-height: 1.7;
+  font-weight: 400;
+}
+
+label,
+.label {
+  font-size: 1rem;
   line-height: 1.5;
   font-weight: 400;
 }
 
-caption {
+caption,
+.caption {
   font-size: .75rem;
   line-height: 1.7;
   font-weight: 400;

src/ux-components/button-main/button-main.vue

@@ -110,6 +110,7 @@ export default {
     color: $blue;
     font-weight: 500;
     transition: all 150ms linear;
+    height: 3rem;
     &:hover {
       color: $white;
       @include blue-gradient;

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -194,7 +194,7 @@ describe("list-button-horizontal.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: undefined}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -215,7 +215,7 @@ describe("list-button-horizontal.vue", () => {
       },
     });
     // Assert
-    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
+    expect(wrapper.componentVM.checkValue).toEqual(["Car-Front"]);
   });
 
   it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {

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

@@ -1,53 +1,22 @@
 <template>
-  <div
-    class="list-group list-button-horizontal d-flex flex-column w-100"
-    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
-    @keyup.space="triggerButton()"
-    @keyup.up="handleKeyupArrow()"
-    @keyup.down="handleKeyupArrow()"
-    @keyup.left="handleKeyupArrow()"
-    @keyup.right="handleKeyupArrow()"
-  >
-    <input
-      :type="isMultiSelect ? 'checkbox' : 'radio'"
-      :id="buttonID"
-      :name="groupName"
-      :value="value"
-      :aria-required="isRequired"
-      v-model="checkValue"
-      :checked="checkValue"
-      @change="handleInputChange()"
-    />
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-label="buttonLabel"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-      @mouseup="triggerButton()"
-    >
-      <span
-        class="m-0"
-        :class="textPosition"
-      >
-        {{buttonLabel}}
+  <div class="list-group list-button-horizontal d-flex flex-column w-100"
+    :class="[(errors.length > 0 || hasError) ? 'has-error' : '', isCashOrInsurance ? 'radio-fancy' : '']"
+    @keyup.space="triggerButton()" @keyup.up="handleKeyupArrow()" @keyup.down="handleKeyupArrow()"
+    @keyup.left="handleKeyupArrow()" @keyup.right="handleKeyupArrow()">
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="value"
+      :aria-required="isRequired" v-model="checkValue" @change="handleInputChange()" />
+    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID"
+      class="d-flex flex-column justify-content-center p-3" @mouseup="triggerButton()">
+      <span class="m-0" :class="textPosition">
+        {{  buttonLabel  }}
       </span>
-      <span
-        v-if="buttonLabelSubCopy"
-        class="m-0 small"
-        :class="textPosition"
-      >
-        {{ buttonLabelSubCopy }}
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
+        {{  buttonLabelSubCopy  }}
       </span>
-      <span 
-        v-if="screenReaderOnlyText" 
-        class="sr-only"
-      >
-        {{ screenReaderOnlyText }}
+      <span v-if="screenReaderOnlyText" class="sr-only">
+        {{  screenReaderOnlyText  }}
       </span>
-      <loader
-        v-if="isLoaderDisplayed && selectingInitiatesLoad"
-        :class="[loaderColor, loaderPosition]"
-      />
+      <loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
     </label>
   </div>
 </template>
@@ -55,6 +24,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
 
 export default {
@@ -71,6 +41,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     isRequired: Boolean,
+    isCashOrInsurance: Boolean,
     value: {
       // Field initial value
       type: String,
@@ -87,37 +58,48 @@ export default {
       checkValue: Boolean,
     };
   },
-  created() {
-    if (Array.isArray(this.selectedValues)) {
-      this.checkValue = this.isMultiSelect
-        ? this.selectedValues.includes(this.value)
-        : this.selectedValues[0];
+  mounted() {
+    if (Array.isArray(this.validateValue)) {
+      this.checkValue = this.isValueSelectedByArray(this.selectedValues);
+      const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
+      
+      if (this.checkValue != isSelectedByValidator) {
+        this.handleChange(this.value);
+      }
+    }
+    else {
+      this.checkValue = this.selectedValues;
     }
   },
   methods: {
+    isValueSelectedByArray(arr) {
+      return this.isMultiSelect
+        ? arr.includes(this.value)
+        : arr[0];
+    },
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
     handleInputChange() {
-        if(!this.selectingInitiatesLoad) {
-          this.handleCheckChange();
-        }
+      if (!this.selectingInitiatesLoad) {
+        this.handleCheckChange();
+      }
     },
     handleKeyupArrow() {
       if (this.isMultiSelect) {
         return; // Prevent arrow keys from doing anything if element is a checkbox
       }
 
-      if(!this.selectingInitiatesLoad) {
+      if (!this.selectingInitiatesLoad) {
         this.handleCheckChange();
       }
     },
     triggerButton() {
-      if(this.selectingInitiatesLoad) {
+      if (this.selectingInitiatesLoad) {
         this.displayLoader();
-          this.handleCheckChange();
+        this.handleCheckChange();
       }
-      
+
       this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
@@ -153,11 +135,14 @@ export default {
     const {
       handleChange,
       errors,
-    } = useField(props.groupName, props.validationRules, fieldOptions);
+      value
+    } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions); 
 
+    const validateValue = value;
     return {
       handleChange,
       errors,
+      validateValue,
       fieldOptions, // only need to expose this for unit test purposes
     };
   },
@@ -166,6 +151,7 @@ export default {
 
 <style lang="scss">
 .list-button-horizontal {
+
   input[type="radio"],
   input[type="checkbox"] {
     position: absolute;
@@ -173,27 +159,32 @@ export default {
     opacity: 0;
     width: 0;
 
-    &:focus-visible + label {
+    &:focus-visible+label {
       box-shadow: 0 0 0 2.5px $blue;
       z-index: 2;
     }
-    &:focus + label {
+
+    &:focus+label {
       box-shadow: 0 0 0 2.5px $blue;
       z-index: 3;
     }
-    &:checked + label {
+
+    &:checked+label {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
       outline: none;
       z-index: 2;
     }
-    &:checked:focus + label {
+
+    &:checked:focus+label {
       box-shadow: 0 0 0 2.5px $blue;
     }
-    &:checked + label p:first-child {
+
+    &:checked+label p:first-child {
       font-weight: 500;
     }
   }
+
   label {
     outline: none;
     position: relative;
@@ -203,6 +194,7 @@ export default {
     border-radius: 0;
     width: 100%;
     color: $gray-600;
+
     &:hover {
       @include media-breakpoint-up(sm) {
         box-shadow: 0 0 0 4px $blue-300;
@@ -210,13 +202,69 @@ export default {
         z-index: 4 !important;
       }
     }
-    + p {
+
+    +p {
       display: none;
     }
+
     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 {
@@ -225,7 +273,6 @@ export default {
       label {
         border-bottom-left-radius: 0.5rem;
         border-top-left-radius: 0.5rem;
-        z-index: 2;
       }
     }
   }
@@ -238,5 +285,38 @@ 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;
+        }
+
+        &:checked:focus+label {
+          border-bottom-right-radius: 0.5rem;
+          border-top-right-radius: 0.5rem;
+        }
+      }
+    }
+  }
+
+  &:last-of-type {
+    .list-button-horizontal.radio-fancy {
+      input[type="radio"] {
+        &:checked+label {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
+
+        &:checked:focus+label {
+          border-bottom-left-radius: 0.5rem;
+          border-top-left-radius: 0.5rem;
+        }
+      }
+    }
+  }
 }
 </style>

src/ux-components/radio-service-package/radio-service-package.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="package-main">
+    <textLink class="justify-content-end w-100" linkType="text" text="Compare packages" href="#!" :class="[isActive ? 'active' : '', hasArrow ? 'arrow' : '']" @click="toggleClass()" />
+    <div class="package-wrapper">
+      <input type="radio" name="test-radio" id="testradio">
+      <label for="testradio">
+        <div class="package-specs">
+          <p class="m-0">Economy service <span>As little as $0.00</span></p>
+          <ul>
+            <li>New replacement windshield</li>
+            <li>Expert installation</li>
+            <li>Nationwide lifetime warranty</li>
+          </ul>
+        </div>
+      </label>
+    </div>
+    <div class="package-wrapper">
+      <input type="radio" name="test-radio" id="testradio-2">
+      <label for="testradio-2">
+        <div class="package-specs">
+          <p class="mb-2">Standard service <span>As little as 59.97</span></p>
+          <p class="sub-label m-0">most popular</p>
+          <ul>
+            <li>New replacement windshield</li>
+            <li>Expert installation and <textLink linkType="dashedUnderline" text="recalibration" href="#!" data-bs-toggle="modal" data-bs-target="#quoteModal" aria-label="Modal window" /></li>
+            <li>Nationwide lifetime warranty</li>
+            <li>New wiper blades</li>
+          </ul>
+        </div>
+      </label>
+    </div>
+    <div class="package-wrapper">
+      <input type="radio" name="test-radio" id="testradio-3">
+      <label for="testradio-3">
+        <div class="package-specs">
+          <p class="mb-2">Premium service <span>As little as $94.97</span></p>
+          <ul>
+            <li>New replacement windshield</li>
+            <li>Expert installation</li>
+            <li>Nationwide lifetime warranty</li>
+            <li>New wiper blades</li>
+            <li>Rain Defense</li>
+          </ul>
+        </div>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: "radioServicePackage",
+  data() {
+    return {
+      isActive: false,
+      hasArrow: true,
+    };
+  },
+  methods: {
+    toggleClass: function(event){
+      this.isActive = !this.isActive;
+    }
+  },
+  components: {
+    textLink
+  }
+}
+</script>
+
+<style lang="scss">
+.package-main {
+  .package-wrapper {
+    margin: 0.5rem 0;
+    input[type="radio"] {
+      opacity: 0;
+      position: absolute;
+      left: -9999px;
+
+      + label {
+        display: flex;
+        align-items: flex-start;
+        position: relative;
+        cursor: pointer;
+        width: 100%;
+        padding: 1rem;
+        border: 1px solid $gray-300;
+        box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
+        border-radius: .5rem;
+        overflow: hidden;
+        min-height: 58px;
+
+        &:before {
+          content: "";
+          position: relative;
+          top: 5px;
+          margin-right: 1rem;
+          border-radius: 50%;
+          border: 1px solid $gray-500;
+          width: 16px;
+          height: 16px;
+          min-width: 16px;
+        }
+
+        &:after {
+          content: "";
+          position: absolute;
+          left: 19px;
+          top: 24px;
+          border-radius: 50%;
+          width: 10px;
+          height: 10px;
+          min-width: 10px;
+        }
+      }
+
+      &:hover {
+        + label {
+          &:before {
+            border: 1px solid #8E9292;
+            box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+
+      &:checked {
+        + label {
+          .package-specs {
+            max-height: 1000px;
+          }
+        }
+        + label {
+          background-color: $blue-100;
+          border: 1px solid $blue;
+          max-height: 500px;
+        }
+        + label {
+          &:before {
+            box-shadow: 0px 0px 0px 1px $blue;
+          }
+        }
+        + label {
+          &:after {
+            background: $blue;
+          }
+        }
+      }
+
+      &:focus {
+        + label {
+          &:before {
+            border: 2px solid $blue;
+          }
+        }
+      }
+    }
+
+    .package-specs {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-height: 0;
+      transition: all .75s ease;
+
+      p {
+        font-weight: 500;
+        display: flex;
+        justify-content: space-between;
+        span {
+          color: $green;
+        }
+        &.sub-label {
+          color: $green;
+          text-transform: uppercase;
+        }
+      }
+      ul {
+        margin: 1rem 0 0 -15px;
+        padding: 0;
+        li {
+          margin-bottom: .5rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/ux-components/text-link/text-link.vue

@@ -2,6 +2,7 @@
   <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
   <a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
   <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'dashedUnderline'" @click="handleClick" class="dashed-underline" :href="href">{{text}}</a>
   <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
 </template>
 
@@ -58,5 +59,35 @@ a {
       text-decoration: underline;
     }
   }
+  &.dashed-underline {
+    text-decoration: underline dashed 1px;
+  }
+  &.arrow {
+    &: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 {
+      ~ .package-wrapper {
+          .package-specs {
+            max-height: 1000px !important;
+          }
+      }
+      &.active:after {
+        transform: rotate(180deg);
+      }
+      &.active + .vin-info {
+        max-height: 500px;
+        transition: all 250ms ease-in;
+        opacity: 1;
+      }
+    }
+  }
 }
 </style>