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

Fix merge conflicts

Browse source
This commit is contained in:
Katie 2022-09-14 11:28:41 -04:00
commit 3c17de9f2c
27 changed files with 1005 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
jest.config.js
View file

@ -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",
@ -19,6 +20,8 @@ module.exports = {
"!src/layouts/quote/**/*.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
"!src/common-components/funnel-header/menu-modal/**/*.vue",
// END
], // ! means exclude from coverage.

4
src/common-components/button-question/button-question.vue
View file

@ -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,

122
src/common-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -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>

61
src/common-components/modal/modal.spec.js Normal file
View file

@ -0,0 +1,61 @@
import { shallowMount } from "@vue/test-utils";
import Modal from "./modal";
describe("modal.vue", () => {
it("Should display header text when HeaderText is defined in the CMS", async () => {
// Act
const wrapper = shallowMount(Modal, {
mixins: [mockMixin]
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent['HeaderText']));
});
it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
// Act
const wrapper = shallowMount(Modal, {
mixins: [mockMixin]
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent['SubheaderText']));
});
it("Should insert image url when Image is defined in the CMS", async () => {
// Act
const wrapper = shallowMount(Modal, {
mixins: [mockMixin]
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent['Image']));
});
it("Should display body text when BodyText is defined in the CMS", async () => {
// Act
const wrapper = shallowMount(Modal, {
mixins: [mockMixin]
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent['BodyText']));
});
it("Should display footer text when FooterText is defined in the CMS", async () => {
// Act
const wrapper = shallowMount(Modal, {
mixins: [mockMixin]
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent['FooterText']));
});
});
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
return mockCmsContent[cmsFieldName];
})
}
}
const mockCmsContent = {
'HeaderText': "Sample header text here.",
'SubheaderText': "Sample subheader text here.",
'Image': "https://www.sampleImage.sample",
'BodyText': "Sample body text here.",
'FooterText': "Sample footer text here.",
}

71
src/common-components/modal/modal.vue Normal file
View file

