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

Merge branch 'develop' into feature/INSR-7750

Browse source
This commit is contained in:
SujathaAnishetty 2026-02-18 09:59:14 -05:00
commit 1449f05f37
31 changed files with 513 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/constants/application-config.js
View file

@ -23,7 +23,10 @@ const applicationConfig = Object.freeze({
YAHOO_CALENDAR: 'https://calendar.yahoo.com/?v=60',
OUTLOOK_CALENDAR:
'https://outlook.office.com/calendar/deeplink/compose?path=/calendar/action/compose&rru=addevent',
FRONTEND_LOGGER_PATH: "/analytics/api/v1/logging"
FRONTEND_LOGGER_PATH: "/analytics/api/v1/logging",
BAILOUT_ON_APPLICATION_ERROR: true,
BAILOUT_ON_API_ERROR: true,
BAILOUT_ON_ROUTER_ERROR: true
});
export default applicationConfig;

5
src/constants/bailoutCode.js
View file

@ -12,7 +12,10 @@ const bailoutCode = Object.freeze({
NoPartsAvailable: 10,
PartsServiceError: 11,
SafeliteNotTheProvider: 12,
VehicleYMMSLookupError: 13
VehicleYMMSLookupError: 13,
ApplicationError: 14,
ApiError: 15,
RouterError: 16
});
export default bailoutCode;

12
src/constants/bailoutMessage.js
View file

@ -17,6 +17,18 @@ const bailoutMessage = Object.freeze({
code: bailoutCode.Unknown,
message: `An unknown bailout occurred: ${getItemData(error)}`
}),
applicationError: (error) => ({
code: bailoutCode.ApplicationError,
message: `An application error occurred: ${getItemData(error)}`
}),
apiError: (error) => ({
code: bailoutCode.ApiError,
message: `An API error occurred: ${getItemData(error)}`
}),
routerError: (error) => ({
code: bailoutCode.RouterError,
message: `A router error occurred: ${getItemData(error)}`
}),
saveSessionError: (error) => ({
code: bailoutCode.SaveSessionError,
message: `An error occurred during save session: ${getItemData(error)}`

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

@ -127,6 +127,7 @@ export default {
isOverflowScrollable: Boolean,
isWide: Boolean,
isCashOrInsurance: Boolean,
isHorizontalLayout: Boolean,
modelValue: [Array, Number, String],
value: [Number, String],
validationRules: String,
@ -211,7 +212,10 @@ export default {
classes = 'ui-radio d-flex';
break;
case 'servicePackageRadio':
classes = 'package-main';
classes = 'package-main d-flex flex-column';
if (this.isHorizontalLayout) {
classes += ' flex-md-row gap-3';
}
break;
case 'providerPrefRadio':
classes = 'option-main';
@ -231,6 +235,9 @@ export default {
break;
case 'servicePackageRadio':
classes = 'package-wrapper';
if (this.isHorizontalLayout) {
classes += ' flex-grow-0 flex-shrink-0';
}
break;
case 'providerPrefRadio':
classes = 'option-wrapper';
@ -325,6 +332,12 @@ export default {
<style lang="scss" scoped>
.button-question {
:deep(.package-wrapper) {
@media (min-width: 768px) {
flex: 0 0 calc(33.333% - 0.67rem);
max-width: calc(33.333% - 0.67rem);
}
}
color: $black;
.radio-button-container {
@ -345,6 +358,11 @@ export default {
&.button-question-text-left {
text-align: left;
}
&.service-package-question-text {
font-weight: 500;
text-align: center;
margin-bottom: 0.5rem;
}
}
}

18
src/global-methods.js
View file

@ -15,10 +15,6 @@ axios.interceptors.response.use(
if (typeof error.response === 'undefined') {
// The request was not made, could be a bad url, bad connection or a CORS error.
rejectionError = {
message:
'A network error occurred. '
+ 'This could be a CORS issue or a dropped internet connection. '
+ 'It is impossible for us to know.',
cause: error,
response: error,
message: axiosResponseInterceptorMessages.NETWORK_ERROR
@ -51,7 +47,7 @@ axios.interceptors.response.use(
);
export default {
callHttpClient({ method, endpoint, payload, logApiCall = true }) {
callHttpClient({ method, endpoint, payload, logApiCall = true, bailoutOnError = true }) {
return new Promise((resolve, reject) => {
const store = useMainStore();
const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
@ -66,9 +62,10 @@ export default {
[headerKeys.SESSION_SEQUENCE_NUMBER]: sessionKey
};
const url = cfDistroUrl + endpoint;
axios({
method,
url: cfDistroUrl + endpoint,
url,
data: payloadAndAnalyticsData,
crossDomain: true,
responseType: 'json',
@ -97,10 +94,11 @@ export default {
}
if (error.response.status !== 404) {
global.$logger.logError(
`${method}: ${endpoint}: ${error.message}`,
error.response
);
global.$logger.logError(`${method}: ${endpoint}: ${error.message}`, error.response);
if (bailoutOnError && global.bailoutOnAxiosError !== undefined)
{
global.bailoutOnAxiosError({ url, error });
}
}
return reject(error.response);
}

9
src/helpers/damage-helper.js
View file

@ -90,6 +90,15 @@ export function getGlassList(glassPieces) {
return names.toLowerCase();
}
export function includesWindshieldReplacement() {
const mainStore = useMainStore();
const windshieldMatches =
mainStore.damage.glassToReplace?.filter(
(glassToReplace) => glassToReplace.glassLocation === damageLocationsSelected.WINDSHIELD
) ?? [];
return windshieldMatches.length > 0;
}
/**
* Commented code are copied directly from DigitalConsumer.FixMyGlass
* and have not been adjusted for ISS.

1
src/iss-components/shop-list-button/shop-list-button.vue
View file

@ -123,7 +123,6 @@ $heritage-checked-border-color: #0070d1;
&:checked + .list-button-content {
background: $background-color-selected;
border-color: $heritage-checked-border-color;
box-shadow: 0 0 0 1px $blue;
.button-label-copy {
font-weight: 500;
color: $black;

6
src/iss-components/site-sub-header/site-sub-header.vue
View file

@ -117,7 +117,7 @@ export default {
alternateFormatting() {
// override for service-packages unique style
if (this.issContainingPage?.toLowerCase() === 'service-packages') {
return 'service-packages-subtext my-4';
return 'service-packages-subtext';
}
return this.darkGraySubText ? 'dark-gray' : 'light-gray';
}
@ -169,8 +169,8 @@ p {
color: $darker-gray;
}
&.service-packages-subtext {
font-weight: 500;
line-height: 24px;
font-weight: 400;
line-height: 26px;
span {
font-size: 1rem;
}

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

@ -14,9 +14,11 @@
ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
<customerQuestions
ref="customerQuestions"
v-model="customerQuestions" />
<div class="mt-4">
<customerQuestions
ref="customerQuestions"
v-model="customerQuestions" />
</div>
<alert
v-if="displayVinNotFoundAlert"
ref="alertVinNotFound"

1
src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
View file

@ -2,6 +2,7 @@
exports[`coverageStatement.vue returns the initial data 1`] = `
Object {
"CANCEL_CLAIM_REF_NAME": "CancelClaimModal",
"RECAL_MODAL_REF_NAME": "RecalModal",
"baseServiceLineItems": Array [],
"widget": Object {

13
src/layouts/coverage-statement/coverage-statement.spec.js
View file

@ -98,6 +98,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
const wrapper = shallowMount(coverageStatement, mountOptions);
wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal = jest.fn();
return { wrapper };
}
@ -672,6 +673,18 @@ describe('coverageStatement.vue', () => {
);
});
});
describe('openCancelClaimModal', () => {
test('when I want to cancel link is clicked, modal opens', () => {
// Arrange
const { wrapper } = getMountedComponent({});
// Act
wrapper.vm.openCancelClaimModal();
// Assert
expect(wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal).toHaveBeenCalled();
});
});
});
describe('claim registration api call', () => {
it('Loaded duplicate with previously registered claim => claim registration is not called', async () => {

20
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -81,7 +81,7 @@
linkType="text"
text="No, I want to cancel"
href="#"
@clickEvent="cancelClaim" />
@clickEvent="openCancelClaimModal" />
<textBlock
v-if="isDisclaimerVisible"
class="mt-5 mb-5"
@ -100,6 +100,10 @@
:ref="RECAL_MODAL_REF_NAME"
cssModalHeadlineClass="text-center"
cmsWidgetName="RecalModal" />
<cancelClaimModal
:ref="CANCEL_CLAIM_REF_NAME"
@cancelClaimConfirmation="cancelClaim"
@returnToClaim="navigateForward" />
</Form>
</template>
@ -108,6 +112,7 @@
import { Form } from 'vee-validate';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import cancelClaimModal from '@/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
@ -134,6 +139,7 @@ import coverageStatuses from '@/constants/coverage-statuses';
import coverageType from '@/constants/coverage-type';
const RECAL_MODAL_REF_NAME = 'RecalModal';
const CANCEL_CLAIM_REF_NAME = 'CancelClaimModal';
export default {
name: 'coverage-statement',
@ -144,7 +150,8 @@ export default {
buttonMain,
textBlock,
textLink,
siteFooter
siteFooter,
cancelClaimModal
},
mixins: [baseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
@ -205,7 +212,8 @@ export default {
explanatoryText: 'ExplanatoryTextWidget',
nextStep: 'NextStepsWidget'
},
RECAL_MODAL_REF_NAME
RECAL_MODAL_REF_NAME,
CANCEL_CLAIM_REF_NAME
};
},
computed: {
@ -444,6 +452,9 @@ export default {
this.baseServiceLineItems = lineItems;
},
formatAmountInDollars,
openCancelClaimModal() {
this.$refs[CANCEL_CLAIM_REF_NAME].openModal();
},
cancelClaim() {
this.mainStore.updateIsSafeliteProvider(false);
this.mainStore.setBailout(bailoutMessage.RequestCallback());
@ -531,6 +542,9 @@ export default {
font-weight: 500;
}
margin-top: 6px;
.external-text {
text-decoration: underline;
}
a {
text-decoration: none;
}

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

@ -14,6 +14,24 @@
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4"
subHeaderMarginClasses="mt-1" />
<textboxQuestion
id="license-plate-question-wrapper"
v-model="licensePlate"
cmsWidgetName="LicensePlateNumberQuestionWidget"
isRequired
disableAutoFill
inputId="license-plate-question"
class="mt-4"
validationRules="license-plate-required" />
<dropdownQuestion
ref="state"
v-model="licenseState"
cmsWidgetName="StateQuestionWidget"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
disableAutoFill
validationRules="state-required"
class="mt-4" />
<alert
v-if="displayVinNotFoundAlert"
ref="alertVinNotFound"
@ -48,24 +66,6 @@
cmsWidgetName="AlertNoServiceWidget"
alertClass="alert-danger"
:isDismissable="false" />
<textboxQuestion
id="license-plate-question-wrapper"
v-model="licensePlate"
cmsWidgetName="LicensePlateNumberQuestionWidget"
isRequired
disableAutoFill
inputId="license-plate-question"
class="mt-4"
validationRules="license-plate-required" />
<dropdownQuestion
ref="state"
v-model="licenseState"
cmsWidgetName="StateQuestionWidget"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
disableAutoFill
validationRules="state-required"
class="mt-4" />
<siteFooter
ref="siteFooter"
class="mt-5"

47
src/layouts/service-packages/service-package-question/service-package-question.vue
View file

@ -2,12 +2,16 @@
<buttonQuestion
ref="buttonQuestion"
v-model="selectedPackageName"
class="service-package-question"
:answers="servicePackageAnswers"
:groupName="groupName"
:questionText="questionText"
:questionTextClasses="['service-package-question-text']"
buttonTypeString="servicePackageRadio"
:buttonTypeObject="servicePackageRadio"
:validationRules="validationRules"
:isRequired="isRequired" />
:isRequired="isRequired"
:isHorizontalLayout="true" />
</template>
<script>
@ -17,9 +21,7 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
import servicePackageRadio from '@/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue';
import partTypeStrings from '@/constants/part-type-strings';
import { useMainStore } from '@/store';
import allGlassPartsAndItemsHavePrices from '@/layouts/service-packages/service-package-helper/service-package-helper';
import { getPriceOfLineItem } from '@/helpers/price-calculator';
import { getHighestFullySatisfiedTier } from '@/helpers/service-package-helper.js';
const glassLocations = damageLocationsSelected;
@ -50,7 +52,8 @@ export default {
data() {
return {
servicePackageRadio,
selectedPackageName: ''
selectedPackageName: '',
questionText: 'Select an option:'
};
},
computed: {
@ -58,7 +61,6 @@ export default {
if (this.availableLineItems?.lineItems) {
return this.availableLineItems.lineItems;
}
return this.availableLineItems ?? [];
},
servicePackageAnswers() {
@ -142,9 +144,6 @@ export default {
}
},
watch: {
availableLineItems() {
this.selectDefaultPackage();
},
selectedPackageName(newValue) {
const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
@ -213,17 +212,6 @@ export default {
});
return vapsPrice;
},
selectDefaultPackage() {
const { glassToReplace, isRepair } = store.order.damage;
const { vaps } = store.order.lineItems;
const defaultTier = getHighestFullySatisfiedTier(
glassToReplace ?? [],
this.availableLineItems,
isRepair,
vaps ?? []
);
this.selectedPackageName = defaultTier;
},
getVapsLineItemsForSelectedPackage(packageName) {
const vapsLineItemsForSelectedPackage = [];
if (packageName === packageNames.TIER_TWO) {
@ -280,3 +268,24 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.service-package-question-text {
font-weight: 500;
text-align: center;
margin-bottom: 0;
}
@include media-breakpoint-up(md) {
:deep(.package-main) {
padding: 0 1.5rem 0 1.5rem;
.package-wrapper:nth-child(2) {
margin-left: 0.5rem;
}
.package-wrapper:nth-child(3) {
margin-right: 0;
margin-left: 0.5rem;
}
}
}
</style>

172
src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -7,18 +7,24 @@
:class="[buttonLabelSubCopy ? 'has-subheader' : '']"
for="testradio">
<div class="package-specs">
<div>
<p class="m-0">
<span v-html="buttonLabel"></span>
<div class="button-label">
<div class="label-wrapper">
<p class="m-0">
<span
class="mt-1"
v-html="buttonLabel"></span>
</p>
<p
v-if="buttonLabelSubCopy"
class="sub-label m-0"
v-html="buttonLabelSubCopy">
</p>
</div>
<div class="pricing-info-mobile">
<span
class="pricing-info"
class="price"
v-html="buttonAuxiliaryCopy"></span>
</p>
<p
v-if="buttonLabelSubCopy"
class="sub-label m-0"
v-html="buttonLabelSubCopy">
</p>
</div>
</div>
<div class="hide-when-closed">
<ul>
@ -53,10 +59,16 @@
<!--ms-n6-->
<div
v-if="buttonFooterCopy"
class="package-footer fw-bold caption mt-4 ml-n4 mr-3"
v-html="buttonFooterCopy"></div>
class="package-footer fw-bold caption mt-4 mr-3"
v-html="buttonFooterCopy">
</div>
</div>
</div>
<div class="pricing-info-desktop">
<span
class="price"
v-html="buttonAuxiliaryCopy"></span>
</div>
</div>
</baseInputButton>
</template>
@ -111,6 +123,7 @@ export default {
</script>
<style lang="scss" scoped>
// TO DO: look into why the font renders differently than Heritage, even with the same specs
.ml-n4 {
margin-left: -$spacer * 2;
}
@ -121,8 +134,30 @@ export default {
.package-wrapper {
margin: 0.5rem 0;
.button-label {
display: flex;
&:before {
content: "";
position: relative;
top: 5px;
margin-right: 1rem;
border-radius: 50%;
border: 0.666667px solid #767676;
width: 16px;
height: 16px;
min-width: 16px;
}
}
label {
display: block;
height: 100%;
}
.package-label {
height: 100%;
display: flex;
flex-direction: column;
}
input[type="radio"] {
@ -132,14 +167,15 @@ export default {
+ .package-label {
display: flex;
flex-direction: column;
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: 0.5rem;
padding: 10px;
border: 0.666667px solid #dddddd;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 0.25rem;
overflow: hidden;
min-height: 60px;
max-height: 100px;
@ -151,23 +187,11 @@ export default {
min-height: 86px;
}
&: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;
left: 13px;
top: 18px;
border-radius: 50%;
width: 10px;
height: 10px;
@ -176,9 +200,9 @@ export default {
}
&:hover {
+ .package-label {
+ .button-label {
&:before {
border: 1px solid #8e9292;
border: 0.666667px solid #767676;
box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
}
}
@ -200,42 +224,37 @@ export default {
}
+ .package-label {
background-color: $blue-100;
border: 1px solid $blue;
background-color: $background-color-selected;
border: 0.666667px solid $heritage-blue-secondary;
max-height: 500px;
}
+ .package-label {
+ .button-label {
&:before {
box-shadow: 0px 0px 0px 1px $blue;
box-shadow: 0px 0px 0px 1px $heritage-blue-primary;
border: none;
}
}
+ .package-label {
&:after {
background: $blue;
background: $heritage-blue-primary;
}
}
}
&:focus {
+ .package-label {
&:before {
border: 2px solid $blue;
}
}
}
}
.package-footer {
color: $red;
font-weight: $font-weight-bold; // 600 in fmg
margin-top: 0.5rem; // not in fmg
color: #af2117;
font-weight: $font-weight-bold;
margin-top: 20px;
font-size: 0.875rem;
line-height: 24px;
}
.package-specs {
display: flex;
flex-direction: column;
flex: 0;
width: 100%;
max-height: 0;
transition: all 1s ease;
@ -243,32 +262,28 @@ export default {
max-height: 500px;
}
p {
font-weight: $font-weight-bold; // 600 in fmg
display: flex;
color: #4d4e53;
font-weight: 600;
justify-content: space-between;
span {
&.pricing-info {
color: $green;
font-size: 0.875rem;
}
}
&.sub-label {
color: $green;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: $font-weight-bold;
}
}
ul {
margin: 1rem 0 0 -.6rem; // .9375rem in fmg
margin: 0.5rem 0 0 1.25rem;
padding: 0;
color: $darker-gray;
li {
margin-bottom: 0.5rem;
margin-bottom: 0.25rem;
font-size: 0.875rem;
line-height: 1.5rem;
color: $darker-gray;
a {
line-height: 1.5rem;
@ -291,8 +306,41 @@ export default {
.hide-when-closed {
display: none;
@include media-breakpoint-up(md) {
display: flex;
flex-direction: column;
display: block;
}
}
}
.pricing-info-desktop {
display: flex;
flex: 1;
align-items: flex-end;
@include media-breakpoint-down(md) {
display: none;
}
span {
&.price {
color: #075f35;
font-size: 0.875rem;
font-weight: $font-weight-bold;
padding: 0.35rem 0 1rem 0;
}
}
}
.pricing-info-mobile {
display: flex;
flex: 1;
justify-content: flex-end;
margin-top: 0.25rem;
@include media-breakpoint-up(md) {
display: none;
}
span {
&.price {
color: #075f35;
font-size: 0.875rem;
font-weight: $font-weight-bold;
}
}
}

74
src/layouts/service-packages/service-packages.vue
View file

@ -9,11 +9,10 @@
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="iss-heritage-container-width">
<div class="service-packages-container iss-heritage-content-container-width">
<div class="service-packages-container">
<siteSubHeader
class="mt-4"
subHeaderClasses="mt-5"
justification="left"
class="subheader mt-5"
justification="center"
cmsWidgetName="SiteSubHeaderWidget"
issContainingPage="service-packages" />
<servicePackageQuestion
@ -25,15 +24,24 @@
isRequired
@vapsItemsSelected="vapsItemsSelectedAction"
@link-event="openModalAction" />
<p
class="caption disclaimer"
v-html="PriceDisclaimerText"></p>
<div class="d-flex justify-content-center mt-8 mb-4">
<buttonMain
ref="buttonMain"
class="continue-button"
variant="navigation"
:buttonText="'Continue'"
@clickEvent="forwardButtonAction" />
</div>
<siteFooter
cmsWidgetName="SiteFooterWidget"
class="back-link"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@ForwardClicked="forwardButtonAction" />
:isForwardButtonHidden="true"
@backClicked="navigateBack" />
</div>
<p
class="caption disclaimer"
v-html="PriceDisclaimerText"></p>
</div>
<loadingModal
ref="loadingModal"
@ -72,6 +80,7 @@ import globalRules from '@/constants/global-rules';
import servicePackageQuestion from '@/layouts/service-packages/service-package-question/service-package-question.vue';
import issPageValues from '@/router/router-constants/issPage-values';
import bailoutMessage from '@/constants/bailoutMessage';
import buttonMain from '@/ux-components/button-main/button-main.vue';
const store = useMainStore();
@ -84,7 +93,8 @@ export default {
Form,
servicePackageQuestion,
loadingModal,
contentGroupModal
contentGroupModal,
buttonMain
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -209,30 +219,50 @@ export default {
<style lang="scss" scoped>
.iss-heritage-container-width {
.service-packages-container {
@include media-breakpoint-up(md) {
width: 100%;
.continue-button {
width: 50%
}
}
@include media-breakpoint-down(md) {
.continue-button {
width: 90%
}
}
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
display: block;
margin: 0 auto;
:deep(.subheader-primary) {
display: block;
}
:deep(.subheader-secondary) {
display: block;
text-align: center;
margin-top: 0.75rem;
padding: 0px;
p {
margin-bottom: 18px;
}
}
}
}
.subheader-secondary {
margin-top: 0.5rem;
padding: 0px;
}
.disclaimer {
margin: 0.5rem 0 1.5rem 0;
a {
color: #4d5151;
font-weight: 400;
margin: 0.5rem 1rem 1.5rem 1.5rem;
:deep(.external-text) {
text-decoration: none;
}
}
.service-packages {
:deep(strong) {
font-weight: $font-weight-bold;
font-weight: 400;
}
}
.back-link {
margin-left: 1rem;
}
</style>

6
src/layouts/tpa-search/tpa-search.spec.js
View file

@ -355,7 +355,7 @@ describe('tpa-search.vue', () => {
// Assert
expect(result.length).toBe(1);
expect(result[0].title).toBe('test shop');
expect(result[0].title).toBe('Test Shop');
expect(result[0].addressLines.length).toBe(2);
});
@ -395,7 +395,7 @@ describe('tpa-search.vue', () => {
// Assert
expect(result.length).toBe(1);
expect(result[0].buttonLabel).toBe('auto glass shop');
expect(result[0].buttonLabel).toBe('Auto Glass Shop');
expect(result[0].buttonLabelSubCopy).toBe('5.8 mi');
expect(result[0].value).toBe('12345');
});
@ -616,7 +616,7 @@ describe('tpa-search.vue', () => {
const result = wrapper.vm.getShopButtonDataFromProvider(provider);
// Assert
expect(result.buttonLabel).toBe('test shop');
expect(result.buttonLabel).toBe('Test Shop');
expect(result.buttonLabelSubCopy).toBe('5.8 mi');
expect(result.value).toBe('12345');
expect(result.buttonBodyCopy).toContain('<br>');

4
src/layouts/tpa-search/tpa-search.vue
View file

@ -265,7 +265,7 @@ export default {
},
providerAddresses() {
return this.radiusFilteredAndCappedProviders?.map((provider) => ({
title: provider.companyName.toLowerCase(),
title: toTitleCase(provider.companyName),
fullAddress: this.getFullProviderAddress(provider),
addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)]
})) ?? [];
@ -395,7 +395,7 @@ export default {
: null;
return {
buttonLabel: provider?.companyName.toLowerCase() ?? '',
buttonLabel: toTitleCase(provider?.companyName) ?? '',
buttonLabelSubCopy: distance === null ? '' : `${distance} mi`,
buttonBodyCopy: `${this.getFullProviderAddress(provider)}<br>${
cellNumber ?? ''

50
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -5,6 +5,7 @@ import routerParams from '@/router/router-constants/router-params';
import { useMainStore } from '@/store';
import vehicleCategories from '@/constants/vehicle-categories';
import VehicleDamageComponent from '@/layouts/vehicle-damage/vehicle-damage.vue';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
const mockRoute = {
params: {}
@ -12,6 +13,16 @@ const mockRoute = {
const mockRouter = {
navigate: jest.fn()
};
jest.mock('@/mixins/vehicle-questions-mixin', () => ({
methods: {
navigateForward: jest.fn(),
getPartsOrQuestions: jest.fn(() => Promise.resolve({
data: {
partsOrQuestions: []
}
}))
}
}));
const mountOptions = {
global: {
mixins: [
@ -91,6 +102,43 @@ describe('vehicle-damage.vue', () => {
expect(mockRouter.navigate)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_REPAIR, mockRoute);
});
test('When damage selected is a replace but not windshield, navigate forward from vehicle-questions-mixin', async () => {
mountOptions.global.plugins = [createTestingPinia({
initialState: {
main: {
order: {
damage: {
isRepair: false,
glassToReplace: [{ glassLocation: 'Rear', glassName: 'Stationary' }]
}
}
}
}
})];
const wrapper = mount(VehicleDamageComponent, mountOptions);
const siteFooterWrapper = wrapper.getComponent({ ref: 'siteFooter' });
useMainStore().getSupportingItems = jest.fn().mockImplementation(() => Promise.resolve({
data: { data: [
{
description: null,
partNumber: 'SUPPLIES-REPAIR',
partType: 'REPAIR FEE'
},
{
description: null,
partNumber: 'WSREPAIR',
partType: 'REPAIR FEE'
}
] }
}));
siteFooterWrapper.vm.$emit('forwardClicked');
await flushPromises();
expect(vehicleQuestionsMixin.methods.getPartsOrQuestions).toHaveBeenCalledTimes(1);
expect(vehicleQuestionsMixin.methods.navigateForward).toHaveBeenCalledTimes(1);
});
test('Error in getPartsOrQuestions call => bailout true and navigate forward with CLICKED_FORWARD_WITH_BAILOUT scenario', async () => {
mountOptions.global.plugins = [createTestingPinia({
initialState: {
@ -115,7 +163,7 @@ describe('vehicle-damage.vue', () => {
const partsQuestionsErrorResponse = {
error: 'Error getting parts'
};
useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => (
vehicleQuestionsMixin.methods.getPartsOrQuestions.mockImplementation(() => (
partsQuestionsErrorResponse
));
siteFooterWrapper.vm.$emit('forwardClicked');

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

@ -216,6 +216,13 @@ export default {
=== damageLocationsSelected.REPAIR
);
},
isWindshieldReplace() {
return (
this.isWindshieldDamageLocation
&& this.selectedWindshieldOptions.selectedWindshieldDamageType
=== damageLocationsSelected.REPLACE
);
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
@ -418,8 +425,8 @@ export default {
this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
this.$route
);
} else if (this.mainStore.order.vehicle.vin) {
// If vin already exists, navigate directly to vin-lookup
} else if (this.mainStore.order.vehicle.vin || !this.isWindshieldReplace) {
// If vin already exists or not replacing windshield, get parts/questions and navigate forward
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) {

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

@ -62,7 +62,8 @@ export default {
const answers = this.getCmsContent(this.cmsWidgetName, 'Answers');
if (Array.isArray(answers)) {
if (!isVinbyAddressPermissible) {
answers.splice(answers.indexOf(vinLookupMethodSelections.HOMEADDRESS), 1);
const homeAddressIndex = answers.findIndex(answer => answer.Name === vinLookupMethodSelections.HOMEADDRESS);
answers.splice(homeAddressIndex, 1);
}
this.answersFromCms = answers;
}

2
src/layouts/vehicle-parts/vehicle-parts.spec.js
View file

@ -212,6 +212,7 @@ describe('vehicle-parts.vue', () => {
test('User had part questions > navigateBack triggers a router.navigateWithoutSaving change with correct scenario', async () => {
// Arrange
useMainStore().damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
@ -244,6 +245,7 @@ describe('vehicle-parts.vue', () => {
test('User did not have part questions > navigateBack triggers a router.navigate change with correct scenario', async () => {
// Arrange
useMainStore().damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {

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

@ -14,8 +14,6 @@
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
<vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType" />
<vinQuestion
v-model="vin"
class="mt-4"
@ -23,6 +21,8 @@
:isDisabled="vinPopulatedOnPageLoad"
textPosition="left" />
<vinLocationInformation />
<vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType" />
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"

19
src/main.js
View file

@ -14,6 +14,8 @@ import router from './router';
import App from './App.vue';
import Logger from "@/helpers/logger";
import bailoutMessage from '@/constants/bailoutMessage';
import applicationConfig from '@/constants/application-config';
// Instantiate global logging object
global.$logger = new Logger();
@ -46,15 +48,26 @@ function getPageName(vm) {
// Vue Error Handling
vueApp.config.errorHandler = (err, vm, info) => {
const pageName = getPageName(vm);
global.$logger.logError(
`Page Name - ${pageName} - ${info}: ${err.message}\n${err.stack}`
);
global.$logger.logError(`Page Name - ${pageName} - ${info}: ${err.message}\n${err.stack}`);
if (applicationConfig.BAILOUT_ON_APPLICATION_ERROR) {
router.navigateBailout(bailoutMessage.applicationError(`[${pageName}] ${info}: ${err.message}\n${err.stack}`));
}
};
// Vue Router Error Handling
router.onError((err) => {
global.$logger.logError(err.message, err.cause);
if (applicationConfig.BAILOUT_ON_ROUTER_ERROR) {
router.navigateBailout(bailoutMessage.routerError(`${err.message}\n${err.stack}`));
}
});
global.bailoutOnAxiosError = (error) => {
if (applicationConfig.BAILOUT_ON_API_ERROR) {
router.navigateBailout(bailoutMessage.apiError(error));
}
}
vueApp.mount('#app');
// define global rules

3
src/mixins/vehicle-questions-mixin.js
View file

@ -1,3 +1,4 @@
import { includesWindshieldReplacement } from '@/helpers/damage-helper';
import issPageValues from '@/router/router-constants/issPage-values';
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
import { useMainStore } from '@/store';
@ -457,6 +458,8 @@ export default {
let backNavigationScenario = '';
if (self.mainStore.order.damage.isRepair) {
backNavigationScenario = navigationScenarios.CLICKED_BACK_WITH_REPAIR;
} else if (!includesWindshieldReplacement()) {
backNavigationScenario = navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS;
} else {
backNavigationScenario = self.mainStore.vehicle.vin
? navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS

89
src/mixins/vehicle-questions-mixin.spec.js
View file

@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
import { setupMocksForJsFiles, getMountOptions } from '@/helpers/unit-test-helper.js';
import issPageValues from '@/router/router-constants/issPage-values';
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
import { useMainStore } from '@/store';
import { useMainStore, getDefaultState } from '@/store';
/** @ignore */
function setupMocks({ issPage = issPageValues.VIN_LOOKUP }) {
@ -53,6 +53,7 @@ function setupMocks({ issPage = issPageValues.VIN_LOOKUP }) {
describe('vehicle-questions-mixin', () => {
afterEach(() => {
jest.clearAllMocks();
useMainStore().order = getDefaultState().order;
});
describe('hasPartQuestions', () => {
@ -2181,19 +2182,83 @@ describe('vehicle-questions-mixin', () => {
});
describe('navigateBackByVehicleQuestions', () => {
test('current page is coverage-statement and damage is repair => go to vehicle-damage', () => {
// Arrange
const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
useMainStore().order.damage.isRepair = true;
describe('current page is coverage-statement', () => {
test('damage is repair => go to vehicle-damage', () => {
// Arrange
const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
useMainStore().order.damage.isRepair = true;
// Act
wrapper.vm.navigateBackByVehicleQuestions();
// Act
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_REPAIR,
{ query: { issPage: issPageValues.COVERAGE_STATEMENT } }
);
// Assert
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_REPAIR,
{ query: { issPage: issPageValues.COVERAGE_STATEMENT } }
);
});
test('damage is replace but not windshield => go to vehicle-damage', () => {
// Arrange
const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
useMainStore().order.damage.isRepair = false;
useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }];
// Act
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
{ query: { issPage: issPageValues.COVERAGE_STATEMENT } }
);
});
test('damage is replace and includes windshield, we have vin => go to vehicle-damage', () => {
// Arrange
const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
useMainStore().order.damage.isRepair = false;
useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
useMainStore().order.vehicle.vin = '5NMS3CADXLH233004';
// Act
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
{ query: { issPage: issPageValues.COVERAGE_STATEMENT } }
);
});
test('damage is replace and includes windshield => go to vehicle-lookup', () => {
// Arrange
const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
useMainStore().order.damage.isRepair = false;
useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
// Act
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
{ query: { issPage: issPageValues.COVERAGE_STATEMENT } }
);
});
test('damage is replace and includes windshield but there are parts to choose => go to vehicle-parts', () => {
// Arrange
const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
useMainStore().order.damage.isRepair = false;
useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
wrapper.vm.hasGlassLocationWithMultipleParts = jest.fn().mockReturnValue(true);
// Act
wrapper.vm.navigateBackByVehicleQuestions();
// Assert
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
navigationScenarios.CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE,
{ query: { issPage: issPageValues.COVERAGE_STATEMENT } }
);
});
});
test(

17
src/router/index.js
View file

@ -281,7 +281,10 @@ function navigate(
}
// Match our maps up and navigate if we have a destination.
const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
let matchingScenarioMap = getNavigationMap(scenario, currentRoute);
if (!matchingScenarioMap && scenario === navigationScenarios.BAILOUT) {
matchingScenarioMap = { destinationIssPageValue: issPageValues.BAILOUT_PAGE }
}
if (!matchingScenarioMap) {
window.console.error('No matching scenario found. Please review the routing table.');
@ -332,6 +335,18 @@ function navigateToUrl(url, optionalQuery = {}) {
window.location.assign(externalUrl);
}
router.navigateBailout = (bailoutData = null) => {
if (bailoutData != null && !useMainStore().isBailout) {
useMainStore().setBailout(bailoutData)
}
router.navigate(
navigationScenarios.BAILOUT,
router.currentRoute.value,
{},
{ [routerParams.SKIP_SAVE_SESSION]: true }
);
}
// Get navigation map depending on the scenario and the current 'page' you're on.
function getNavigationMap(scenario, currentRoute) {
const issPageValue = currentRoute.query.issPage;

2
src/router/router-constants/navigation-scenarios.js
View file

@ -61,6 +61,7 @@ const navigationScenarios = Object.freeze({
CLICKED_BACK_WITH_MOLDING_QUESTIONS: 'CLICKED_BACK_WITH_MOLDING_QUESTIONS',
CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: 'CLICKED_BACK_WITH_CAPABILITY_QUESTIONS',
CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: 'CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS',
CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS: 'CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS',
CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: 'CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS',
// Schedule
@ -113,6 +114,7 @@ const navigationScenarios = Object.freeze({
// Bailout
CLICKED_FORWARD_WITH_BAILOUT: 'CLICKED_FORWARD_WITH_BAILOUT',
CLICKED_NEED_HELP_WITH_BAILOUT: 'CLICKED_NEED_HELP_WITH_BAILOUT',
BAILOUT: 'BAILOUT'
});
export default navigationScenarios;

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

@ -192,6 +192,10 @@ const routingTable = () => [
scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_LOOKUP
@ -233,6 +237,10 @@ const routingTable = () => [
scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_LOOKUP
@ -262,6 +270,10 @@ const routingTable = () => [
scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_LOOKUP
@ -295,6 +307,10 @@ const routingTable = () => [
scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_LOOKUP
@ -540,6 +556,10 @@ const routingTable = () => [
scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationIssPageValue: issPageValues.VEHICLE_LOOKUP

23
src/store/index.js
View file

@ -879,8 +879,7 @@ export const useMainStore = defineStore({
return globalMethods.callHttpClient({
method: endpoints.GetMobilePremiumFee.method,
endpoint: `${endpoints.GetMobilePremiumFee.url}/${paymentType}/${damageType}`,
logApiCall: true
endpoint: `${endpoints.GetMobilePremiumFee.url}/${paymentType}/${damageType}`
});
},
getMobileTimeSlots(startDate, endDate, zipCodeOverride = null) {
@ -935,14 +934,7 @@ export const useMainStore = defineStore({
return globalMethods.callHttpClient({
method: endpoints.GetMobileTimeSlots.method,
endpoint: endpoints.GetMobileTimeSlots.url,
payload,
logApiCall: true,
additionalSuccessEventDataHandler: (response) =>
getTimeSlotsAdditionalEventData(
response.data.provisionalTriggers,
zipCodeOverride ?? order.serviceLocation.zipCode,
response.data.days?.[0]?.date
)
payload
});
},
getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber) {
@ -998,8 +990,7 @@ export const useMainStore = defineStore({
return globalMethods.callHttpClient({
method: endpoints.GetShopTimeSlots.method,
endpoint: endpoints.GetShopTimeSlots.url,
payload,
additionalSuccessEventDataHandler: (response) => provisionalTriggersToString(response.data.provisionalTriggers)
payload
});
},
async getWipers() {
@ -1553,8 +1544,7 @@ export const useMainStore = defineStore({
method: endpoints.SaveSession.method,
endpoint: endpoints.SaveSession.url,
payload,
additionalSuccessEventDataHandler: () =>
`Email provided: ${customer.emailAddress ? 'true' : 'false'}`
bailoutOnError: false
}).then((response) => {
if (loadedFromDupeCheck) {
this.order.loadedSessionClearedPreviousData = true;
@ -2457,7 +2447,7 @@ export const useMainStore = defineStore({
// populate initial state
populateInitialState(forceReset) {
if (!sessionStorage.getItem(storeId) || forceReset) {
this.$state = state;
this.$state = getDefaultState();
}
},
@ -2466,8 +2456,7 @@ export const useMainStore = defineStore({
return globalMethods.callHttpClient({
method: endpoints.GetAlertReasons.method,
endpoint: `${endpoints.GetAlertReasons.url}/${ctu}`,
payload: {},
logApiCall: true
payload: {}
});
},

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

@ -355,7 +355,7 @@ export default {
border-top-color: $alert-red-color;
}
svg {
fill: $red-600;
fill: $alert-red-color;
width: 1rem;
height: 1rem;
}