Merge pull request #1070 from Safelite/feature/INSR-7769
INSR-7769: Service-Packages Heritage parity
This commit is contained in:
katiekroell
GitHub
commit
addfaeb322
5 changed files with 212 additions and 107 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue