Fixes a few defects on order-confirmation:
- INSR-8676: Display proper copy for windshield repair - INSR-8684 Fix some display differences for paid orders - Also fixes a defect where the cart was real close to the footer on mobile
This commit is contained in:
parent
24160e8b48
commit
f49168b4da
2 changed files with 34 additions and 12 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="!isDeductibleOnly"
|
v-if="!isDeductibleOnly || showAsPaid"
|
||||||
class="cart-table">
|
class="cart-table">
|
||||||
<div class="cart-item-list">
|
<div class="cart-item-list">
|
||||||
<div
|
<div
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
id="cart-footer"
|
id="cart-footer"
|
||||||
class="cart-footer">
|
class="cart-footer">
|
||||||
<div
|
<div
|
||||||
v-if="!isUnverified"
|
v-if="!isUnverified && !isDeductibleOnly"
|
||||||
id="cart-subtotal-and-tax"
|
id="cart-subtotal-and-tax"
|
||||||
class="subtotal-and-tax">
|
class="subtotal-and-tax">
|
||||||
<div
|
<div
|
||||||
|
|
@ -68,10 +68,21 @@
|
||||||
<span id="sales-tax-label">{{ salesTaxLabel }}</span>
|
<span id="sales-tax-label">{{ salesTaxLabel }}</span>
|
||||||
<span id="sales-tax-value">{{ formatAmountInDollars(salesTax) }}</span>
|
<span id="sales-tax-value">{{ formatAmountInDollars(salesTax) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
v-if="showAsPaid"
|
<div
|
||||||
id="cart-amount-paid"
|
v-if="showAsPaid"
|
||||||
class="py-2 col d-flex justify-content-between">
|
id="cart-total"
|
||||||
|
class="cart-item">
|
||||||
|
<div class="price-row">
|
||||||
|
<span id="total-label">{{ totalLabel }}</span>
|
||||||
|
<span if="total-value">{{ getDisplayed(total) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="showAsPaid"
|
||||||
|
id="cart-amount-paid"
|
||||||
|
class="cart-item">
|
||||||
|
<div class="price-row">
|
||||||
<span id="amount-paid-label">{{ amountPaidLabel }}</span>
|
<span id="amount-paid-label">{{ amountPaidLabel }}</span>
|
||||||
<span if="amount-paid-value">{{ getDisplayed(amountPaid) }}</span>
|
<span if="amount-paid-value">{{ getDisplayed(amountPaid) }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -141,7 +152,8 @@ export default {
|
||||||
servicePackage: 'ServicePackageTitle',
|
servicePackage: 'ServicePackageTitle',
|
||||||
vapsItemDescriptions: 'VapsItemDescriptions',
|
vapsItemDescriptions: 'VapsItemDescriptions',
|
||||||
warrantyText: 'WarrantyCartItemTextWidget',
|
warrantyText: 'WarrantyCartItemTextWidget',
|
||||||
guaranteeText: 'GuaranteeCartItemTextWidget'
|
guaranteeText: 'GuaranteeCartItemTextWidget',
|
||||||
|
total: 'TotalWidget'
|
||||||
},
|
},
|
||||||
cartItemType
|
cartItemType
|
||||||
};
|
};
|
||||||
|
|
@ -176,7 +188,8 @@ export default {
|
||||||
},
|
},
|
||||||
servicePrice() {
|
servicePrice() {
|
||||||
const price = getPriceOfLineItems(getServiceLineItems(this.cartOrder)) ?? 0;
|
const price = getPriceOfLineItems(getServiceLineItems(this.cartOrder)) ?? 0;
|
||||||
return price - this.recalibrationPrice;
|
const recycleFee = getPriceOfLineItems([this.recycleFeeLineItem]) ?? 0;
|
||||||
|
return price - this.recalibrationPrice - recycleFee;
|
||||||
},
|
},
|
||||||
isUnverified() {
|
isUnverified() {
|
||||||
return isOrderUnverified(this.cartOrder);
|
return isOrderUnverified(this.cartOrder);
|
||||||
|
|
@ -198,10 +211,10 @@ export default {
|
||||||
return getCartTotal(this.cartOrder);
|
return getCartTotal(this.cartOrder);
|
||||||
},
|
},
|
||||||
amountDue() {
|
amountDue() {
|
||||||
return this.showAsPaid ? 0 : this.total;
|
return this.total - this.amountPaid;
|
||||||
},
|
},
|
||||||
amountPaid() {
|
amountPaid() {
|
||||||
return !this.showAsPaid ? 0 : this.total;
|
return !this.showAsPaid ? 0 : this.cartOrder.settledTenderAmount;
|
||||||
},
|
},
|
||||||
availableLineItems() {
|
availableLineItems() {
|
||||||
const { supportingItems, glassParts, otherParts, feeItems } = this.lineItems;
|
const { supportingItems, glassParts, otherParts, feeItems } = this.lineItems;
|
||||||
|
|
@ -278,6 +291,9 @@ export default {
|
||||||
salesTaxLabel() {
|
salesTaxLabel() {
|
||||||
return this.getCmsContent(this.widget.salesTax, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
return this.getCmsContent(this.widget.salesTax, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
||||||
},
|
},
|
||||||
|
totalLabel() {
|
||||||
|
return this.getCmsContent(this.widget.total, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
||||||
|
},
|
||||||
recycleFeeCartItem() {
|
recycleFeeCartItem() {
|
||||||
return this.recycleFeeLineItem
|
return this.recycleFeeLineItem
|
||||||
? this.getCartItem(
|
? this.getCartItem(
|
||||||
|
|
@ -414,6 +430,10 @@ export default {
|
||||||
a:hover {
|
a:hover {
|
||||||
color: $heritage-blue-secondary;
|
color: $heritage-blue-secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#amount-paid-label {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-footer {
|
.cart-footer {
|
||||||
|
|
|
||||||
|
|
@ -281,11 +281,13 @@ export default {
|
||||||
},
|
},
|
||||||
serviceTypeText() {
|
serviceTypeText() {
|
||||||
const glassPieces = this.submittedOrder.lineItems.glassParts?.map((part) => part.partType.toLowerCase()) ?? [];
|
const glassPieces = this.submittedOrder.lineItems.glassParts?.map((part) => part.partType.toLowerCase()) ?? [];
|
||||||
let glassList = getGlassList(glassPieces);
|
let glassList = '';
|
||||||
let workType = '';
|
let workType = '';
|
||||||
if (this.isRepair) {
|
if (this.isRepair) {
|
||||||
|
glassList = 'windshield';
|
||||||
workType = 'repair';
|
workType = 'repair';
|
||||||
} else {
|
} else {
|
||||||
|
glassList = getGlassList(glassPieces);
|
||||||
workType = 'replacement';
|
workType = 'replacement';
|
||||||
if (this.hasRecalibrationPart) {
|
if (this.hasRecalibrationPart) {
|
||||||
if (glassList === 'windshield') {
|
if (glassList === 'windshield') {
|
||||||
|
|
@ -622,7 +624,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-container {
|
.cart-container {
|
||||||
padding: 0 .9375rem;
|
padding: 0 .9375rem 2.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue