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

rlsmerge 2024.09.04 to develop

Browse source
This commit is contained in:
Chris Redelinghuys 2025-09-03 15:42:38 -04:00
commit b9cfaf43f2
44 changed files with 559 additions and 293 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/css/hop-styling.css
View file

@ -18,7 +18,7 @@ body .validation-info {
display: none;
}
body .italicSmall {
font-style: normal;
font-style: italic;
font-size: 14px;
}
body span {
@ -153,13 +153,13 @@ body .buttonContainer button {
}
}
body .buttonContainer button:focus {
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
}
body .buttonContainer button:focus, body .buttonContainer button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
color: #fff;
background: linear-gradient(270deg, rgb(6, 87, 124) 0%, rgb(6, 87, 124) 100%);
background: #db0020;
}
body .buttonContainer button:disabled {
background: #e3e4e4 !important;
@ -274,7 +274,7 @@ body .cc-error-container #alert-message {
#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
margin: auto 0;
padding-left: 0;
font-weight: 400;
font-weight: 600;
}
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
width: 100%;
@ -297,7 +297,7 @@ body .cc-error-container #alert-message {
text-align: right;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
width: 20%;
width: 12%;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
padding: 0 2%;
@ -309,11 +309,13 @@ body .cc-error-container #alert-message {
margin-top: 24px;
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #525656;
}
#fmg-checkout-shared #other-payments-container .disclaimerContainerv2 {
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #525656;
}
@media only screen and (max-device-width: 767px) {

14
public/scss/hop-styling.scss
View file

@ -20,7 +20,7 @@ body {
}
.italicSmall {
font-style: normal;
font-style: italic;
font-size: 14px;
}
@ -161,15 +161,15 @@ body {
cursor: pointer;
}
&:focus {
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
}
&:focus, // Mouse, touch, stylus focus
&:focus-visible {
// Keyboard focus for accessibility
outline: none;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
color: #fff;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
background: #db0020;
}
&:disabled {
background: #e3e4e4 !important;
@ -332,7 +332,7 @@ body {
&.paymentOptionText {
margin: auto 0;
padding-left: 0;
font-weight: 400;
font-weight: 600;
}
}
}
@ -372,7 +372,7 @@ body {
text-align: right;
> img {
width: 20%;
width: 12%;
}
}
}
@ -390,12 +390,14 @@ body {
margin-top: 24px;
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #525656;
}
.disclaimerContainerv2 {
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #525656;
}
}

3
src/constants/error-messages.js
View file

