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

Merge branch 'develop' into feature/SSR-683

Browse source
This commit is contained in:
Katie Kroell 2024-04-24 14:47:34 -04:00
commit 4a3b41e241
7 changed files with 168 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -141,7 +141,7 @@ export default {
color: $black; color: $black;
} }
.modal-header { .modal-header {
padding: 1rem 0 0.5rem 0; padding: 1.5rem 0 0.5rem 0;
border-bottom: none; border-bottom: none;
.btn-close { .btn-close {
position: absolute; position: absolute;
@ -149,7 +149,6 @@ export default {
top: 1rem; top: 1rem;
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.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A"); 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.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
opacity: 1; opacity: 1;
margin: 0.3rem -0.5rem -0.5rem auto;
} }
.modal-title { .modal-title {

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

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="subheader-primary d-flex align-items-center justify-content-center container-fluid overflow-hidden"> class="subheader-primary d-flex align-items-center justify-content-center overflow-hidden">
<h5 <h5
class="text-center fw-normal mb-0 subheader-primary" class="text-center fw-normal mb-0 subheader-primary"
:class="headerColor"> :class="headerColor">
@ -15,7 +15,7 @@
</h5> </h5>
</div> </div>
<div <div
class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden" class="subheader-secondary d-flex align-items-center overflow-hidden"
:class="[justifySubheader, subHeaderClasses]"> :class="[justifySubheader, subHeaderClasses]">
<p <p
class="fw-normal mb-0" class="fw-normal mb-0"
@ -33,7 +33,7 @@ import {
splitCopyOnCMSPlaceHolder, splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy, getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy, getRouterLinkDisplayTextFromCopy,
getRouterLinkHtmlStringFromCopy getRouterLinkHtmlStringFromCopy,
} from '@/helpers/cms-content-helper'; } from '@/helpers/cms-content-helper';
import { stripRteStyle } from '@/helpers/text-helper'; import { stripRteStyle } from '@/helpers/text-helper';
@ -51,12 +51,15 @@ export default {
stripRteStyle: Boolean, stripRteStyle: Boolean,
subContentProperty: String, subContentProperty: String,
subHeaderClasses: String, subHeaderClasses: String,
subTextClasses: String subTextClasses: String,
}, },
emits: ['click-event'], emits: ['click-event'],
computed: { computed: {
content() { content() {
return this.getCmsContent(this.cmsWidgetName, this.contentProperty ?? 'SubHeaderText'); return this.getCmsContent(
this.cmsWidgetName,
this.contentProperty ?? 'SubHeaderText'
);
}, },
subText() { subText() {
let subTextFromCms = this.getCmsContent( let subTextFromCms = this.getCmsContent(
@ -84,7 +87,10 @@ export default {
return subText ?? ''; return subText ?? '';
}, },
backButtonAccessibleText() { backButtonAccessibleText() {
return this.getCmsContent(this.cmsWidgetName, 'BackButtonAccessibleText'); return this.getCmsContent(
this.cmsWidgetName,
'BackButtonAccessibleText'
);
}, },
headerColor() { headerColor() {
return this.subText ? 'dark-header' : 'light-header'; return this.subText ? 'dark-header' : 'light-header';
@ -97,10 +103,10 @@ export default {
alternateFormatting() { alternateFormatting() {
// override for service-packages unique style // override for service-packages unique style
if (this.issContainingPage?.toLowerCase() === 'service-packages') { if (this.issContainingPage?.toLowerCase() === 'service-packages') {
return 'service-packages-subtext mt-4 mb-2 px-5'; return 'service-packages-subtext mt-4 mb-4 px-5';
} }
return this.darkGraySubText ? 'dark-gray' : 'light-gray'; return this.darkGraySubText ? 'dark-gray' : 'light-gray';
} },
}, },
methods: { methods: {
doesCopyContainRouterLink, doesCopyContainRouterLink,
@ -110,8 +116,8 @@ export default {
getRouterLinkHtmlStringFromCopy, getRouterLinkHtmlStringFromCopy,
clickEvent() { clickEvent() {
this.$emit('click-event'); this.$emit('click-event');
} },
} },
}; };
</script> </script>

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

@ -79,7 +79,6 @@ import alert from '@/ux-components/alert/alert.vue';
// Supporting Items // Supporting Items
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
import { experimentSettings } from '@/constants/experiments';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { paymentMethods } from '@/constants/payment-method-constants'; import { paymentMethods } from '@/constants/payment-method-constants';
import queryStrings from '@/constants/query-strings'; import queryStrings from '@/constants/query-strings';
@ -102,7 +101,7 @@ export default {
cartDropdown, cartDropdown,
paymentMethodQuestion, paymentMethodQuestion,
alert, alert,
VehicleBanner, VehicleBanner
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -115,20 +114,20 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, },
{ {
resultKey: 'reviewDropdownData', resultKey: 'reviewDropdownData',
promise: reviewDropdownPromise, promise: reviewDropdownPromise
}, },
{ {
resultKey: 'wipers', resultKey: 'wipers',
promise: wipersPromise, promise: wipersPromise
}, },
{ {
resultKey: 'rainDefense', resultKey: 'rainDefense',
promise: rainDefensePromise, promise: rainDefensePromise
}, }
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -141,12 +140,10 @@ export default {
const pricedVaps = await useMainStore() const pricedVaps = await useMainStore()
.getPriceOrderItems(unpricedVaps) .getPriceOrderItems(unpricedVaps)
.catch((err) => { .catch((err) => {
useMainStore().setBailout( useMainStore().setBailout(bailoutMessage.pricingResponseError(
bailoutMessage.pricingResponseError( unpricedVaps.map((li) => li.partNumber),
unpricedVaps.map((li) => li.partNumber), { code: err.code, message: err.message, data: err.data }
{ code: err.code, message: err.message, data: err.data } ));
)
);
hasBailedOut = true; hasBailedOut = true;
next(`/?issPage=${issPageValues.BAILOUT_PAGE}`); next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
}); });
@ -155,9 +152,7 @@ export default {
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.updateFooterButtonText(vm.customCallToActionButtonCopy); vm.updateFooterButtonText(vm.customCallToActionButtonCopy);
vm.$refs.reviewDropdown.initializeComponent( vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
resultMap.reviewDropdownData
);
vm.storeAvailableVaps(pricedVaps ?? []); vm.storeAvailableVaps(pricedVaps ?? []);
}); });
} }
@ -166,8 +161,8 @@ export default {
return { return {
paymentMethodInternalModel: this.getPaymentMethodFromStore(), paymentMethodInternalModel: this.getPaymentMethodFromStore(),
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED, optionRequired: globalRules.OPTION_REQUIRED
}, }
}; };
}, },
computed: { computed: {
@ -191,61 +186,61 @@ export default {
}, },
paymentMethod() { paymentMethod() {
return this.paymentMethodInternalModel; return this.paymentMethodInternalModel;
}, }
}, },
watch: { watch: {
customCallToActionButtonCopy(newValue) { customCallToActionButtonCopy(newValue) {
this.updateFooterButtonText(newValue); this.updateFooterButtonText(newValue);
}, }
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
// Vehicle // Vehicle
const { vehicle } = useMainStore().order; const { vehicle } = useMainStore().order;
const vehicleReqs = !!( const vehicleReqs = !!(
vehicle.year && vehicle.year
vehicle.make && && vehicle.make
vehicle.model && && vehicle.model
vehicle.style && vehicle.style
); );
// Damage // Damage
const { isRepair, numberOfChips, glassToReplace } = const { isRepair, numberOfChips, glassToReplace } =
useMainStore().order.damage; useMainStore().order.damage;
const damageReqs = !!( const damageReqs = !!(
(isRepair && numberOfChips) || (isRepair && numberOfChips)
(!isRepair && glassToReplace?.length) || (!isRepair && glassToReplace?.length)
); );
// Service Package // Service Package
const { lineItems } = useMainStore().order; const { lineItems } = useMainStore().order;
const packageReqs = !!( const packageReqs = !!(
(isRepair || lineItems.glassParts) && (isRepair || lineItems.glassParts)
lineItems.supportingItems && lineItems.supportingItems
); );
// Service Location // Service Location
const { serviceLocation } = useMainStore().order; const { serviceLocation } = useMainStore().order;
const mobileReqs = !!( const mobileReqs = !!(
serviceLocation.address && serviceLocation.address
serviceLocation.city && && serviceLocation.city
serviceLocation.state && && serviceLocation.state
serviceLocation.zipCode && serviceLocation.zipCode
); );
const providerLocation = serviceLocation.provider.address; const providerLocation = serviceLocation.provider.address;
const dropOffInshopReqs = !!( const dropOffInshopReqs = !!(
providerLocation.streetAddress && providerLocation.streetAddress
providerLocation.city && && providerLocation.city
providerLocation.state && && providerLocation.state
providerLocation.zipCode && providerLocation.zipCode
); );
const isMobile = const isMobile =
serviceLocation.appointmentType === serviceLocation.appointmentType
AppointmentTypeStrings.MOBILE || === AppointmentTypeStrings.MOBILE
serviceLocation.appointmentType === || serviceLocation.appointmentType
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
const serviceLocationReqs = const serviceLocationReqs =
(isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs); (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
@ -253,11 +248,11 @@ export default {
const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } = const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } =
useMainStore().order.schedule; useMainStore().order.schedule;
const scheduleReqs = !!( const scheduleReqs = !!(
date && date
startTime && && startTime
endTime && && endTime
jobMaxMinutes && && jobMaxMinutes
jobMinMinutes && jobMinMinutes
); );
// Customer // Customer
@ -268,27 +263,27 @@ export default {
// Contact Info // Contact Info
const { contactInfo } = useMainStore().order; const { contactInfo } = useMainStore().order;
const contactInfoReqs = !!( const contactInfoReqs = !!(
contactInfo.firstName && contactInfo.firstName
contactInfo.lastName && && contactInfo.lastName
contactInfo.servicePhone && && contactInfo.servicePhone
contactInfo.emailAddress && contactInfo.emailAddress
); );
return ( return (
vehicleReqs && vehicleReqs
damageReqs && && damageReqs
packageReqs && && packageReqs
serviceLocationReqs && && serviceLocationReqs
scheduleReqs && && scheduleReqs
customerReqs && && customerReqs
contactInfoReqs && contactInfoReqs
); );
}, },
getPaymentMethodFromStore() { getPaymentMethodFromStore() {
const { payInAdvanceType } = useMainStore().order.payment; const { payInAdvanceType } = useMainStore().order.payment;
const isPayInAdvance = const isPayInAdvance =
useMainStore().order.payment.isPayInAdvance && useMainStore().order.payment.isPayInAdvance
!!payInAdvanceType; && !!payInAdvanceType;
return isPayInAdvance return isPayInAdvance
? payInAdvanceType ? payInAdvanceType
@ -314,8 +309,8 @@ export default {
}, },
storeAvailableVaps(vaps) { storeAvailableVaps(vaps) {
useMainStore().order.availableVaps = vaps; useMainStore().order.availableVaps = vaps;
}, }
}, }
}; };
</script> </script>

