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

Merge pull request #225 from Safelite/feature/digital/SSR-363

Browse source 
Feature/digital/ssr 363
This commit is contained in:
katiekroell 2023-04-06 12:48:21 -04:00 committed by GitHub
commit dac53b7a94
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 84 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,14 +4,14 @@
:class="
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
">
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5"
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex"
:class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
<span class="fw-bold w-100">{{ questionText }}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset
class="w-100 px-5"
class="w-100"
:aria-required="isRequired"
:class="getFieldSetClasses"
:role="isMultiSelect ? 'group' : 'radiogroup'"

2
src/iss-components/address-questions/address-questions.vue
View file

@ -10,7 +10,7 @@
<alert
ref="alertNoMatchWarning"
v-if="displayNoMatchWarning"
class="mb-4"
class="mb-4 mt-4"
cmsWidgetName="AlertNoMatchWarningWidget"
alertClass="alert-warning"
v-bind:isDismissible="false" />

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

@ -17,14 +17,14 @@
<alert
ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"
class="mb-4"
class="mb-4 mt-4"
cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<alert
ref="alertMatchedDifferentVehicle"
v-if="displayMatchedDifferentVehicleAlert"
class="mb-4"
class="mb-4 mt-4"
:manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning"
@ -32,7 +32,7 @@
<alert
ref="alertMatchedTwoIdenticalYMMVehicle"
v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
class="mb-4"
class="mb-4 mt-4"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
:manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
@ -41,7 +41,7 @@
<alert
ref="alertVinLookupsByHomeAddressNotAllowed"
v-if="displayVinLookupByHomeAddressNotAllowedAlert"
class="mb-4"
class="mb-4 mt-4"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />

2
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="px-5">
<div>
<alert
ref="differentVehicleAlert"
v-if="displayMatchedDifferentVehicleAlert"

75
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -3,18 +3,15 @@
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles ">
v-slot="{ meta }">
<div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="px-5 ">
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert
cmsWidgetName="FoundMultipleVehicles"
ref="alertFoundMultipleVehicles"
@ -23,27 +20,19 @@
:manualHeadline="AlertFoundMultipleVehiclesHeader"
manualCopy=""
v-bind:isDismissible="false"
id="multiple-vehicles-alert"
/>
</div>
<div class="overflow-scroll">
<addressVehiclesQuestion
ref="addressVehiclesQuestion"
cmsWidgetName="VehicleConfirmationQuestion"
:vehicles="VehiclesForQuestions"
:vehicleSelected ="VehicleSelected"
validationRules="vehicle-required"
v-model="selectedVehicleVin"
:isCarIdDifferent="isCarIdDifferent"
:displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
:displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert"
/>
<div
class="alert-provide-vin my-3 px-5"
v-if="splitAlertProvideVinBodyForLink.length"
>
id="multiple-vehicles-alert" />
<addressVehiclesQuestion
ref="addressVehiclesQuestion"
cmsWidgetName="VehicleConfirmationQuestion"
:vehicles="VehiclesForQuestions"
:vehicleSelected ="VehicleSelected"
validationRules="vehicle-required"
v-model="selectedVehicleVin"
:isCarIdDifferent="isCarIdDifferent"
:displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
:displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert" />
<div class="alert-provide-vin my-3"
v-if="splitAlertProvideVinBodyForLink.length">
<span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
<span v-if="doesCopyContainRouterLink(copy)" class="text-body">
<router-link
@ -51,21 +40,19 @@
query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
name: 'root',
}"
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
>
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link >
</span>
<span v-else class="m-0 text-body" v-html="copy"></span>
</span>
</div>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter" />
</div>
</div>
</div>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</Form>
</template>
@ -303,9 +290,9 @@ export default {
#multiple-vehicles-alert p {
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
}
.overflow-scroll {
height: calc(100% - 432px);
height: calc(100% - 180px);
overflow-X: hidden !important;
}
</style>

