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

Updates to remove vin-lookup from PR.

Browse source
This commit is contained in:
Bryan Mauger 2022-07-13 17:33:50 -04:00
parent 2272cc91a5
commit 3c22e2cb4e
7 changed files with 275 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
jest.config.js
View file

@ -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)"],

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

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

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

@ -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;
}
}
}
</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,
buttonQuestion
},
};
</script>

8
src/router/index.js
View file

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

1
src/router/router-constants/fmgPage-values.js
View file

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

9
src/router/router-constants/routing-table.js
View file

@ -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
}
}
],
},
{

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

@ -1,54 +1,54 @@
<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()"
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 py-3 px-4"
@mouseup="triggerButton()"
>
<span
class="m-0"
:class="textPosition"
>
{{buttonLabel}}
</span>
<span
v-if="buttonLabelSubCopy"
class="m-0 small"
:class="textPosition"
>
{{ buttonLabelSubCopy }}
</span>
<span
v-if="screenReaderOnlyText"
class="sr-only"
>
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[loaderColor, loaderPosition]"
/>
</label>
</div>
<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>
<span
v-if="screenReaderOnlyText"
class="sr-only"
>
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[loaderColor, loaderPosition]"
/>
</label>
</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[0];
? this.selectedValues.includes(this.value)
: 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) {
this.handleCheckChange();
}
if(!this.selectingInitiatesLoad) {
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>