@ -26,7 +26,7 @@ const errorMessages = {
VIN_FORMAT:
"Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
OPTION_REQUIRED: "Please select an option",
RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert",
RECAL_ACK_REQUIRED: "You must agree to the terms to submit",
VEHICLE_REQUIRED: "Please select a vehicle",
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
DATE_REQUIRED: "Please select a date",
@ -37,6 +37,7 @@ const errorMessages = {
MODEL_REQUIRED: "Please select your vehicle model",
STYLE_REQUIRED: "Please select your vehicle style",
PROMO_REQUIRED: "Please enter a promo code",
INSURANCE_COMPANY_REQUIRED: "Please select an insurance company",
};
export { errorMessages };

28
src/constants/progress-bar-mapper.js
View file

@ -1,31 +1,31 @@
export const pageProgressMapper = {
//Combine progress bar slide percent and button steps
vehicle: {
percent: 8,
percent: 5,
step: 1,
},
"vehicle-damage": {
percent: 11,
percent: 9,
step: 1,
},
estimate: {
percent: 18,
percent: 12,
step: 1,
},
"service-zip": {
percent: 22,
percent: 20,
step: 1,
},
"vin-lookup": {
percent: 22,
percent: 15,
step: 1,
},
"license-plate-lookup": {
percent: 22,
percent: 20,
step: 1,
},
"address-lookup": {
percent: 22,
percent: 20,
step: 1,
},
"address-vehicles": {
@ -33,15 +33,15 @@ export const pageProgressMapper = {
step: 1,
},
"part-questions": {
percent: 30,
percent: 15,
step: 1,
},
"molding-questions": {
percent: 30,
percent: 26,
step: 1,
},
"vehicle-parts": {
percent: 30,
percent: 20,
step: 1,
},
"capability-questions": {
@ -49,11 +49,11 @@ export const pageProgressMapper = {
step: 1,
},
quote: {
percent: 62,
percent: 60,
step: 2,
},
"insurance-company": {
percent: 52,
percent: 60,
step: 2,
},
"service-location": {
@ -69,11 +69,11 @@ export const pageProgressMapper = {
step: 3,
},
"customer-details": {
percent: 84,
percent: 85,
step: 3,
},
"payment-method": {
percent: 97,
percent: 98.5,
step: 4,
},
payment: {

21
src/digital-components/modal/modal.vue
View file

@ -2,7 +2,7 @@
<!-- Modal -->
<div
class="modal fade modal-component"
:class="modalId"
:class="[modalId, { 'recall-show': isRecal }]"
v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
:data-bs-backdrop="backdropSetting"
:id="modalId"
@ -11,7 +11,7 @@
@keypress.enter="onEnter"
aria-hidden="true">
<!--Close modal when clicking other than close button-->
<div class="modal-dialog modal-dialog-centered">
<div class="modal-dialog" :class="{ 'modal-dialog-centered': !isRecal }">
<div class="modal-content">
<div class="modal-header mb-0 mt-6">
<label
@ -72,6 +72,10 @@ export default {
onModalClosedCallback: {
type: Function,
},
isRecal: {
type: Boolean,
default: false,
},
},
setup() {
const uuid = uuidv4();
@ -196,6 +200,19 @@ export default {
background-color: $white;
}
&.modal-component {
&.recall-show {
.modal-dialog {
transform: translateX(-50%);
left: 50%;
right: auto;
width: auto;
max-width: 600px;
@include media-breakpoint-up(md) {
top: 10%;
}
}
}
.modal-dialog {
max-width: 767px;
margin: 0 auto;

1
src/digital-components/phone-number-question/phone-number-question.vue
View file

@ -6,6 +6,7 @@
:max-length="12"
v-model="selectedValue"
:mask="mask"
placeholderText="###-###-####"
:isRequired="isRequired"
:validationRules="validationRulesForTextBoxQuestion"
:cmsWidgetName="cmsWidgetName" />

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

@ -9,7 +9,7 @@
v-model="addressModel.streetAddress"
ref="autocomplete"
customInputId="streetAddress"
placeholderText="Search"
placeholderText="Start typing address"
aria-haspopup=""
hasIcon
validationRules="street-address-required"

66
src/fmg-components/cart/cart.vue
View file

@ -3,13 +3,15 @@
<div class="px-0" v-if="isCartReadyToLoad">
<div
class="row vin-toggle flex align-items-center pt-4"
:class="[isExpanded ? 'expanded' : '']"
:class="[
isCollapsible ? (isExpanded ? 'expanded' : '') : 'expanded non-collapsible',
]"
@click="toggleIsExpanded()">
<a
aria-label="expand cart"
href="javascript:void(0)"
class="col d-flex justify-content-between py-0">
<span class="label">{{ OrderDetailsText }}</span>
<span class="label">{{ cartHeaderText }}</span>
<span class="label amount-due larger">
{{ getLineItemAmount(amountDue, showCoverageAsPending) }}
</span>
@ -208,6 +210,7 @@ export default {
isItac: Boolean,
isNoComp: Boolean,
isExpandedOnLoad: Boolean,
isCollapsible: { type: Boolean, default: true },
isMSRFeeApplicable: Boolean,
donationCartItem: Object,
},
@ -1094,9 +1097,19 @@ export default {
amountDueText() {
return this.getCmsContent("AmountDueTextWidget", "Text");
},
OrderDetailsText() {
orderDetailsText() {
return this.getCmsContent("OrderDetailsTextWidget", "Text");
},
estimateDetailsText() {
return this.getCmsContent("EstimateDetailsTextWidget", "Text");
},
cartHeaderText() {
if (!this.isInsurance && this.shouldHideRecalibration) {
return this.estimateDetailsText;
} else {
return this.orderDetailsText;
}
},
amountPaidText() {
return this.getCmsContent("AmountPaidTextWidget", "Text");
},
@ -1182,6 +1195,11 @@ export default {
font-weight: 500;
line-height: 1.625;
}
.non-collapsible {
.amount-due {
display: none;
}
}
.amount-due {
color: $green;
@ -1283,23 +1301,26 @@ export default {
margin-top: 0.5rem;
}
.vin-toggle {
&:after {
content: "";
transition: all 0.5s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
width: 24px;
height: 24px;
display: inline-flex;
position: relative;
right: 0.75rem;
margin: 0.5rem 0 0.5rem 1rem;
cursor: pointer;
}
&.expanded:after {
transform: rotate(180deg);
&:not(.non-collapsible) {
&:after {
content: "";
transition: all 0.5s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
width: 24px;
height: 24px;
display: inline-flex;
position: relative;
right: 0.75rem;
margin: 0.5rem 0 0.5rem 1rem;
cursor: pointer;
}
&.expanded:after {
transform: rotate(180deg);
}
}
&.expanded + .cart-panel {
max-height: 650px;
transition: all 150ms ease-in;
@ -1307,6 +1328,13 @@ export default {
padding: 1rem 0 0.5rem;
visibility: visible;
}
&.non-collapsible {
& > a {
cursor: default;
}
}
a {
font-family: UrbanistSemibold;
text-decoration: none;

3
src/fmg-components/content-group-modal/content-group-modal.vue
View file

@ -3,7 +3,8 @@
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
@footer-button-event="footerButtonClick">
@footer-button-event="footerButtonClick"
:isRecal="isRecal">
<div :class="[isRecal ? 'recal-modal' : '']">
<img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
<h5 class="mb-4" v-html="ModalHeadline"></h5>

29
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -26,16 +26,18 @@
</div>
</div>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
<transition name="fade" mode="out-in">
<alert
v-if="globalAlert.displayAlert"
class="rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlert.messageHeadline"
:manualCopy="globalAlert.messageCopy"
:alertClass="globalAlert.type"
v-bind:isDismissible="globalAlert.isDismissible" />
</transition>
<div class="container d-flex global-alert-wrapper">
<transition name="fade" mode="out-in">
<alert
v-if="globalAlert.displayAlert"
class="rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlert.messageHeadline"
:manualCopy="globalAlert.messageCopy"
:alertClass="globalAlert.type"
v-bind:isDismissible="globalAlert.isDismissible" />
</transition>
</div>
</template>
</template>
@ -257,4 +259,11 @@ export default {
}
}
}
.global-alert-wrapper .alert {
margin: 1rem 0 1.5rem;
@include media-breakpoint-up(md) {
margin-top: 0;
}
}
</style>

13
src/fmg-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -12,12 +12,17 @@
</h5>
</div>
<div
v-if="subText"
v-if="subText && !alignLeft"
class="d-flex align-items-center justify-content-center container-fluid overflow-hidden mt-1">
<p class="text-center small fw-normal sub-text">
<span v-html="subText"></span>
</p>
</div>
<div v-if="subText && alignLeft" class="d-flex overflow-hidden mt-1 mx-0">
<p class="small fw-normal sub-text">
<span v-html="subText"></span>
</p>
</div>
</div>
</template>
@ -33,6 +38,7 @@ export default {
type: String,
default: "dark-header",
},
alignLeft: Boolean,
},
components: {
buttonBack,
@ -62,6 +68,9 @@ export default {
<style lang="scss" scoped>
:deep(.bolded-words) {
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
color: $black;
font-weight: 600;
font-size: 16px;
}
h5 {
line-height: 32px;
@ -81,7 +90,7 @@ h5 {
}
p.small {
color: $gray-550;
color: $gray-600;
}
.sub-text {
margin: 0;

2
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -5,7 +5,7 @@
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
</div>
</div>
<div class="row">

19
src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
View file

@ -1,18 +1,15 @@
<template>
<div class="save-progress-modal-question" :class="isProgressSaved ? 'progress-saved' : ''">
<div
class="save-progress-modal-question"
:class="isProgressSaved ? 'progress-saved' : ''"
v-if="!isProgressSaved">
<buttonMain
type="button"
v-if="!isProgressSaved"
:buttonText="buttonText"
loaderColor="white"
:suppressLoader="true"
class="open-save-progress-button"
@click-event="openModal" />
<alert
class="my-4"
v-else
cmsWidgetName="SaveProgressModalAlertWidget"
alertClass="alert-success" />
<modal
:ref="modalName"
:headerText="modalHeaderText"
@ -31,6 +28,11 @@
</template>
</modal>
</div>
<alert
class="my-4 save-your-progress-alert"
v-else
cmsWidgetName="SaveProgressModalAlertWidget"
alertClass="alert-success" />
</template>
<script>
@ -240,7 +242,9 @@ export default {
}
}
}
}
.save-your-progress-alert {
.alert {
border-radius: $border-radius-lg;
border: 1px solid $green;
@ -251,7 +255,6 @@ export default {
font-weight: 600;
font-size: 1rem;
color: $black;
text-align: left;
padding-left: 1.5rem;
&::before {
position: absolute;

1
src/layouts/address-lookup/customer-questions/customer-questions.spec.js
View file

@ -28,6 +28,5 @@ describe("customerQuestions.vue", () => {
expect(addressQuestions.exists()).toBe(true);
expect(firstName.exists()).toBe(true);
expect(lastName.exists()).toBe(true);
expect(emailAddress.exists()).toBe(true);
});
});

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

@ -23,24 +23,6 @@
autocomplete="family-name" />
</div>
</div>
<div class="row mt-4">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="customerModel.emailOrSms"
ref="emailAddress"
customInputId="emailOrSms"
:isRequired="!isEmailOptional"
:validationRules="EmailOrSmsvalidationRules"
:addOptionalText="isEmailOptional"
autocomplete="email" />
</div>
</div>
<div class="row mb-0">
<div class="col">
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
</div>
</div>
</div>
</template>
@ -51,7 +33,6 @@ 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 "@/digital-components/text-block/text-block";
// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@ -101,7 +82,6 @@ export default {
components: {
addressQuestions,
textboxQuestion,
textBlock,
},
};
</script>

3
src/layouts/confirmation/confirmation.vue
View file

@ -61,14 +61,15 @@
:donationCartItem="donationLineItem"
:showAsPaid="isPia"
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal"
:isInsurance="isInsurance"
:insuranceDeductible="currentDeductible"
:insuranceCompanyName="insuranceCompanyName"
:showInsuranceCoverageAs="showInsuranceCoverageAs"
:shouldHideRecalibration="shouldHideRecalibration"
:isExpandedOnLoad="false"
:isItac="isItac"
:isNoComp="isNoComp"
:isExpandedOnLoad="false"
:isMSRFeeApplicable="isMSRFeeApplicable" />
<hr class="mb-5" />

10
src/layouts/customer-details/customer-details.vue
View file

@ -4,7 +4,10 @@
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="mt-4 mb-5"
alignLeft />
<textboxQuestion
isRequired
class="mb-4"
@ -215,3 +218,8 @@ export default {
},
};
</script>
<style lang="scss">
.form-check {
margin-bottom: 0.5rem;
}
</style>

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

@ -1,35 +1,25 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader class="pb-2" cmsWidgetName="FunnelSubHeaderWidget" />
<div>
<p class="header-copy mb-2 text-md-center" v-html="HeaderText"></p>
<p
class="header-sub-copy mb-5 text-md-center"
v-html="VinLookupQuestionText"></p>
<p class="select-option mb-2" v-html="SelectOptionText"></p>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
:answers="answersFromCms"
groupName="vinLookupMethodOption"
buttonTypeString="listButton"
v-model="selectedVinLookupMethod"
isRequired
validationRules="option-required"
:logDisplayedValuesEvent="true" />
</div>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader
class="pt-4 pb-2"
cmsWidgetName="FunnelSubHeaderWidget"
alignLeft />
<p class="select-option mb-2" v-html="SelectOptionText"></p>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
:answers="answersFromCms"
groupName="vinLookupMethodOption"
buttonTypeString="listButton"
v-model="selectedVinLookupMethod"
isRequired
validationRules="option-required"
:logDisplayedValuesEvent="true" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
@ -37,7 +27,7 @@
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<div class="text-center" v-html="this.VinLookupQuestionFooterText2"></div>
<div class="text-center mb-5" v-html="this.VinLookupQuestionFooterText2"></div>
</div>
</div>
</div>
@ -47,6 +37,7 @@
<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import buttonQuestion from "@/digital-components/button-question/button-question";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
@ -255,6 +246,7 @@ export default {
},
components: {
funnelHeader,
funnelSubHeader,
navbar,
buttonQuestion,
Form,
@ -267,12 +259,25 @@ export default {
.header-copy {
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
}
</style>
<style lang="scss">
.vinlookupquestion p {
font-size: 1.25rem;
}
.header-sub-copy {
font-size: 0.875rem;
}
.funnel-sub-header {
padding-bottom: 0;
h5.dark-header {
margin-bottom: 1rem;
}
.sub-text strong {
text-transform: uppercase;
}
}
.select-an-option {
font-family: UrbanistSemibold;
font-weight: 600;

4
src/layouts/insurance-company/insurance-company-question.vue
View file

@ -1,10 +1,11 @@
<template>
<textboxQuestion
v-model="selectedAccountName"
ref="insuranceCoQuestion"
customInputId="autocomplete"
class="mb-4 mt-5"
cmsWidgetName="InsuranceCoQuestionWidget"
includeSearchIcon />
:validationRules="validationRules" />
</template>
<script>
@ -35,6 +36,7 @@ export default {
props: {
originalList: Array,
modelValue: String,
validationRules: String,
},
data() {
return {

10
src/layouts/insurance-company/insurance-company.vue
View file

@ -5,12 +5,14 @@
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" alignLeft />
<div v-if="originalList.length > 0">
<insurance-company-question
isRequired
v-model="parentAccountNumber"
:originalList="originalList" />
:originalList="originalList"
validationRules="insurance-company-required" />
</div>
<textLink
id="payOnMyOwnBackButton"
@ -55,6 +57,10 @@ import { partNumberStrings } from "@/constants/part-number-strings";
import { deepClone } from "@/helpers/object-helper";
import store from "@/store";
import { flushSaveSessionQueue } from "@/helpers/heritage-integration/order-helper";
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
defineRule("insurance-company-required", required(errorMessages.INSURANCE_COMPANY_REQUIRED));
export default {
name: "insurance-company",

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

@ -22,16 +22,6 @@
mask="#####"
validationRules="registration-zip-required|zip-format" />
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailOrSms"
customInputId="emailOrSms"
:isRequired="!IsEmailOptional"
:validationRules="EmailOrSmsValidationRules"
:addOptionalText="IsEmailOptional" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<alert
v-if="displayInvalidZipAlert"
class="my-3"
@ -100,7 +90,6 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -459,7 +448,6 @@ export default {
funnelSubHeader,
textboxQuestion,
alert,
textBlock,
Form,
},
};

6
src/layouts/mobile-details/mobile-address-questions/mobile-address-questions.vue
View file

@ -43,8 +43,8 @@
</div>
</transition>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite">
<div class="col-8">
<div class="mb-4" aria-live="polite">
<div class="col mb-4">
<dropdownQuestion
customDropdownId="state"
cmsWidgetName="StateQuestionWidget"
@ -56,7 +56,7 @@
:labelBold="labelBold"
:isDisabled="this.isStateDisabled" />
</div>
<div class="col-4">
<div class="col">
<textboxQuestion
customInputId="zipCode"
cmsWidgetName="ZipQuestionWidget"

6
src/layouts/mobile-details/mobile-details.spec.js
View file

@ -67,7 +67,7 @@ beforeEach(() => {
describe("mobile-details.vue", () => {
test("if the continue button is clicked, navigate forward", async () => {
// Arrange
const { wrapper } = setupMocks(mobileDetails, {
const { wrapper } = setupMocks({
mixins: [mockMixin],
attachTo: document.body,
});
@ -91,7 +91,7 @@ describe("mobile-details.vue", () => {
});
test("arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks(mobileDetails, {
const { wrapper } = setupMocks({
mixins: [mockMixin],
attachTo: document.body,
});
@ -105,7 +105,7 @@ describe("mobile-details.vue", () => {
test("if the back button is clicked, navigate back", async () => {
// Arrange
const { wrapper } = setupMocks(mobileDetails, {
const { wrapper } = setupMocks({
mixins: [mockMixin],
attachTo: document.body,
});

66
src/layouts/mobile-details/mobile-details.vue
View file

@ -7,11 +7,26 @@
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<hr class="my-3" />
<textBlock cmsWidgetName="AppointmentTimeOfService" class="time-header" />
<div class="date-time-edit">
<textBlock cmsWidgetName="AppointmentTimeOfService" class="time-header" />
<textLink
linkType="navigation"
:text="editLink"
@click-event="linkClick"
href="javascript:void(0)"
data-bs-target="#footerModal"
data-bs-dismiss="modal" />
</div>
<textBlock cmsWidgetName="AppointmentDateAndTime" />
<hr class="my-3" />
<div class="mobile-location-questions">
<div class="address-questions-container">
<textBlock
cmsWidgetName="PleaseProvideAddressWidget"
class="provide-address-header" />
<textBlock
cmsWidgetName="VehicleKeysMessageWidget"
class="keys-message" />
<mobileAddressQuestions
ref="addressQuestions"
v-model="this.addressQuestions"
@ -56,6 +71,8 @@ import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import textLink from "@/ux-components/text-link/text-link";
import analyticsMixin from "@/mixins/analytics-mixin";
export default {
name: "MobileDetails",
data() {
@ -142,6 +159,17 @@ export default {
this.pageName
);
},
linkClick() {
// check session expired and initSession to recreate cookies
if (analyticsMixin.methods.sessionExpired()) {
this.routeReturnUser();
} else {
this.backButtonAction();
}
},
routeReturnUser() {
this.$router.sendToReturnUser();
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
@ -156,6 +184,9 @@ export default {
AppointmentTimeOfService() {
return this.getCmsContent("AppointmentDateAndTime", "Text");
},
editLink() {
return this.getCmsContent("EditLinkWidget", "Text");
},
},
components: {
mobileAddressQuestions,
@ -166,6 +197,7 @@ export default {
funnelSubHeader,
Form,
loadingModal,
textLink,
},
};
</script>
@ -175,5 +207,37 @@ export default {
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
font-weight: 600;
color: $black;
margin-top: 0;
}
.provide-address-header {
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
font-weight: 600;
color: $black;
line-height: 1.625rem;
letter-spacing: 0.03rem;
}
.keys-message {
background-color: #fff5eb;
color: #4d5151;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0.5rem 1rem 0.5rem 1rem;
min-height: 3.656rem;
line-height: 1.625rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border-radius: 5px;
letter-spacing: 0;
}
.date-time-edit {
display: flex;
justify-content: space-between;
}
:deep(span.unbolded-text) {
font-weight: 400;
color: $gray-600;
font-family: UrbanistRegular;
}
</style>

1
src/layouts/payment-method/payment-method-question/payment-method-question.vue
View file

@ -95,6 +95,7 @@ export default {
.question-text span {
text-align: left;
line-height: 24px;
font-weight: 600;
}
}
</style>

82
src/layouts/payment-method/payment-method.vue
View file

@ -5,7 +5,7 @@
<div class="container payment-method">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
<hr class="my-0" />
@ -60,14 +60,30 @@
class="service-questions" />
<textBlock cmsWidgetName="CallOrTextWidget" justifyText="left" />
<hr class="my-5" />
<div class="d-flex flex-row checkbox-group">
<checkboxQuestion
cmsWidgetName="RecalConfirmWidget"
class="mb-3"
isRequired="true"
<div class="d-flex flex-column checkbox-group">
<Field
name="recalAckOptIn"
:rules="'recal-ack-required'"
v-model="isRecalAckOptIn"
validationRules="recal-ack-required"
@text-link-clicked="openModal('RecalModal')" />
v-slot="{ meta, errors }">
<checkboxQuestion
cmsWidgetName="RecalConfirmWidget"
class="mb-3"
isRequired="true"
v-model="isRecalAckOptIn"
validationRules="recal-ack-required"
checkboxName="recalAckOptIn"
:class="{ 'is-invalid': meta.touched && errors.length > 0 }"
@text-link-clicked="openModal('RecalModal')" />
</Field>
<div id="form-test-error" class="row form-test-error">
<error-message
role="comment"
aria-atomic="true"
aria-live="polite"
class="small mt-1 text-danger d-block"
:name="'recalAckOptIn'"></error-message>
</div>
</div>
</div>
@ -90,7 +106,8 @@
<contentGroupModal
ref="RecalModal"
cmsWidgetName="RecalModal"
class="recal-modal" />
class="recal-modal"
isRecal />
</div>
</div>
</div>
@ -158,6 +175,8 @@ import {
} from "@/helpers/pricing-helper.js";
import { consumeQueryFromStash } from "@/router/methods/helpers/querystring-stash";
import { debugLog } from "@/helpers/debug-log-helper";
import { ErrorMessage } from "vee-validate";
import { Field } from "vee-validate";
defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
@ -733,15 +752,15 @@ export default {
customCtaCopy() {
switch (this.paymentMethod) {
case paymentMethods.PAY_NOW:
return "Continue to checkout";
return "Continue"; // Before Heritage Parity it was "Continue to checkout"
case paymentMethods.INSURANCE:
return "Continue to insurance";
return "Continue"; // Before Heritage Parity it was "Continue to insurance"
case paymentMethods.CREDIT_CARD:
return "Continue to checkout";
return "Continue"; // Before Heritage Parity it was "Continue to checkout"
case paymentMethods.PAYPAL:
return "Continue to Paypal";
return "Continue"; // Before Heritage Parity it was "Continue to Paypal"
case paymentMethods.AFTERPAY:
return "Continue to Afterpay";
return "Continue"; // Before Heritage Parity it was "Continue to Afterpay"
default:
return null;
}
@ -845,6 +864,7 @@ export default {
navbar,
funnelSubHeader,
Form,
Field,
loadingModal,
cart,
alert,
@ -854,6 +874,7 @@ export default {
checkboxQuestion,
contentGroupModal,
afterpayBreakout,
ErrorMessage,
},
};
</script>
@ -877,6 +898,17 @@ export default {
> * {
margin-top: 0;
}
:deep(.form-check-input:invalid),
:deep(.form-check-input[aria-invalid="true"]),
:deep(.is-invalid .form-check-input) {
border-color: $danger;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
:deep(.is-invalid .form-check-label) {
color: $danger;
}
}
.questions-about-service {
.service-questions {
@ -901,17 +933,31 @@ export default {
:deep(.modal-body) {
display: flex;
flex-direction: column;
overflow: visible !important;
p.subheader-text {
color: $red;
order: 1 !important;
margin-top: -2.25rem;
}
h5 {
text-align: center;
order: 1;
text-align: left !important;
order: 2 !important;
}
p {
order: 3;
order: 4;
}
img {
order: 2;
order: 3 !important;
}
}
}
}
:deep(span.label) {
font-weight: 600;
}
:deep(div.service-questions span) {
color: $black;
font-family: UrbanistSemibold;
}
</style>

29
src/layouts/payment-method/review-dropdown/review-dropdown.vue
View file

@ -15,6 +15,31 @@
<div v-html="apptWordingText" v-show="!isExpanded"></div>
<div class="review-table px-4">
<serviceLocationReview
class="service-location"
cmsWidgetName="ServiceLocationTitleWidget"
:serviceLocation="serviceLocationInfo" />
<hr class="my-0" />
<scheduleReview cmsWidgetName="ScheduleWidget" :appointmentType="appointmentType" />
<hr class="my-0" />
<vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
<hr class="my-0" />
<damageReview
cmsWidgetName="DamageReviewWidget"
damageLocationsWidgetName="DamageLocationsWidget"
:damage="damageInfo" />
<hr class="my-0" />
<customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />
<!-- the following was the order prior to Heritage parity
<vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
<hr class="my-0" />
@ -48,6 +73,7 @@
<hr class="my-0" />
<customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />
-->
</div>
</div>
</template>
@ -119,9 +145,8 @@ export default {
customerReview,
damageReview,
scheduleReview,
serviceLocationReview,
servicePackageReview,
vehicleReview,
serviceLocationReview,
},
};
</script>

1
src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.spec.js
View file

@ -82,7 +82,6 @@ describe("Customer Review Block", () => {
// Assert
expect(wrapper.vm.displayContent).toEqual([
testConstants.displayContent.fullName,
testConstants.displayContent.emailAddress,
testConstants.displayContent.phoneNumber,
testConstants.displayContent.smsOptIn,

3
src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.vue
View file

@ -21,7 +21,8 @@ export default {
},
computed: {
displayContent() {
return [this.fullName, this.email, this.phoneNumber, this.smsOptIn];
return [this.email, this.phoneNumber, this.smsOptIn];
// return [this.fullName, this.email, this.phoneNumber, this.smsOptIn]; // prior to Heritage parity
},
header() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText");

124
src/layouts/payment/payment.vue
View file

@ -4,7 +4,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<div class="col-12">
<div>
<alert
ref="piaCCErrorAlert"
@ -37,45 +37,51 @@
seamless
scrolling="no"
allow="payment *; microphone *; geolocation *;"></iframe>
<div id="cart-container">
<cart
ref="cart"
:damage="damageInfo"
:availableVaps="availableVaps"
:allowItemRemoval="false"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal"
:isInsurance="isInsurance"
:insuranceDeductible="currentDeductible"
:insuranceCompanyName="insuranceCompanyName"
:showInsuranceCoverageAs="showInsuranceCoverageAs"
:isItac="isItac"
:isNoComp="isNoComp"
:isCollapsible="false" />
<button
v-if="showSwitchPaymentMethod"
id="submit-payment"
class="btn btn-primary rounded-pill py-3 px-6 delay w-100"
type="button"
@click="submitPayment">
Submit payment
</button>
<div class="payment-method-question">
<buttonQuestion
v-if="showSwitchPaymentMethod"
groupName="payment-method"
buttonTypeString="payment-method-list-button"
:buttonTypeObject="paymentMethodListButton"
isWide
:questionText="paymentMethodQuestionText"
:answers="paymentMethodAnswerData"
isRequired
:validationRules="validationRules"
:showApplePay="false"
:isInsurance="isInsurance"
v-model="switchedPaymentMethod" />
</div>
</div>
</div>
<hr />
<cart
ref="cart"
:damage="damageInfo"
:availableVaps="availableVaps"
:allowItemRemoval="false"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal"
:isInsurance="isInsurance"
:insuranceDeductible="currentDeductible"
:insuranceCompanyName="insuranceCompanyName"
:showInsuranceCoverageAs="showInsuranceCoverageAs"
:isItac="isItac"
:isNoComp="isNoComp"
:isExpandedOnLoad="true" />
<div class="payment-method-question">
<buttonQuestion
v-if="showSwitchPaymentMethod"
groupName="payment-method"
buttonTypeString="payment-method-list-button"
:buttonTypeObject="paymentMethodListButton"
isWide
:questionText="paymentMethodQuestionText"
:answers="paymentMethodAnswerData"
isRequired
:validationRules="validationRules"
:showApplePay="false"
:isInsurance="isInsurance"
v-model="switchedPaymentMethod"
textPosition="text-start" />
</div>
<hr class="mb-5" />
<navbar
cmsWidgetName="FunnelFooterWidget"
isForwardActionDisabled="true"
@ -889,6 +895,12 @@ export default {
}
return false;
},
submitPayment() {
const iframe = this.$refs.paymentFrame;
if (iframe) {
iframe.contentWindow.postMessage("submitPayment", "*");
}
},
},
components: {
funnelHeader,
@ -904,18 +916,46 @@ export default {
<style lang="scss">
.hop-iframe {
position: relative;
min-height: 650px;
width: 100%;
min-height: 650px;
border: 0 none;
}
#pageLoadingModal {
background-color: red;
}
#card-container {
display: flex;
& > iframe {
flex-basis: 55%;
margin-right: 9%;
}
& > #cart-container {
flex-basis: 36%;
margin-top: 2rem;
}
@include media-breakpoint-down(lg) {
flex-direction: column;
& > iframe {
flex-basis: auto;
margin-right: 0;
}
& > #cart-container {
flex-basis: auto;
margin: 0 0.5rem;
& > button#submit-payment {
display: none;
}
}
}
}
.payment-method-question {
padding: 0 1.5rem;
.question-text span {
text-align: left;
padding: 0;
& .list-button-content {
justify-content: center;
}
}

5
src/layouts/quote/quote.spec.js
View file

@ -10,6 +10,7 @@ import { experimentSettings } from "@/constants/experiments";
import experimentMixin from "@/mixins/experiment-mixin.js";
import baseMixin from "@/mixins/base-mixin.js";
import { containsLineItemWithPartType } from "../../helpers/service-package-helper";
import { savePageData } from "../../router/methods/helpers/save-page-data";
jest.mock("@/store", () => ({
commit: jest.fn(), // Mock store.commit
@ -90,6 +91,10 @@ jest.mock("@/mixins/base-mixin", () => ({
},
}));
jest.mock("@/router/methods/helpers/save-page-data", () => ({
savePageData: jest.fn(),
}));
const mockExperimentSettings = experimentSettings;
jest.mock("@/mixins/experiment-mixin.js", () => ({

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

@ -71,7 +71,7 @@
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" isRecal />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
<navbar
cmsWidgetName="FunnelFooterWidget"
@ -673,14 +673,12 @@ export default {
async closeSaveProgressPopup() {
this.showSaveProgressPopup = false;
savePageData(this.pageName, { saveProgressPopupSkipped: true }, true);
if (this.skipToInsurance) {
// skip ahead now if in IGQ skip experiment
await this.skip(true, externalParamPackageLabels.GLASS_ONLY);
}
},
forwardButtonAction() {
async forwardButtonAction() {
this.dispatchStoreAction(
this.storeActions.SAVE_PAYMENT_TYPE,
this.isInsuranceSelected,
@ -751,6 +749,8 @@ export default {
false
);
await savePageData(this.pageName, { saveProgressPopupSkipped: true }, true);
const payment = this.$store.getters.payment;
if (payment.isInsurance) {
this.$router.navigateWithSaving(
@ -901,6 +901,7 @@ export default {
// Unique to quote page for 2.0/Heritage parity
.quote {
padding-bottom: 2rem;
:deep(.nav-bar) {
position: initial;
button {
@ -911,9 +912,6 @@ export default {
position: absolute;
left: 1rem;
bottom: 1rem;
@include media-breakpoint-up(lg) {
left: 6rem;
}
}
.col-auto {
width: -webkit-fill-available;

3
src/layouts/return-user/return-user.vue
View file

@ -105,6 +105,7 @@ export default {
<style lang="scss" scoped>
.start-over {
text-align: center;
margin-bottom: 1.5rem;
a {
font-weight: 600;
color: $black;
@ -114,7 +115,7 @@ export default {
}
.return-user {
.return-user-spacing {
margin-top: 14rem;
margin-top: 8rem;
}
}
:deep(.menu-modal-container) {

7
src/layouts/schedule/schedule.vue
View file

@ -1238,7 +1238,9 @@ export default {
return store.getters.lineItems.supportingItems;
},
updateFooterButtonText(timeSlotInfo) {
let navbarButtonText;
let navbarButtonText = "Continue";
// Archiving the following in case we revert back from Heritage parity
/*
if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
navbarButtonText = "Continue";
} else {
@ -1273,6 +1275,7 @@ export default {
)}`;
}
}
*/
this.$refs.navbar.updateButtonText(navbarButtonText);
},
convertSelectedDateToShortMonthAndDay(selectedDate) {
@ -1618,7 +1621,7 @@ export default {
},
};
} else if (
!this.selectedProvider?.address?.streetAddress &&
(!this.selectedProvider?.address?.streetAddress || this.isVehicleHeavyTruck) &&
this.shopProviderData?.shopProviders?.length
) {
this.selectedProvider = this.shopProviderData.shopProviders[0];

60
src/layouts/service-location/shop-question/shop-question-popup.vue
View file

@ -12,6 +12,7 @@
</transition>
<modal
ref="shopQuestionModal"
class="shop-question-popup"
:headerText="modalHeaderText"
:onModalOpenedCallback="updateSelectedAnswer"
:onModalClosedCallback="resetZipCodeData"
@ -48,7 +49,13 @@
cmsWidgetName="AlertNoShopsWidget"
v-if="displayNoShopsAlert"
alertClass="alert-warning" />
<div v-if="!displayInvalidZipAlert">
<alert
ref="alertNoShops"
class="my-5"
cmsWidgetName="AlertNoServiceWidget"
v-if="displayNoServiceAlert"
alertClass="alert-danger" />
<div v-if="displayShopsList">
<buttonQuestion
ref="buttonQuestion"
buttonTypeString="shopListButton"
@ -116,6 +123,7 @@ export default {
localSelectedProviderNumber: null,
zipCodeData: null,
isLoading: false,
displayNoServiceAlert: false,
};
},
props: {
@ -148,6 +156,9 @@ export default {
displayNoShopsAlert() {
return !this.shopProviders.length && !this.displayInvalidZipAlert;
},
displayShopsList() {
return !this.displayInvalidZipAlert && !this.displayNoServiceAlert;
},
modal() {
return this.$refs.shopQuestionModal;
},
@ -170,6 +181,7 @@ export default {
this.isLoading ||
this.displayInvalidZipAlert ||
this.displayNoShopsAlert ||
this.displayNoServiceAlert ||
!this.localSelectedProviderNumber
);
},
@ -199,6 +211,7 @@ export default {
openModal() {
// Reset local state from parent
this.zipCodeData = null;
this.displayNoServiceAlert = false;
this.localShopProviderData = this.shopProviderDataFromParent;
this.localZipCode = this.zipCodeFromParent;
// This will be set once the modal is open (updateSelectedAnswer()) to ensure that the
@ -258,6 +271,7 @@ export default {
},
async onSearchZip(event) {
event.preventDefault();
this.displayNoServiceAlert = false;
if (!this.localZipCode) {
this.zipCodeData = {
isValid: false,
@ -265,30 +279,31 @@ export default {
return;
}
this.isLoading = true;
this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
// Add zipCode to zipCodeData as it does not come back from endpoint
this.zipCodeData.zipCode = this.localZipCode;
if (this.zipCodeData.isValid) {
if (this.isVehicleHeavyTruck) {
if (this.$store.getters.order.vehicle?.isBigTruck) {
// check the location endpoint to verify this zip can service a heavy truck
const closestShops = await getClosestApplicableShops(
this.localZipCode,
this.carId,
this.$store.getters.order.vehicle.carId,
"service-location"
);
if (!closestShops || closestShops.inShopProviders?.length === 0) {
// We need an alert for heavy trucks
if (!closestShops || closestShops.providers?.length === 0) {
this.isLoading = false;
this.displayNoServiceAlert = true;
return null;
}
} else {
getShopProviderData(this.localZipCode).then(async (result) => {
this.localShopProviderData = result.data;
this.numberOfShopsToDisplay = 3;
this.updateShopsForZip();
this.isLoading = false;
});
}
getShopProviderData(this.localZipCode).then(async (result) => {
this.localShopProviderData = result.data;
this.numberOfShopsToDisplay = 3;
this.updateShopsForZip();
this.isLoading = false;
});
} else {
this.isLoading = false;
}
@ -378,6 +393,25 @@ export default {
.modal.modal-component .modal-dialog .modal-content .modal-body .textbox-question {
padding: 0;
}
.modal.shop-question-popup .btn.btn-primary {
background: $blue;
&:focus,
&:focus-visible {
box-shadow:
0 0 0 3px,
0 0 0 5.5px $blue;
}
&.form-test-invalid {
background: #d4d6d8;
&:focus,
&:focus-visible {
box-shadow: none;
}
}
}
.shop-question-zipcode {
display: flex;
flex-direction: row;

13
src/layouts/service-zip/service-zip.vue
View file

@ -16,17 +16,6 @@
isRequired
validationRules="zip-required|zip-format" />
<textboxQuestion
class="mb-0"
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailOrSms"
inputId="emailOrSms"
:isRequired="!IsEmailOptional"
disableAutoFill
:validationRules="EmailOrSmsValidationRules"
:addOptionalText="IsEmailOptional" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
@ -71,7 +60,6 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import buttonQuestion from "@/digital-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import textBlock from "@/digital-components/text-block/text-block";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
//Supporting Files
@ -348,7 +336,6 @@ export default {
Form,
alert,
textboxQuestion,
textBlock,
loadingModal,
},
};

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

@ -238,6 +238,9 @@ export default {
</script>
<style lang="scss">
html .has-error.list-card:hover {
border-radius: 50rem;
}
.vehicle-parts {
label {
&.list-card {

64
src/layouts/vehicle/vehicle.vue
View file

@ -4,7 +4,10 @@
<div class="container vehicle">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="siteSubHeader"
:alignLeft="true" />
<vehicleQuestion
ref="vehicleYearQuestion"
v-model="selectedYear"
@ -483,6 +486,37 @@ export default {
},
async forwardButtonAction() {
await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_STATE);
let zipCodeData;
if (this.isBigTruck) {
zipCodeData = await this.getZipCodeData(this.serviceZipCode);
// check the location endpoint to verify this zip can service a heavy truck
var closestShops = await this.dispatchStoreActionWithLogging(
storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
{ zip: this.serviceZipCode, carId: this.carId },
"vehicle"
);
if (!closestShops?.data?.providers || closestShops.data.providers.length === 0) {
this.displayNoServiceAlert = true;
if (store.getters.externalParameterState?.isExternalParameter) {
return baseMixin.methods.ResetExternalParamsAndHideModal();
}
return this.$refs.navbar.removeLoader();
}
}
if (zipCodeData) {
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: zipCodeData.state,
zipCodeCtu: zipCodeData.zipCodeCtu,
},
false
);
}
this.dispatchStoreAction(
storeActions.SAVE_VEHICLE,
{
@ -503,34 +537,6 @@ export default {
false
);
if (this.isBigTruck) {
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: zipCodeData.state,
zipCodeCtu: zipCodeData.zipCodeCtu,
},
false
);
// check the location endpoint to verify this zip can service a heavy truck
var closestShops = await this.dispatchStoreActionWithLogging(
storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
{ zip: this.serviceZipCode, carId: this.carId },
"vehicle"
);
if (!closestShops || closestShops.data?.inShopProviders?.length === 0) {
this.displayNoServiceAlert = true;
if (store.getters.externalParameterState?.isExternalParameter) {
return baseMixin.methods.ResetExternalParamsAndHideModal();
}
return this.$refs.navbar.removeLoader();
}
}
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName

1
src/layouts/vin-lookup/vin-information/vin-information.vue
View file

@ -55,6 +55,7 @@ export default {
}
a {
font-size: 0.875rem;
text-decoration: none;
}
.vin-toggle {
display: inline-flex;

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

@ -40,16 +40,6 @@
isRequired
validationRules="zip-required|zip-format" />
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailOrSms"
customInputId="emailOrSms"
:isRequired="!IsEmailOptional"
:validationRules="EmailOrSmsValidationRules"
:addOptionalText="IsEmailOptional" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
@ -135,7 +125,6 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
import textBlock from "@/digital-components/text-block/text-block";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
// Supporting files
@ -590,7 +579,6 @@ export default {
textboxQuestion,
alert,
vinInformation,
textBlock,
Form,
loadingModal,
},

2
src/store/index.js
View file

@ -695,6 +695,7 @@ export const mutations = {
vehicleSubType: sessionInformation.order.vehicle?.vehicleSubType,
vehicleSpecialClass: sessionInformation.order.vehicle?.vehicleSpecialClass,
isBigTruck: sessionInformation.order.vehicle?.isBigTruck,
canSafeliteService: sessionInformation.order.vehicle?.canSafeliteService,
});
state.order.damage.glassToReplace = sessionInformation.order.damage.glassToReplace;
@ -2277,6 +2278,7 @@ export const actions = {
vehicleSubType: vehicle.vehicleSubType,
vehicleSpecialClass: vehicle.vehicleSpecialClass,
isBigTruck: vehicle.isBigTruck,
canSafeliteService: vehicle.canSafeliteService,
registration: {
firstName: vehicle.registration.firstName,
lastName: vehicle.registration.lastName,

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

@ -13,6 +13,7 @@ html {
&:hover {
@include box-shadow-hover($red-200);
z-index: 5;
border-radius: 50rem;
}
input[type="radio"]:focus + .list-button-content {
@ -133,6 +134,7 @@ html {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%23d4281c'/%3E%3C/svg%3E%0A");
border: 1px solid $red;
border-left: none;
border-radius: 0 0.5rem 0.5rem 0;
}
}
}

10
src/styles/shared-input-button-styles.scss
View file

@ -4,26 +4,22 @@
cursor: pointer;
&.list-button,
&.list-button-horizontal,
&.list-card {
&.list-button-horizontal {
&:not(.selected) {
position: relative;
z-index: 5;
@include box-shadow-hover($blue-300);
border-radius: 50rem;
border-radius: $border-radius-pill;
}
}
}
}
}
.base-input-button {
&:not(.has-error):hover {
cursor: pointer;
&.list-button,
&.list-button-horizontal,
&.list-card {
&.list-button-horizontal {
&:not(.selected) {
position: relative;
z-index: 5;

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

@ -145,6 +145,8 @@ export default {
<style lang="scss">
.alert {
padding: 0.675rem 0;
border-radius: 0.5rem;
border-width: 0px;
button {
display: none;