@ -0,0 +1,71 @@
<template>
<!-- Modal -->
<div class="modal fade modal-component" :id="this.cmsWidgetName" tabindex="-1" aria-labelledby="ModalComponentLabel" 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" v-html="this.ModalHeadline"></h5>
<p class="fw-bold mb-2" v-html="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" v-html="this.ModalCloseButtonText"></button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'modal',
props: {
cmsWidgetName: String,
},
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");
},
ModalCloseButtonText(){
return this.getCmsContent(this.cmsWidgetName, "FooterText");
}
},
}
</script>
<style lang="scss">
.modal {
&.modal-component {
.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>

1
src/common-components/text-block/text-block.spec.js Normal file
View file

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

38
src/common-components/text-block/text-block.vue Normal file
View file

@ -0,0 +1,38 @@
<template>
<div class="text-block d-flex w-100 mt-2" :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>

2
src/helpers/heritage-integration/navigation-helper.js
View file

@ -95,7 +95,7 @@ async function getLatestPageForRedirection() {
else if (partQuestionsComponent.methods.arePagePrerequisitesValid()) {
return fmgPageValues.PART_QUESTIONS;
}
else if (vinLookupComponent.methods.arePagePrerequisitesValid()) {
else if (vinLookupComponent.methods.arePagePrerequisitesValid() && !store.getters.damage.isRepair) {
return fmgPageValues.VIN_LOOKUP;
}
else {

2
src/layouts/address-lookup/address-lookup.vue
View file

@ -6,7 +6,7 @@
<vehicleBanner cmsWidgetName="VehicleBannerWidget" ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<div class="fade-on-route-transition sub-container make-tall">
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<alert ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"
class="mb-4"

14
src/layouts/address-lookup/customer-questions/customer-questions.vue
View file

@ -24,7 +24,7 @@
/>
</div>
</div>
<div class="row mb-5">
<div class="row mt-4">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
@ -35,7 +35,15 @@
validationRules="email-address-required|email-address-format"
/>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col">
<textBlock
cmsWidgetName="QuoteEmailTextBlockWidget"
typeStyle="caption"
/>
</div>
</div>
</template>
<script>
@ -45,6 +53,7 @@ import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import textBlock from '@/common-components/text-block/text-block';
// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@ -87,6 +96,7 @@ export default ({
components: {
addressQuestions,
textboxQuestion,
textBlock
}
})
</script>

41
src/layouts/estimate/estimate.spec.js
View file

@ -36,32 +36,6 @@ describe("estimate.vue", () => {
//Assesrt
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Provide my license plate # Most accurate VIN match"] }]);
});
test("isRepair is set to true, arePagePrerequisitesValid should return true", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
store.commit(storeMutations.UPDATE_IS_REPAIR, true);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test("isRepair is set to true, arePagePrerequisitesValid should return true", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
store.commit(storeMutations.UPDATE_IS_REPAIR, true);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test("After selecting provide my home address on ForwardButtonAction triggers a router.navigateWithSaving", async () => {
@ -213,6 +187,21 @@ describe("estimate.vue", () => {
expect(arePagePrerequisitesValid).toBe(true);
});
})
test("Changing zip should reset alert", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.displayNonServiceableZipAlert = "true";
wrapper.vm.serviceZipCode = "43015";
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.vm.displayNonServiceableZipAlert).toEqual(false);
});
});
function setupMocks({

155
src/layouts/estimate/estimate.vue
View file

@ -6,26 +6,86 @@
v-slot="{ meta }"
>
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<alert
class="vinLookupMethodHeading"
cmsWidgetName="AlertVinLookupQuestion"
alertClass=""
/>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
:answers="answersFromCms"
groupName="vinLookupMethodOption"
buttonType="listButton"
v-model="selectedVinLookupMethod"
isRequired
validationRules="option-required"
/>
<div v-if="!isRepair">
<alert
class="vinLookupMethodHeading"
cmsWidgetName="AlertVinLookupQuestion"
alertClass=""
/>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
:answers="answersFromCms"
groupName="vinLookupMethodOption"
buttonType="listButton"
v-model="selectedVinLookupMethod"
isRequired
validationRules="option-required"
/>
</div>
<div v-if="isRepair">
<alert
class="my-4"
cmsWidgetName="AlertQuoteReady"
alertClass="alert-info"
v-bind:isDismissible="false"
/>
<div class="row my-2">
<div class="col">
<textboxQuestion
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
inputId="serviceZipCode"
mask="#####"
isRequired
disableAutoFill
validationRules="zip-required|zip-format"
/>
</div>
</div>
<div class="row mt-2">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
inputId="emailAddress"
isRequired
disableAutoFill
validationRules="email-address-required|email-address-format"
/>
</div>
</div>
<div class="row mb-2">
<div class="col">
<textBlock
cmsWidgetName="QuoteEmailTextBlockWidget"
typeStyle="caption"
/>
</div>
</div>
<alert ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<alert
class="my-4"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
v-model="customAlertData"
v-if="displayNonServiceableZipAlert"
alertClass="alert-danger"
/>
</div>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@isDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ -37,6 +97,7 @@
</template>
<script>
// Components
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
@ -44,22 +105,37 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/common-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
import textBlock from "@/common-components/text-block/text-block";
//Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required } from "@/helpers/validation-rules";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { Form, defineRule } from "vee-validate";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
// Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "estimate",
data() {
return {
selectedVinLookupMethod: "",
serviceZipCode: this.getZipFromStore(),
emailAddress: this.getEmailFromStore(),
displayInvalidZipAlert: false,
displayNonServiceableZipAlert: false,
};
},
@ -79,6 +155,12 @@ export default {
});
},
methods: {
getZipFromStore(){
return store.getters.order.serviceLocation.zipCode;
},
getEmailFromStore(){
return store.getters.order.customer.emailAddress;
},
arePagePrerequisitesValid() {
return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
},
@ -90,6 +172,31 @@ export default {
);
},
async forwardButtonAction() {
if (this.isRepair){
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
//todo: validation
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
await this.dispatchStoreAction(storeActions.SAVE_SERVICE_LOCATION, {
zipCode: this.serviceZipCode,
state: zipCodeData.state,
}, false);
if (!zipCodeData.isZipValid) {
this.displayInvalidZipAlert = true;
return this.$refs.funnelFooter.removeLoader();
}
this.displayInvalidZipAlert = false;
if (!zipCodeData.isZipServiceable) {
this.displayNonServiceableZipAlert = true;
return this.$refs.funnelFooter.removeLoader();
}
this.displayNonServiceableZipAlert = false;
this.$refs.loadingModal.showModal();
navigateToHeritageFunnel();
}
if (this.selectedVinLookupMethod === vinLookupMethodSelections.MANUALVIN) {
await this.dispatchStoreAction(storeActions.CLEAR_VIN);
return this.$router.navigateWithSaving(
@ -112,13 +219,28 @@ export default {
},
},
computed: {
AlertNonServiceableZipHeader(){
console.log(this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText"));
return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.serviceZipCode);
},
AlertNonServiceableZipBody(){
return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
},
questionText() {
return this.getCmsContent("VinLookupMethod", "QuestionText");
},
answersFromCms() {
return this.getCmsContent("VinLookupMethod", "Answers");
},
isRepair() {
return store.getters.damage.isRepair;
},
},
watch: {
serviceZipCode() {
this.displayNonServiceableZipAlert = false;
},
},
components: {
funnelHeader,
vehicleBanner,
@ -127,6 +249,9 @@ export default {
buttonQuestion,
Form,
alert,
textboxQuestion,
loadingModal,
textBlock
},
};
</script>

14
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -36,7 +36,7 @@
/>
</div>
</div>
<div class="row my-2">
<div class="row mt-2">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
@ -46,6 +46,14 @@
/>
</div>
</div>
<div class="row mb-2">
<div class="col">
<textBlock
cmsWidgetName="QuoteEmailTextBlockWidget"
typeStyle="caption"
/>
</div>
</div>
<alert
v-if="displayInvalidZipAlert"
class="my-3"
@ -109,6 +117,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
import textBlock from '@/common-components/text-block/text-block';
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -360,7 +369,8 @@ export default {
funnelSubHeader,
textboxQuestion,
alert,
loadingModal,
loadingModal,
textBlock,
Form
},
};

44
src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue Normal file
View file

@ -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>

116
src/layouts/quote/quote.vue
View file

@ -1,10 +1,112 @@
<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">
<textBlock
cmsWidgetName="paymentServiceOptionsCopy"
justifyText="center"
typeStyle="small"
class="mt-2 mb-5"
/>
<cashOrInsuranceQuestion
ref="cashOrInsurance"
cmsWidgetName="CashOrInsuranceQuestionWidget"
v-model="isInsurance"
groupName="CashOrInsuranceQuestion"
/>
<radioServicePackage/>
<textBlock
cmsWidgetName="quoteDisclaimer"
justifyText="left"
typeStyle="caption"
class="mt-4"
/>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden=shouldHideBackButton
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div>
</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 cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
import textBlock from "@/common-components/text-block/text-block";
import store from "@/store";
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);
});
},
data(){
return {
isInsurance: false,
}
}
</script>
},
methods: {
arePagePrerequisitesValid() {
if (store.getters.order.damage.isRepair || store.getters.order.lineItems.glassParts.length > 0) {
return true;
}
return false;
}
},
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,
textBlock,
cashOrInsuranceQuestion
},
};
</script>

