Merge pull request #2718 from Safelite/CASH-1048-quote-page-updates
CASH-1048 quote page updates.
This commit is contained in:
commit
09cef3d8d2
9 changed files with 36 additions and 24 deletions
|
|
@ -43,7 +43,7 @@ module.exports = {
|
||||||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||||
coverageThreshold: {
|
coverageThreshold: {
|
||||||
global: {
|
global: {
|
||||||
statements: 66,
|
statements: 64,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
|
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
|
||||||
|
|
|
||||||
|
|
@ -218,14 +218,17 @@ export default {
|
||||||
|
|
||||||
&.has-subheader {
|
&.has-subheader {
|
||||||
& > .package-specs {
|
& > .package-specs {
|
||||||
& > div:first-of-type {
|
display: inline-flex;
|
||||||
display: flex;
|
@include media-breakpoint-up(md) {
|
||||||
|
& > div:first-of-type {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-package-discount {
|
&.has-package-discount {
|
||||||
min-height: 150px;
|
min-height: 170px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
|
|
@ -267,10 +270,6 @@ export default {
|
||||||
+ .package-label {
|
+ .package-label {
|
||||||
.package-specs {
|
.package-specs {
|
||||||
max-height: 1000px;
|
max-height: 1000px;
|
||||||
|
|
||||||
.sub-label {
|
|
||||||
background-color: $green-200;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+ .package-label {
|
+ .package-label {
|
||||||
|
|
@ -281,11 +280,10 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+ .package-label {
|
+ .package-label {
|
||||||
background-color: $blue-100;
|
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
.special-save-box {
|
.special-save-box {
|
||||||
background-color: $green-200;
|
background-color: $green-100;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+ .package-label {
|
+ .package-label {
|
||||||
|
|
@ -336,12 +334,16 @@ export default {
|
||||||
|
|
||||||
&.sub-label {
|
&.sub-label {
|
||||||
color: $green;
|
color: $green;
|
||||||
background-color: $green-100;
|
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0;
|
||||||
border-radius: 0.75rem;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
background-color: $green-100;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
|
|
@ -429,14 +431,17 @@ export default {
|
||||||
background-color: $green-100;
|
background-color: $green-100;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 0.5rem auto 1rem -1.25rem;
|
margin: 0.25rem auto 0 -1.25rem;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.25rem 1rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
span {
|
span {
|
||||||
color: $green;
|
color: $green;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
margin: 1rem auto 0 -1.25rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.pricing-info {
|
.pricing-info {
|
||||||
color: $green;
|
color: $green;
|
||||||
|
|
@ -447,6 +452,7 @@ export default {
|
||||||
margin-left: 1.25rem;
|
margin-left: 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
|
||||||
span.strikethrough-price {
|
span.strikethrough-price {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
|
|
|
||||||
|
|
@ -318,7 +318,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+ .package-label {
|
+ .package-label {
|
||||||
background-color: $blue-100;
|
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
.special-save-box {
|
.special-save-box {
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<buttonMain
|
<buttonMain
|
||||||
ref="buttonMain"
|
ref="buttonMain"
|
||||||
isPrimary
|
isPrimary
|
||||||
:buttonText="buttonText"
|
:buttonText="overrideButtonText || buttonText"
|
||||||
loaderColor="white"
|
loaderColor="white"
|
||||||
:class="isForwardActionDisabled && 'form-test-invalid'"
|
:class="isForwardActionDisabled && 'form-test-invalid'"
|
||||||
:aria-disabled="isForwardActionDisabled"
|
:aria-disabled="isForwardActionDisabled"
|
||||||
|
|
@ -56,6 +56,7 @@ export default {
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
buttonSize: { type: Boolean, default: false },
|
buttonSize: { type: Boolean, default: false },
|
||||||
isSubmitHidden: { type: Boolean, default: false },
|
isSubmitHidden: { type: Boolean, default: false },
|
||||||
|
overrideButtonText: String,
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
textLink,
|
textLink,
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
</transition>
|
</transition>
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
<div class="row mb-4" aria-live="polite">
|
<div class="row mb-4" aria-live="polite">
|
||||||
<div class="col">
|
<div class="col-8">
|
||||||
<dropdownQuestion
|
<dropdownQuestion
|
||||||
customDropdownId="state"
|
customDropdownId="state"
|
||||||
cmsWidgetName="StateQuestionWidget"
|
cmsWidgetName="StateQuestionWidget"
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
:labelBold="labelBold"
|
:labelBold="labelBold"
|
||||||
:isDisabled="this.isStateDisabled" />
|
:isDisabled="this.isStateDisabled" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col-4">
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
customInputId="zipCode"
|
customInputId="zipCode"
|
||||||
cmsWidgetName="ZipQuestionWidget"
|
cmsWidgetName="ZipQuestionWidget"
|
||||||
|
|
|
||||||
|
|
@ -963,5 +963,6 @@ function setupMocks({ customMountOptions }) {
|
||||||
|
|
||||||
const wrapper = shallowMount(quote, mountOptions);
|
const wrapper = shallowMount(quote, mountOptions);
|
||||||
wrapper.vm.setCmsContent = jest.fn();
|
wrapper.vm.setCmsContent = jest.fn();
|
||||||
|
wrapper.vm.getCmsContent = jest.fn();
|
||||||
return { wrapper };
|
return { wrapper };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||||
<div class="container quote position-relative">
|
<div class="container quote position-relative">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
<div class="col-12">
|
||||||
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
|
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -78,7 +78,10 @@
|
||||||
:isForwardActionDisabled="!meta.valid"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
:isBackButtonHidden="shouldHideBackButton"
|
:isBackButtonHidden="shouldHideBackButton"
|
||||||
@back-clicked="backButtonAction"
|
@back-clicked="backButtonAction"
|
||||||
@ForwardClicked="forwardButtonAction" />
|
@ForwardClicked="forwardButtonAction"
|
||||||
|
:overrideButtonText="
|
||||||
|
isInsuranceSelected ? isInsuranceContinueButtonText : ''
|
||||||
|
" />
|
||||||
|
|
||||||
<saveProgressModalQuestion
|
<saveProgressModalQuestion
|
||||||
modalWidgetName="SaveProgressModalWidget"
|
modalWidgetName="SaveProgressModalWidget"
|
||||||
|
|
@ -567,6 +570,9 @@ export default {
|
||||||
this.$refs?.servicePackage?.savePackageInfoToPageData?.();
|
this.$refs?.servicePackage?.savePackageInfoToPageData?.();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
isInsuranceContinueButtonText() {
|
||||||
|
return this.getCmsContent("isInsuranceContinueButtonText", "Text");
|
||||||
|
},
|
||||||
lineItemsCloneForWatcher() {
|
lineItemsCloneForWatcher() {
|
||||||
return Object.assign({}, this.lineItems);
|
return Object.assign({}, this.lineItems);
|
||||||
},
|
},
|
||||||
|
|
@ -616,7 +622,7 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
getColCount() {
|
getColCount() {
|
||||||
if (this.packageNumber > 2) {
|
if (this.packageNumber > 2) {
|
||||||
return "col-xl-10";
|
return "col-xl-12";
|
||||||
} else {
|
} else {
|
||||||
return "col-xl-6";
|
return "col-xl-6";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -246,7 +246,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+ .package-label {
|
+ .package-label {
|
||||||
background-color: $blue-100;
|
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
.special-save-box {
|
.special-save-box {
|
||||||
|
|
|
||||||
|
|
@ -135,7 +135,7 @@ export default {
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: $white;
|
color: $white;
|
||||||
background: linear-gradient(84.45deg, #125b7e 0%, #3b8fb8 100%);
|
background: $blue;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue