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

Merge pull request #1892 from Safelite/CSR-2140-service-pkgs-horizontal-desktop

Browse source 
CSR-2140 service packages horizontal desktop setup on quote page
This commit is contained in:
bmauger 2024-07-08 14:40:39 -04:00 committed by GitHub
commit 4871a1d1dc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 76 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -213,7 +213,7 @@ export default {
classes = "ui-checkbox d-flex";
break;
case "servicePackageRadio":
classes = "package-main";
classes = "package-main d-md-flex justify-content-center";
break;
}
return classes;
@ -226,7 +226,7 @@ export default {
if (this.buttonTypeString == "radio") {
classes += " radio-button-container";
} else if (this.buttonTypeString == "servicePackageRadio") {
classes = "package-wrapper";
classes = "package-wrapper col-md-4";
}
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {

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

@ -1,7 +1,7 @@
<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="container-fluid page-container-grouped-styles quote">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -20,7 +20,10 @@
cmsWidgetName="CashOrInsuranceQuestionWidget"
v-model="isInsuranceSelected"
groupName="CashOrInsuranceQuestion" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<servicePackageQuestion
ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget"
@ -34,7 +37,10 @@
v-on="{ 'buttonEvent.openModal': openModalAction }"
validationRules="option-required"
isRequired />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<afterpayModalBanner
v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
cmsWidgetName="AfterpayModalWidget"
@ -43,7 +49,6 @@
:lineItems="lineItems" />
<recalDisclaimer
class="my-5"
cmsWidgetName="RecalDisclaimerWidget"
v-if="isRecalibrationOnOrder"
v-on="{ textLinkClicked: openModalAction }"

67
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -12,7 +12,9 @@
]"
for="testradio">
<div class="package-specs">
<div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
<div
v-if="this.additionalButtonData.servicePackageDiscount"
class="row justify-content-between">
<div class="col md-6">
<p class="m-0">
<span v-html="this.buttonLabel"></span>
@ -136,24 +138,20 @@ export default {
</script>
<style lang="scss">
.discount-text {
line-height: 36px;
display: flex;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
background-color: #469d2a;
align-items: center;
justify-content: center;
padding: 5px;
width: 100%;
color: white;
}
.package-main {
.package-wrapper {
margin: 0.5rem 0;
margin: 1rem 0;
@include media-breakpoint-up(md) {
margin: 0.5rem 0;
}
position: relative;
@include media-breakpoint-up(md) {
margin: 1rem 0.5rem;
}
label {
display: block;
height: 100%;
}
input[type="radio"] {
@ -174,13 +172,23 @@ export default {
border-radius: 0.5rem;
overflow: hidden;
min-height: 60px;
@include media-breakpoint-up(md) {
max-height: 500px;
height: 100%;
}
&.has-subheader {
min-height: 80px;
@include media-breakpoint-up(md) {
padding-top: 60px;
}
}
&.has-text {
border-radius: 0 0 0.5rem 0.5rem;
border: 1px solid #469d2a !important;
@include media-breakpoint-up(md) {
border-radius: 0.5rem;
}
border: 1px solid #469d2a;
}
&:before {
@ -265,6 +273,9 @@ export default {
width: 100%;
max-height: 0;
transition: all 0.5s ease;
@include media-breakpoint-up(md) {
max-height: 500px;
}
p {
font-weight: 500;
@ -337,6 +348,32 @@ export default {
.hide-when-closed {
display: none;
@include media-breakpoint-up(md) {
display: flex;
flex-direction: column;
}
}
}
.discount-text {
line-height: 36px;
display: flex;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
background-color: #469d2a;
align-items: center;
justify-content: center;
padding: 5px;
width: 100%;
color: white;
height: 2.875rem;
@include media-breakpoint-up(md) {
position: absolute;
z-index: 1;
}
@include media-breakpoint-up(md) {
~ label .package-label:after {
top: 68px;
}
}
}
}

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

@ -37,6 +37,19 @@ body {
max-width: 100%;
}
}
// Quote page desktop
&.quote {
.col-md-6,
.col-lg-4 {
max-width: 1200px;
}
.col-md-6.col-lg-4 {
@include media-breakpoint-up(lg) {
width: 100%;
max-width: 910px;
}
}
}
//END set max-width on columns
}
.pointer {