ITAC - No Recal | Add in ITAC price viewer
This commit is contained in:
parent
b26b00c954
commit
2319848c87
1 changed files with 59 additions and 13 deletions
|
|
@ -25,24 +25,31 @@
|
|||
ref="secondaryText"
|
||||
class="mt-4 mb-1 fw-bold text-black"
|
||||
v-html="secondaryText"></div>
|
||||
<div class="itac-price-container" v-if="isITACQuoteVisible">
|
||||
<div class="itac-deductible-value-container">
|
||||
<div class="itac-deductible-value-text">Your deductible:</div>
|
||||
<div class="itac-deductible-value">
|
||||
{{ formatAmountInDollars(deductibleValue) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="itac-cost-container">
|
||||
<div class="itac-cost-text">Safelite price*:</div>
|
||||
<div class="cost">
|
||||
{{ formatAmountInDollars(totalServicePrice) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isDeductibleVisible"
|
||||
class="d-flex cost">
|
||||
v-if="showDeductibleOnly"
|
||||
class="d-flex cost cost-underline">
|
||||
{{ formatAmountInDollars(deductibleValue) }}
|
||||
</div>
|
||||
<div
|
||||
v-if="isQuoteDisplayed"
|
||||
class="d-flex justify-content-center cost mb-0">
|
||||
class="d-flex justify-content-center cost mb-0 cost-underline">
|
||||
{{ formatAmountInDollars(totalServicePrice) }}
|
||||
</div>
|
||||
<div
|
||||
v-if="isITACQuoteVisible"
|
||||
class="d-flex justify-content-center mb-4 deductible-text">
|
||||
{{ deductibleText }}
|
||||
<span class="text-success fw-bold">{{
|
||||
formatAmountInDollars(deductibleValue)
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
class="fw-bold text-black mt-5 mb-2"
|
||||
v-html="nextStepsHeader"></div>
|
||||
|
|
@ -63,7 +70,7 @@
|
|||
href="#"
|
||||
@clickEvent="cancelClaim" />
|
||||
<textBlock
|
||||
v-if="isQuoteDisplayed"
|
||||
v-if="isDisclaimerVisible"
|
||||
:customText="disclaimerText"
|
||||
typeStyle="caption" />
|
||||
<siteFooter
|
||||
|
|
@ -321,8 +328,14 @@ export default {
|
|||
);
|
||||
},
|
||||
isQuoteDisplayed() {
|
||||
return this.isNoCompQuoteVisible;
|
||||
},
|
||||
isDisclaimerVisible() {
|
||||
return this.isITACQuoteVisible || this.isNoCompQuoteVisible;
|
||||
},
|
||||
showDeductibleOnly() {
|
||||
return this.isDeductibleVisible && this.isITACQuoteVisible;
|
||||
},
|
||||
shouldRegisterClaim() {
|
||||
const {
|
||||
vehicle,
|
||||
|
|
@ -511,9 +524,11 @@ export default {
|
|||
font-size: 1.675rem;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 2.5rem;
|
||||
border-bottom: 4px solid #0c7e47;
|
||||
width: fit-content;
|
||||
}
|
||||
.cost-underline {
|
||||
border-bottom: 4px solid #0c7e47;
|
||||
}
|
||||
.deductible-text {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
|
@ -564,6 +579,37 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.itac-price-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border: solid 1px #cacbcc;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $black;
|
||||
padding: 10px;
|
||||
|
||||
.itac-deductible-value-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.itac-cost-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.itac-deductible-value {
|
||||
font-size: 1.675rem;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.separator {
|
||||
width: 1px;
|
||||
height: 60px;
|
||||
background-color: #cacbcc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.deductible-modal) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue