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

CSR-652 | Add CSS class to each alert

Browse source 
That matches CMS
This commit is contained in:
Scott Kiener 2022-06-14 16:49:24 -04:00
parent 16e25b35b8
commit 2544954f8f
12 changed files with 71 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/common-components/funnel-header/funnel-header.vue
View file

@ -7,11 +7,12 @@
<menuModal/>
</div>
<alert
class="position-absolute rounded-0 w-100 border-0 shadow-sm"
v-if="displayGlobalAlert"
:alertClass="globalAlertMessage.type"
class="position-absolute rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlertMessage.messageHeadline"
:manualCopy="globalAlertMessage.messageCopy"
:alertClass="globalAlertMessage.type"
v-bind:isDismissible="globalAlertMessage.isDismissible"
/>
</template>

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

@ -12,27 +12,33 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<div class="fade-on-route-transition sub-container make-tall">
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
<alert ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"
class="mb-4"
cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<alert ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert"
<alert ref="alertMatchedDifferentVehicle"
v-if="displayMatchedDifferentVehicleAlert"
class="mb-4"
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
:manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
v-bind:isDismissible="false"
/>
<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
<alert ref="alertNonServiceableZip"
v-if="displayNonServiceableZipAlert"
class="mb-4"
alertClass="alert-danger"
cmsWidgetName="AlertNonServiceableZipWidget"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
<alert ref="alertVinLookupsByHomeAddressNotAllowed"
v-if="displayVinLookupByHomeAddressNotAllowedAlert"
class="mb-4"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
alertClass="alert-danger"

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

@ -57,13 +57,15 @@
</div>
</div>
</transition>
<alert ref="alertVerificationWarning" v-if="displayVerificationWarning"
<alert ref="alertVerificationWarning"
v-if="displayVerificationWarning"
class="mb-4"
cmsWidgetName="AlertVerificationWarningWidget"
alertClass="alert-warning"
v-bind:isDismissible="false"
/>
<alert ref="alertNoMatchWarning" v-if="displayNoMatchWarning"
<alert ref="alertNoMatchWarning"
v-if="displayNoMatchWarning"
class="mb-4"
cmsWidgetName="AlertNoMatchWarningWidget"
alertClass="alert-warning"

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

@ -9,13 +9,13 @@
isRequired=true
:validation-rules="validationRules"
/>
<alert
ref="differentVehicleAlert"
<alert ref="differentVehicleAlert"
v-if="isCarIdDifferent"
class="my-3"
alertClass="alert-warning"
cmsWidgetName="FoundWindshield"
:manualHeadline="differentVehicleAlertHeader"
:manualCopy="differentVehicleAlertBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
/>
</template>

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

@ -10,16 +10,15 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<alert
ref="alertFoundMultipleVehicles"
<alert ref="alertFoundMultipleVehicles"
class="my-5"
alertClass="alert-warning"
:manualHeadline="AlertFoundMultipleVehiclesHeader"
cmsWidgetName="FoundMultipleVehicles"
:manualHeadline="AlertFoundMultipleVehiclesHeader"
manualCopy=""
alertClass="alert-warning"
v-bind:isDismissible="false"
/>
<addressVehiclesQuestion
ref="addressVehiclesQuestion"
<addressVehiclesQuestion ref="addressVehiclesQuestion"
cmsWidgetName="VehicleConfirmationQuestion"
:vehicles="VehiclesForQuestions"
validationRules="vehicle-required"

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

@ -11,11 +11,10 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<alert
class="vinLookupMethodHeading"
v-model="customAlertData"
alertClass=""
cmsWidgetName="AlertVinLookupQuestion"
/>
class="vinLookupMethodHeading"
cmsWidgetName="AlertVinLookupQuestion"
alertClass=""
/>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
:answers="answersFromCms"

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

@ -40,10 +40,11 @@
</div>
</div>
<alert
v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
class="my-3"
cmsWidgetName="NoServiceZipWidget"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
alertClass="alert-danger"
/>
<div class="row my-2">
@ -58,14 +59,17 @@
/>
</div>
</div>
<alert class="my-3"
<alert
v-if="!isVinValid"
class="my-3"
cmsWidgetName="NoMatchAlertWidget"
v-if="!isVinValid"
alertClass="alert-warning" />
<alert class="my-3"
<alert
v-if="isCarIdDifferent"
class="my-3"
cmsWidgetName="MatchedDifferentVehicleAlertWidget"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-if="isCarIdDifferent"
alertClass="alert-warning"
/>
<funnelFooter

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

