From a8b75d8c1cc7684cab31697a29f2c6061c9b9c6a Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Thu, 29 Feb 2024 14:39:35 -0500 Subject: [PATCH] Adding deductible and base price line items to cart --- .../cart-dropdown/cart-dropdown.spec.js | 2 +- .../cart-dropdown/cart-dropdown.vue | 95 +++++++++++++++---- .../coverage-statement/coverage-statement.vue | 8 +- src/layouts/payment-method/payment-method.vue | 26 ++++- src/store/index.js | 23 ++--- 5 files changed, 116 insertions(+), 38 deletions(-) diff --git a/src/iss-components/cart-dropdown/cart-dropdown.spec.js b/src/iss-components/cart-dropdown/cart-dropdown.spec.js index e55bdc36..b2fc6245 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.spec.js +++ b/src/iss-components/cart-dropdown/cart-dropdown.spec.js @@ -81,7 +81,7 @@ describe('cart-dropdown component', () => { const { wrapper } = getMountedComponent(storeData); // Act - const result = wrapper.vm.isVerified; + const result = wrapper.vm.isVerifiedCoverageStatus; // Assert expect(result).toBe(expected); diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue index 9ebfa58d..2dd9210c 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.vue +++ b/src/iss-components/cart-dropdown/cart-dropdown.vue @@ -10,13 +10,34 @@ href="javascript:void(0)" class="col d-flex justify-content-between py-0"> {{ amountDueLabel }} - {{ amountDueDisplayed }} + {{ getDisplayed(amountDue) }}
- Cart Table Placeholder + class="cart-table"> +
+
+
+ {{ deductibleOrBasePriceLabel }} + {{ getDisplayed(deductible) }} +
+
+ {{ deductibleOrBasePriceLabel }} + {{ getDisplayed(baseServicePrice) }} +
+
+
@@ -31,39 +52,56 @@ export default { components: {}, props: { showAsPaid: Boolean, - amountDueLabel: String + amountDueLabel: String, + deductibleOrBasePriceLabel: String }, data() { return { - isExpanded: false, + isExpanded: true, currencyFormatter: new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' - }), - widget: { - amountDue: 'AmountDueTextWidget' - } + }) }; }, computed: { - isVerified() { - return useMainStore().payment?.insuranceCoverage?.isVerified ?? false; + deductible() { + return useMainStore().order.currentDeductible; }, - amountDueDisplayed() { - return this.isVerified - ? this.getFormattedAmount(this.amountDue) - : VERIFYING_COVERAGE; + availableLineItems() { + // TODO make real + return [ + { + kitPrice: 1, + laborAmount: 2, + sellingPrice: 3 + } + ]; + }, + baseServicePrice() { + return this.availableLineItems + .reduce( + (accumulator, lineItem) => accumulator + this.getTotalLineItemPrice(lineItem), + 0 + ); + }, + showDeductibleLineItem() { + return !useMainStore().isNoComp && !useMainStore().policy.isITAC; + }, + isUnverified() { + return this.showDeductibleLineItem + && (this.deductible == null || !useMainStore().isVerifiedCoverageStatus); + }, + subTotal() { + return this.showDeductibleLineItem ? this.deductible : this.baseServicePrice; + }, + salesTax() { + return 0; // TODO }, amountDue() { return this.showAsPaid ? 0 : this.subTotal + this.salesTax; - }, - subTotal() { - return 0; - }, - salesTax() { - return 0; } }, methods: { @@ -72,6 +110,14 @@ export default { }, getFormattedAmount(amount) { return this.currencyFormatter.format(amount); + }, + getTotalLineItemPrice(lineItem) { + return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice; + }, + getDisplayed(amount) { + return this.isUnverified + ? VERIFYING_COVERAGE + : this.getFormattedAmount(amount); } } }; @@ -84,6 +130,13 @@ export default { .color-black { color: $black; } +.color-gray-100 { + background-color: $gray-100; +} + +.line-item { + color: $darker-gray; +} .cart-table { max-height: 0; diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index fa6f17c3..bcdc76cb 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -130,6 +130,7 @@ import routerParams from '@/router/router-constants/router-params'; import issPageValues from '@/router/router-constants/issPage-values'; import bailoutCode from '@/constants/bailoutCode'; import bailoutMessage from '@/constants/bailoutMessage'; +import coverageStatuses from '@/constants/coverage-statuses'; export default { name: 'coverage-statement', @@ -265,8 +266,7 @@ export default { return damageString === 'match' ? '' : damageString; }, vehicleDeductible() { - const deductible = useMainStore().order.currentDeductible; - return deductible; + return useMainStore().order.currentDeductible; }, formattedDeductible() { return this.getDeductibleString(this.vehicleDeductible); @@ -355,6 +355,10 @@ export default { }, async initializeComponent() { useMainStore().updatePolicyITACFlag(this.verifiedITAC); + const coverageStatus = this.verifiedITAC || this.verifiedNoComp + ? coverageStatuses.VERIFIED + : coverageStatuses.PENDING; + useMainStore().updateCoverageStatus(coverageStatus); if (this.policyLookupSuccessful && useMainStore().order.vehicle.policyVehicleId >= 0 && useMainStore().isClaimRegistrationRequired diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 8b03a875..1cafe4ef 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -21,7 +21,8 @@
+ :amountDueLabel="amountDueText" + :deductibleOrBasePriceLabel="deductibleOrBasePriceLabel" />
Pia Alert Placeholder
state.order.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF, isClaimRegistrationRequired: (state) => state.issConfig.isClaimRegistrationRequired, isBailout: (state) => state.applicationUser.pageData[issPageValues.BAILOUT_PAGE] != null, + isNoComp: (state) => state.order.policy.coverageStatus === coverageStatuses.NO_COMP, + isVerifiedCoverageStatus: (state) => state.order.policy.coverageStatus === coverageStatuses.VERIFIED, eventBusItem: (state) => (eventCategory, eventSubCategory) => { const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventCategory && subCategory === eventSubCategory); return matchedEvent?.eventValue; @@ -489,6 +491,9 @@ export const useMainStore = defineStore({ }); }); }, + updateCoverageStatus(newStatus) { + this.order.payment.insuranceCoverage.coverageStatus = newStatus; + }, registerClaim() { const nonNumberCharRegex = /[^0-9]/g; const { order } = this; @@ -553,18 +558,15 @@ export const useMainStore = defineStore({ const registerClaimFailed = response.data.isError; order.payment.insuranceCoverage.isVerified = !registerClaimFailed; order.payment.insuranceCoverage.claimNumber = null; - if (registerClaimFailed) { - this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING; - } else if (this.policy.noCoverage) { - this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.NO_COMP; - } else { - this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED; + if (this.policy?.noCoverage ?? false) { + this.updateCoverageStatus(coverageStatuses.NO_COMP); + } else if (!registerClaimFailed) { + this.updateCoverageStatus(coverageStatuses.VERIFIED); this.order.payment.insuranceCoverage.claimNumber = response.data.claimNumber; } return resolve(response); }, (error) => { this.order.payment.insuranceCoverage.isVerified = false; - this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING; this.order.payment.insuranceCoverage.claimNumber = null; return reject(error); }); @@ -1264,7 +1266,7 @@ export const useMainStore = defineStore({ order.lineItems.vaps = data.order?.lineItems?.vaps; order.payment.insuranceCoverage.isVerified = data.order?.payment?.insuranceCoverage?.isVerified; - order.payment.insuranceCoverage.coverageStatus = data.order?.payment?.insuranceCoverage?.coverageStatus; + this.updateCoverageStatus(data.order?.payment?.insuranceCoverage?.coverageStatus ?? coverageStatuses.PENDING); const parentAccountNumber = Number.isNaN(data.order?.payment?.parentAccountNumber) ? 0 : data.order?.payment?.parentAccountNumber; @@ -1466,9 +1468,8 @@ export const useMainStore = defineStore({ // These could be undefined this.order.policy.noCoverage = vehicle.noCoverage; - this.order.payment.insuranceCoverage.coverageStatus = vehicle.noCoverage - ? coverageStatuses.NO_COMP - : coverageStatuses.PENDING; + const currentCoverageStatus = vehicle.noCoverage ? coverageStatuses.NO_COMP : coverageStatuses.PENDING; + this.updateCoverageStatus(currentCoverageStatus); this.order.policy.deductible.replace = vehicle.deductible; this.order.policy.deductible.repair = vehicle?.repairWaived ?? false ? 0 : vehicle.deductible; this.order.policy.endorsements = vehicle?.endorsements;