CASH-1042 WIP
This commit is contained in:
Bryan Mauger
parent
15023adb96
commit
3c4a856277
9 changed files with 37 additions and 38 deletions
|
|
@ -1316,11 +1316,11 @@ export default {
|
|||
&:after {
|
||||
content: "";
|
||||
transition: all 0.5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
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: 16px;
|
||||
height: 9px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
right: 0.75rem;
|
||||
|
|
|
|||
|
|
@ -13,11 +13,9 @@
|
|||
</div>
|
||||
<div
|
||||
v-if="subText"
|
||||
class="d-flex align-self-start align-self-md-center overflow-hidden mt-1">
|
||||
class="d-flex align-self-center overflow-hidden mt-1">
|
||||
<p class="small fw-normal sub-text">
|
||||
<span>
|
||||
{{ subText }}
|
||||
</span>
|
||||
<span v-html="boldedSubHeaderText"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,6 +38,12 @@ export default {
|
|||
buttonBack,
|
||||
},
|
||||
computed: {
|
||||
boldedSubHeaderText() {
|
||||
return this.subText.replace(
|
||||
/^Almost done!/,
|
||||
'<span class="almost-done">Almost done!</span>'
|
||||
);
|
||||
},
|
||||
text() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||
},
|
||||
|
|
@ -61,6 +65,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
h5 {
|
||||
line-height: 32px;
|
||||
font-size: 1.25rem;
|
||||
|
||||
button {
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -118,13 +118,14 @@ export default {
|
|||
margin-bottom: 1.5rem;
|
||||
order: 2;
|
||||
text-align: center;
|
||||
background: $blue-100;
|
||||
background: $gray-100;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&.progress-saved {
|
||||
background: none;
|
||||
|
|
@ -137,12 +138,11 @@ export default {
|
|||
border: none;
|
||||
font-weight: 900;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.25rem;
|
||||
text-decoration: none;
|
||||
line-height: 1rem;
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<div class="container page-container-grouped-styles estimate">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<div>
|
||||
<div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
|
||||
<div v-html="this.VinLookupQuestionBodyText2"></div>
|
||||
|
|
@ -41,7 +40,6 @@
|
|||
// Components
|
||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
|
||||
|
|
@ -243,7 +241,6 @@ export default {
|
|||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
funnelSubHeader,
|
||||
navbar,
|
||||
buttonQuestion,
|
||||
Form,
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
<div
|
||||
v-if="isRecalibrationOnOrder && shouldHideRecalibration"
|
||||
class="questions-about-service my-5">
|
||||
class="questions-about-service mt-5">
|
||||
<textBlock
|
||||
cmsWidgetName="QuestionsAboutYourServiceWidget"
|
||||
justifyText="left"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<div class="d-flex flex-row checkbox-group">
|
||||
<checkboxQuestion
|
||||
cmsWidgetName="RecalConfirmWidget"
|
||||
class="mb-5"
|
||||
class="mb-3"
|
||||
isRequired="true"
|
||||
v-model="isRecalAckOptIn"
|
||||
validationRules="recal-ack-required"
|
||||
|
|
@ -78,13 +78,6 @@
|
|||
:isInsurance="isInsurance"
|
||||
validationRules="payment-method-required" />
|
||||
|
||||
<alert
|
||||
v-if="showHavePaymentReadyAlert"
|
||||
:isDismissible="false"
|
||||
alertClass="alert-info"
|
||||
cmsWidgetName="NoPiaDisclaimerWidget"
|
||||
shouldScrollToOnMount="false" />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
|
|
@ -766,11 +759,6 @@ export default {
|
|||
|
||||
return false;
|
||||
},
|
||||
showHavePaymentReadyAlert() {
|
||||
return (
|
||||
!this.showPaymentMethodQuestions && !this.forwardClicked && this.totalAmountDue > 0
|
||||
);
|
||||
},
|
||||
totalAmountDue() {
|
||||
return getAmountDue(this.lineItems);
|
||||
},
|
||||
|
|
@ -903,6 +891,12 @@ export default {
|
|||
margin: 0;
|
||||
}
|
||||
.payment-method {
|
||||
:deep(.almost-done) {
|
||||
font-family: UrbanistSemibold;
|
||||
}
|
||||
:deep(h5) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.recal-modal {
|
||||
:deep(.modal-body) {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -157,11 +157,11 @@ export default {
|
|||
&:after {
|
||||
content: "";
|
||||
transition: all 0.5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
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: 16px;
|
||||
height: 9px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
right: 0.75rem;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,12 @@
|
|||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
<div class="container quote position-relative">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<cashOrInsuranceQuestion
|
||||
ref="cashOrInsurance"
|
||||
cmsWidgetName="CashOrInsuranceQuestionWidget"
|
||||
|
|
@ -84,9 +88,8 @@
|
|||
|
||||
<textBlock
|
||||
cmsWidgetName="quoteDisclaimer"
|
||||
justifyText="center"
|
||||
typeStyle="caption"
|
||||
class="mb-5 quote-disclaimer" />
|
||||
class="mb-5 quote-disclaimer text-left text-md-center" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mb-7"/>
|
||||
<alert
|
||||
ref="vehicleChangeAlert"
|
||||
v-if="shouldDisplayVehicleChangeAlert"
|
||||
|
|
|
|||
|
|
@ -60,12 +60,12 @@ export default {
|
|||
&:after {
|
||||
content: "";
|
||||
transition: all 0.5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
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;
|
||||
margin-left: 0.5rem;
|
||||
width: 16px;
|
||||
height: 9px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
}
|
||||
&.active:after {
|
||||
|
|
|
|||
Loading…
Reference in a new issue