1
src/layouts/vin-lookup/vin-lookup.spec.js
View file

@ -252,6 +252,7 @@ function mockOutPromises({carId, isZipValid = true, isZipServiceable = true}) {
function mockOutStubFunctions(wrapper) {
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
wrapper.vm.getZipCodeData = jest.fn().mockReturnValue({ isValid: true, isServiceable: true, state: "OH" });
}
const mockMixin = {

40
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -44,7 +44,7 @@
/>
</div>
</div>
<div class="row my-2">
<div class="row mt-2">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
@ -56,6 +56,14 @@
/>
</div>
</div>
<div class="row mb-2">
<div class="col">
<textBlock
cmsWidgetName="QuoteEmailTextBlockWidget"
typeStyle="caption"
/>
</div>
</div>
<alert ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
@ -124,6 +132,7 @@ import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
import textBlock from '@/common-components/text-block/text-block';
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -221,15 +230,10 @@ export default {
async forwardButtonAction() {
// If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
if (!this.vinPopulatedOnPageLoad) {
const serviceZipValidationResponse = this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: this.serviceZipCode });
const vehicleLookupResponse = this.dispatchStoreAction(storeActions.LOOKUP_VEHICLE_BY_VIN, { vin: this.vin });
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "serviceZipValidationResponse",
promise: serviceZipValidationResponse,
},
{
resultKey: "vehicleLookupResponse",
promise: vehicleLookupResponse,
@ -237,30 +241,26 @@ export default {
];
const resultMap = await settleAllPromises(promiseResultMap);
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
// If a Service Zip is entered and it is an invalid zip code (ex. 11111) then show an alert
const isZipValid = resultMap.serviceZipValidationResponse.isValid;
console.log(isZipValid)
console.log(this.serviceZipCode)
const isZipValid = zipCodeData.isValid;
if (this.serviceZipCode && !isZipValid) {
console.log("HIII")
this.displayInvalidZipAlert = true;
return this.$refs.funnelFooter.removeLoader();
}
console.log("BOO")
this.displayInvalidZipAlert = false;
// console.log(resultMap.vehicleLookupResponse)
// console.log(resultMap.serviceZipValidationResponse)
// If either lookup fails, remove the loader and stop processing the page.
if (!resultMap.vehicleLookupResponse || !resultMap.serviceZipValidationResponse.isServiceable) {
if (!resultMap.vehicleLookupResponse || !zipCodeData.isServiceable) {
// If the vehicle result is undefined, the vin entered was invalid.
if(!resultMap.vehicleLookupResponse) {
this.displayVinNotFoundAlert = true;
}
// Check if Service Zip entered is serviceable, if not display an alert
if (!resultMap.serviceZipValidationResponse.isServiceable) {
if (!zipCodeData.isServiceable) {
this.displayNonServiceableZipAlert = true;
}
@ -294,7 +294,7 @@ export default {
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
await this.dispatchStoreAction(storeActions.SAVE_SERVICE_LOCATION, {
zipCode: this.serviceZipCode,
state: resultMap.serviceZipValidationResponse.state,
state: zipCodeData.state,
}, false);
return await this.navigateForward();
@ -302,10 +302,10 @@ export default {
}
// If a VIN has already been found. Validate the Service Zip (in case of changes)
const zipValidationResponse = await this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {zip: this.serviceZipCode});
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
// Check if Service Zip entered is serviceable
if (zipValidationResponse.data.isServiceable) {
if (zipCodeData.isServiceable) {
// If the Service Zip entered is serviceable then save the Zip Info and Email Address and navigate forward
if (this.$store.getters.order.serviceLocation.zipCode != this.serviceZipCode) {
const vehicleRegistrationInfo = this.$store.getters.vehicle.registration;
@ -320,7 +320,7 @@ export default {
else {
await this.dispatchStoreAction(storeActions.SAVE_SERVICE_LOCATION, {
zipCode: this.serviceZipCode,
state: zipValidationResponse.data.state
state: zipCodeData.state
}, false);
}
}
@ -341,7 +341,6 @@ export default {
} else {
await this.navigateForwardWithSingleCarMatch();
}
},
},
mounted() {
@ -406,6 +405,7 @@ export default {
alert,
vinInformation,
loadingModal,
textBlock,
Form,
},
};

19
src/mixins/base-mixin.js
View file

@ -6,6 +6,7 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
data() {
@ -47,6 +48,24 @@ export default {
const footerInfoBox = document.querySelector(".footer#infoBox");
return footerInfoBox ? footerInfoBox.offsetHeight : 0;
},
async getZipCodeData(zipCode) {
const serviceZipValidationResponse = this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: zipCode });
const promiseResultMap = [
{
resultKey: "serviceZipValidationResponse",
promise: serviceZipValidationResponse,
}
];
const resultMap = await settleAllPromises(promiseResultMap);
return {
isZipValid: resultMap.serviceZipValidationResponse.isValid,
isZipServiceable: resultMap.serviceZipValidationResponse.isServiceable,
state: resultMap.serviceZipValidationResponse.state
};
}
},
computed: {
storeActions() {

19
src/mixins/base-mixin.spec.js
View file

@ -95,6 +95,25 @@ describe("baseMixin.js", () => {
// Assert
expect(global.document.querySelector).toBeCalledWith("[data-focus-target='fieldOne']");
});
test("getZipCodeData calls dispatch", () => {
const mixIn = getMixInInstance({});
mixIn.methods.dispatchStoreAction = jest.fn();
mixIn.methods.dispatchStoreAction.mockReturnValue({ isValid:true, isServiceable:true, state:"OH" });
const type = "";
const payload = { zip: 43015 };
const mockData = {
actionList: [{
actionName: storeActions.VALIDATE_ZIP
}],
}
mixIn.methods.getZipCodeData(type, payload);
expect(mixIn.methods.dispatchStoreAction).toBeCalled();
});
});
function getMixInInstance({ isDispatchSuccess = true }) {

10
src/router/index.js
View file

@ -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",
@ -225,8 +233,6 @@ function navigateToUrl(url, optionalQuery = {}) {
externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
}
externalUrl.searchParams.append("experiments", "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true");
window.location.assign(externalUrl);
}

8
src/styles/common-error-styles.scss
View file

@ -138,11 +138,13 @@ html {
pointer-events: all;
font-weight: $font-weight-normal;
}
&.btn.btn-primary:hover,
&.btn.btn-primary:focus,
&.btn.btn-primary:focus-visible {
&.btn.btn-primary:hover {
background: $gray-200;
box-shadow: none;
}
&.btn.btn-primary:focus,
&.btn.btn-primary:focus-visible {
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
}
}
}

20
src/styles/common-typography-styles.scss
View file

@ -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;
@ -54,4 +64,4 @@ caption {
font-size: 1rem !important;
line-height: 1.4;
font-weight: 500;
}
}

1
src/ux-components/button-main/button-main.vue
View file

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

4
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -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 () => {

214
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -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>

191
src/ux-components/radio-service-package/radio-service-package.vue Normal file
View file

@ -0,0 +1,191 @@
<template>
<div class="package-main">
<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="#EstimateRainDefenseModal" 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>
<modal
cmsWidgetName="EstimateRainDefenseModal"
/>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
import modal from "@/common-components/modal/modal";
export default {
name: "radioServicePackage",
data() {
return {
isActive: false,
hasArrow: true,
};
},
methods: {
toggleClass: function(event){
this.isActive = !this.isActive;
}
},
components: {
textLink,
modal
}
}
</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>

4
src/ux-components/text-link/text-link.vue
View file

@ -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,8 @@ a {
text-decoration: underline;
}
}
&.dashed-underline {
text-decoration: underline dashed 1px;
}
}
</style>