2
src/layouts/payment-page/payment-page.vue
View file

@ -38,7 +38,7 @@
</div> </div>
<div v-if="isCreditCard || isAfterPay" class="px-2"> <div v-if="isCreditCard || isAfterPay" class="px-2">
<hr class="my-0"> <hr :class="{'my-0': isCreditCard}">
<cartDropdown <cartDropdown
:readOnly="true" :readOnly="true"
:showDropdownHeader="true" :showDropdownHeader="true"

186
src/layouts/service-location/service-location.vue
View file

@ -14,97 +14,101 @@
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="mt-5" /> class="mt-5" />
<div class="main-content-container"> <serviceZipModalQuestion
<serviceZipModalQuestion ref="serviceZipCodeQuestion"
ref="serviceZipCodeQuestion" v-model="serviceZipCodeQuestion"
v-model="serviceZipCodeQuestion" modalWidgetName="ServiceZipModalWidget"
modalWidgetName="ServiceZipModalWidget" :onZipUpdateCallback="reloadShopData"
:onZipUpdateCallback="reloadShopData" @updatedServiceability="setServiceabilityDetails"
@updatedServiceability="setServiceabilityDetails" @updatedContainsMilitaryBase="
@updatedContainsMilitaryBase=" setContainsMilitaryBase
setContainsMilitaryBase " />
" /> <alert
<alert v-if="displayMilitaryZipAlert"
v-if="displayMilitaryZipAlert" ref="alertMilitaryBaseZip"
ref="alertMilitaryBaseZip" class="my-5"
class="my-5" cmsWidgetName="AlertMilitaryBaseZipWidget"
cmsWidgetName="AlertMilitaryBaseZipWidget" alertClass="alert-warning" />
alertClass="alert-warning" /> <alert
<alert v-if="displayServiceableMobileOnly"
v-if="displayServiceableMobileOnly" ref="alertMobileOnly"
ref="alertMobileOnly" class="my-5"
class="my-5" cmsWidgetName="AlertMobileOnlyWidget"
cmsWidgetName="AlertMobileOnlyWidget" alertClass="alert-warning" />
alertClass="alert-warning" /> <alert
<alert v-if="displayRecalibrationWarning"
v-if="displayRecalibrationWarning" ref="alertRecalNoMobile"
ref="alertRecalNoMobile" class="my-5"
class="my-5" cmsWidgetName="AlertRecalNoMobileWidget"
cmsWidgetName="AlertRecalNoMobileWidget" alertClass="alert-warning"
alertClass="alert-warning" @text-link-clicked="openModalAction" />
@text-link-clicked="openModalAction" /> <alert
<alert v-if="displayServiceableInshopOnly"
v-if="displayServiceableInshopOnly" ref="alertInshopOnly"
ref="alertInshopOnly" class="my-5"
class="my-5" cmsWidgetName="AlertInshopOnlyWidget"
cmsWidgetName="AlertInshopOnlyWidget" alertClass="alert-warning" />
alertClass="alert-warning" /> <alert
<alert v-if="displayNoShopsAlert"
v-if="displayNoShopsAlert" ref="alertNoShops"
ref="alertNoShops" class="my-5"
class="my-5" cmsWidgetName="AlertNoShopsWidget"
cmsWidgetName="AlertNoShopsWidget" alertClass="alert-warning" />
alertClass="alert-warning" /> </div>
<appointmentTypeQuestion </div>
v-show="isAppointmentTypeDisplayed" <div class="row justify-content-center appointment-type">
ref="appointmentTypeQuestion" <div class="col-md-6">
v-model="selectedAppointmentType" <appointmentTypeQuestion
:isServiceableMobile="isServiceableMobile" v-show="isAppointmentTypeDisplayed"
:isServiceableInshop="isServiceableInshop" ref="appointmentTypeQuestion"
:isDisplayed="isAppointmentTypeDisplayed" v-model="selectedAppointmentType"
groupName="appointmentTypeQuestion" :isServiceableMobile="isServiceableMobile"
cmsWidgetName="AppointmentTypeQuestionWidget" :isServiceableInshop="isServiceableInshop"
validationRules="option-required" /> :isDisplayed="isAppointmentTypeDisplayed"
<mobileLocationModalQuestions groupName="appointmentTypeQuestion"
v-if="isMobileLocationDisplayed" cmsWidgetName="AppointmentTypeQuestionWidget"
ref="mobileLocationQuestions" validationRules="option-required" />
v-model="mobileLocationQuestions" </div>
customComponentId="mobileLocationQuestions" </div>
:mobileFeePart="mobileFeePart" <div class="row justify-content-center">
validationRules="mobile-location-required" <div class="col-md-6 col-xl-4">
linkWidgetName="MobileLocationLinkWidget" <mobileLocationModalQuestions
modalWidgetName="MobileLocationModalWidget" v-if="isMobileLocationDisplayed"
:onZipUpdateCallback="reloadShopData" ref="mobileLocationQuestions"
@updated-mobile-fee-part="setMobileFeePart" v-model="mobileLocationQuestions"
@updated-serviceability="setServiceabilityDetails" customComponentId="mobileLocationQuestions"
@updated-contains-military-base=" :mobileFeePart="mobileFeePart"
setContainsMilitaryBase validationRules="mobile-location-required"
" /> linkWidgetName="MobileLocationLinkWidget"
<shopQuestion modalWidgetName="MobileLocationModalWidget"
v-show="isShopQuestionDisplayed" :onZipUpdateCallback="reloadShopData"
ref="shopQuestion" @updated-mobile-fee-part="setMobileFeePart"
v-model="selectedProvider" @updated-serviceability="setServiceabilityDetails"
:selectedAppointmentType="selectedAppointmentType" @updated-contains-military-base="
:isDisplayed="isShopQuestionDisplayed" setContainsMilitaryBase
cmsWidgetName="ShopQuestionWidget" " />
@updatedMobileProviderNumber=" <shopQuestion
setMobileProviderNumber v-show="isShopQuestionDisplayed"
" /> ref="shopQuestion"
<contentGroupModal v-model="selectedProvider"
ref="RecalModal" :selectedAppointmentType="selectedAppointmentType"
cmsWidgetName="RecalModal" /> :isDisplayed="isShopQuestionDisplayed"
<siteFooter cmsWidgetName="ShopQuestionWidget"
ref="siteFooter" @updatedMobileProviderNumber="
class="mt-5" setMobileProviderNumber
cmsWidgetName="SiteFooterWidget" " />
:isForwardActionDisabled=" <contentGroupModal
!meta.valid || displayNoShopsAlert ref="RecalModal"
" cmsWidgetName="RecalModal" />
@backClicked=" <siteFooter
navigateBack(this, navigateBackScenario) ref="siteFooter"
" class="mt-5"
@forwardClicked="forwardButtonAction" /> cmsWidgetName="SiteFooterWidget"
</div> :isForwardActionDisabled="
!meta.valid || displayNoShopsAlert
"
@backClicked="navigateBack(this, navigateBackScenario)"
@forwardClicked="forwardButtonAction" />
</div> </div>
</div> </div>
</div> </div>

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

@ -14,7 +14,6 @@
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
justification="left"
issContainingPage="service-packages" /> issContainingPage="service-packages" />
<servicePackageQuestion <servicePackageQuestion
ref="servicePackage" ref="servicePackage"

4
src/styles/common-styles.scss
View file

@ -35,10 +35,6 @@ body {
.shop-question { .shop-question {
.col { .col {
max-width: 472px; max-width: 472px;
@include media-breakpoint-up(xl) {
max-width: 66.6666666%;
margin: 0 auto;
}
} }
} }
} }