@ -10,11 +10,10 @@
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<alert
ref="vehicleChangeAlert"
<alert ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
v-show="shouldDisplayVehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false"
/>
@ -32,9 +31,9 @@
:selectedDamageLocations="selectedDamageLocations"
/>
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
v-show="hasRepairReplaceConflict"
alertClass="alert-danger"
:isDismissible="false"
/>

4
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -8,9 +8,9 @@
:validationRules="windshieldDamageTypeQuestionValidationRules"
/>
<alert
v-if="showNoReplacementAvailableError"
class="my-3"
cmsWidgetName="NoReplacementAvailableError"
v-if="showNoReplacementAvailableError"
alertClass="alert-danger"
:isDismissible="false"
/>
@ -30,9 +30,9 @@
isRequired
/>
<alert
v-if="hasSplitSingleConflict"
class="mt-5"
cmsWidgetName="SplitSingleConflict"
v-if="hasSplitSingleConflict"
alertClass="alert-danger"
:isDismissible="false"
/>

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

@ -9,8 +9,8 @@
<div class="col">
<alert
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
alertClass="alert-warning"
:isDismissible="false"
/>
</div>

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

@ -60,49 +60,47 @@
</div>
</div>
<alert
class="my-4"
v-model="customAlertData"
v-if="noMatchAlert"
alertClass="alert-warning"
class="my-4"
cmsWidgetName="NoMatchAlertWidget"
alertClass="alert-warning"
/>
<alert
v-if="isVinFieldReadOnly"
class="my-4"
cmsWidgetName="PerfectMatchNewVinAlertReadOnly"
:manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
:manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
v-model="customAlertData"
v-if="isVinFieldReadOnly"
alertClass="alert-success"
/>
<alert
v-if="isCarIdDifferent && !vinNotFound && !perfectMatchNewVinAlert"
class="my-4"
cmsWidgetName="MatchedDifferentVehicle"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-model="customAlertData"
v-if="isCarIdDifferent && !vinNotFound && !perfectMatchNewVinAlert"
alertClass="alert-warning"
/>
<alert
v-if="noServiceZip"
class="my-4"
cmsWidgetName="NoServiceZipWidget"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
v-model="customAlertData"
v-if="noServiceZip"
alertClass="alert-danger"
/>
<alert
class="my-4"
v-model="customAlertData"
v-if="vinNotFound"
alertClass="alert-danger"
class="my-4"
cmsWidgetName="VinNotFound"
alertClass="alert-danger"
/>
<alert
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
class="my-4"
cmsWidgetName="PerfectMatchNewVinAlert"
:manualHeadline="PerfectMatchNewVinAlertHeader"
:manualCopy="PerfectMatchNewVinAlertBody"
v-model="customAlertData"
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
alertClass="alert-success"
/>
<funnelFooter

17
src/ux-components/alert/alert.vue
View file

@ -2,7 +2,7 @@
<div
class="alert fade show text-center mb-0 py-2 px-4"
role="alert"
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass, this.cssClassNameForCmsWidget]"
>
<p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
<template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
@ -54,7 +54,10 @@ export default {
alert-info (blue)
*/
alertClass: String,
cmsWidgetName: String,
cmsWidgetName: {
type: String,
required: true,
},
manualHeadline: String,
manualCopy: String,
shouldScrollToOnMount: {
@ -64,14 +67,17 @@ export default {
},
computed: {
alertHeadline(){
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
return this.manualHeadline ? this.manualHeadline : this.getCmsContent(this.cmsWidgetName, 'HeadlineText');
},
alertCopy(){
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
return this.manualCopy ? this.manualCopy : this.getCmsContent(this.cmsWidgetName, 'BodyText');
},
splitAlertCopyForParagraphTag(){
return splitCMSCopyOnParagraphTag(this.alertCopy);
},
cssClassNameForCmsWidget(){
return "widget-name-" + this.cmsWidgetName;
},
},
methods: {
doesCopyContainRouterLink,
@ -96,6 +102,9 @@ export default {
},
},
mounted() {
if (!this.cmsWidgetName) {
console.log('Error: Missing a CMS Widget Name (required field)');
}
this.ensureAlertIsInViewPort();
}
};