2
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -2,7 +2,7 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles vehicle-damage">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll">
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
<alert
ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert"

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

@ -7,7 +7,7 @@
<SiteHeader
cms-widget-name="SiteHeaderWidget"
/>
<div class="fade-on-route-transition sub-container overflow-scroll container gx-0">
<div class="fade-on-route-transition sub-container overflow-scroll container gx-0 px-5">
<VehicleBanner
class="mb-3"
cms-widget-name="VehicleBannerWidget"

40
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -4,7 +4,7 @@
</div>
<div class="nested-radio">
<div class="row my-2">
<div class="col mx-1">
<div class="col">
<buttonQuestion
v-model="selectedTint"
:answers="tintSelectionOptions"
@ -17,6 +17,7 @@
<div class="row my-2" aria-live="polite">
<div class="col">
<buttonQuestion
id="glass-part-question"
v-model="selectedPartNumber"
buttonTypeString="radio"
class="radioQuestion"
@ -27,7 +28,8 @@
isRequired
isSmallQuestionText
:groupName="`${glassLocation}-${glassName}-${selectedTint}`"
:validationRules="partValidationRules" />
:validationRules="partValidationRules"
/>
</div>
</div>
</buttonQuestion>
@ -180,25 +182,25 @@ export default {
return tintSourceObject.src;
},
// Check if only a single part is present for the tint and set the v-model if it is.
AutoSelect() {
if(this.partsForSelectedTint?.length > 0)
if (this.partsForSelectedTint?.length > 0)
{
// Check if only a single part is present for the tint and set the v-model if it is.
if (this.partsForSelectedTint?.length == 1) {
this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
//select element with matching partNumber
this.$nextTick(() => {
document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
});
}
else{
else {
// If selected part isn't in the current list or it's null, select the first part
if(!this.selectedPartNumber || this.partsForSelectedTint.filter(x => x.partNumber == this.selectedPartNumber).length === 0)
{
this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
}
}
//select element with matching partNumber
this.$nextTick(() => {
document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
});
}
},
@ -206,16 +208,10 @@ export default {
LoadPreselectedValues() {
this.$nextTick(() => {
// Populate button-question model-value if parts data already exists in store
if(this.modelValue)
if(this.modelValue !== undefined)
{
this.selectedTint = this.modelValue.color;
}
else{
// If one item in list, select it
if (this.tintSelectionOptions?.length == 1) {
this.selectedTint = this.tintSelectionOptions[0].value;
}
}
});
},
},
@ -243,4 +239,14 @@ export default {
color: $black;
font-weight: $font-weight-bold;
}
#glass-part-question {
span.fw-bold.w-100 {
margin-top: 0.5rem;
margin-bottom: 0;
}
div.col.radio-button-container {
padding-bottom: 0;
}
}
</style>

29
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -1,13 +1,13 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts">
<div class="page-container-grouped-styles vehicle-parts small-question-text">
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
<vehicleBanner
class="mb-3"
ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
class="mb-3"
ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
<div class="prevent-squish my-5">
<div class="row">
@ -16,7 +16,8 @@
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
:isDismissible="false"
id="vehicle-parts-alert" />
</div>
</div>
</div>
@ -222,8 +223,14 @@ export default {
};
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 180px);
overflow-x: hidden !important;
}
</style>
.overflow-scroll {
height: calc(100% - 180px);
overflow-x: hidden !important;
}
#vehicle-parts-alert {
.alert-heading {
margin-top: 0.25rem !important;
}
}
</style>

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

@ -9,7 +9,7 @@
cmsWidgetName="SiteHeaderWidget"
/>
<div class="px-4 overflow-scroll ">
<div class="fade-on-route-transition sub-container px-2 mt-5">
<div class="fade-on-route-transition sub-container px-2">
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
@ -19,6 +19,7 @@
cmsWidgetName="SiteSubHeaderWidget"
/>
<vinLookupAlerts
class="mt-5"
:activeAlertType="activeVehicleLookupAlertType"
/>