From 090188ed64ec6b66fa6cc53874b1e09f1ce6c70f Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Mon, 4 Mar 2024 13:28:39 -0500 Subject: [PATCH] Partial --- .../coverage-statement/coverage-statement.vue | 191 +++++++++--------- src/store/index.js | 7 +- 2 files changed, 98 insertions(+), 100 deletions(-) diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index 51ad2a5d..80e1665f 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -38,7 +38,7 @@ {{ formattedDeductible }}
{{ formattedServicePrice }}
@@ -53,8 +53,8 @@ ref="verifiedITACAlert" class="mb-5" cmsWidgetName="VerifiedITACAlert" - :manualHeadline="verifiedITACAlertHeader" - :manualCopy="verifiedITACAlertBody" + :manualHeadline="verifiedItacAlertHeader" + :manualCopy="verifiedItacAlertBody" alertClass="alert-success" :isDismissible="false"> @@ -67,18 +67,18 @@ v-html="nextStepsBody"> @@ -88,7 +88,7 @@ cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="navigateBackByVehicleQuestions" - @forwardClicked="forwardButtonAction" /> + @forwardClicked="navigateForward" /> @@ -129,6 +129,9 @@ import navigationScenarios from '@/router/router-constants/navigation-scenarios. import routerParams from '@/router/router-constants/router-params'; import issPageValues from '@/router/router-constants/issPage-values'; import bailoutMessage from '@/constants/bailoutMessage'; +import widgetFields from '@/constants/cms-widget-fields.js'; + +const SAFELITE_PROVIDER = 'Safelite'; export default { name: 'coverage-statement', @@ -163,8 +166,8 @@ export default { ]; const resultMap = await settleAllPromises(promiseResultMap); - const clonedGlassParts = useMainStore().order.lineItems.glassParts - ? JSON.parse(JSON.stringify(useMainStore().order.lineItems.glassParts)) + const clonedGlassParts = useMainStore().lineItems.glassParts + ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts)) : []; const availableLineItems = [ ...(resultMap.supportingItems ?? []), @@ -173,7 +176,7 @@ export default { let hasBailedOut = false; let pricingResults = []; - if (useMainStore().order.policy.policyLookupSuccessful && useMainStore().order.vehicle.policyVehicleId >= 0) { + if (useMainStore().policy.policyLookupSuccessful && useMainStore().vehicle.policyVehicleId >= 0) { await useMainStore().getFinalDeductible(); pricingResults = await useMainStore().getPriceOrderItems(availableLineItems) .catch((err) => { @@ -196,9 +199,9 @@ export default { vm.setCmsContent(resultMap.cmsContent); vm.setSupportingItems(resultMap.supportingItems); // eslint-disable-next-line no-param-reassign - vm.availableLineItems = pricingResults; + vm.setAvailableLineItems(pricingResults); vm.$refs.loadingModal.showModal(); - vm.initializeComponent(availableLineItems); + vm.initializeComponent(); if (!vm.unverified) { useMainStore().disableKeyFields(); } @@ -206,7 +209,14 @@ export default { } }, data() { + const { isRepair } = useMainStore().damage; + const { policyLookupSuccessful, noCoverage } = useMainStore().policy; + const { currentDeductible } = useMainStore().order.currentDeductible; return { + isRepair, + policyLookupSuccessful, + deductibleValue: currentDeductible, + isNoComp: noCoverage ?? false, availableLineItems: [], selectedProvider: '', deductibleText: 'Your deductible is', @@ -219,83 +229,84 @@ export default { rules: { selectionRequired: globalRules.OPTION_REQUIRED }, - supportingItems: null + supportingItems: null, + widget: { + subheader: 'SiteSubHeaderWidget', + verifiedItacAlert: 'VerifiedITACAlert', + explanatoryText: 'ExplanatoryTextWidget', + nextStep: 'NextStepsWidget', + serviceProviderQuestion: 'ServiceProviderQuestion' + } }; }, computed: { - verifiedITACAlertHeader() { - return this.getCmsContent( - 'VerifiedITACAlert', - 'HeadlineText' + coverageStatementSubHeader() { + return this.getTextFromCmsWithCustomIfStatements( + this.widget.subheader, + widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT ); }, - verifiedITACAlertBody() { + verifiedItacAlertHeader() { return this.getCmsContent( - 'VerifiedITACAlert', - 'BodyText' + this.widget.verifiedItacAlert, + widgetFields.ALERT_WIDGET.HEADLINE_TEXT + ); + }, + verifiedItacAlertBody() { + return this.getCmsContent( + this.widget.verifiedItacAlert, + widgetFields.ALERT_WIDGET.BODY_TEXT )?.replaceAll('{custom:costSavings}', this.costSavings); }, - coverageStatementSubHeader() { - return this.getSubheaderTextFromCms('SiteSubHeaderWidget'); - }, secondaryText() { - return this.getSecondaryTextFromCms('SiteSubHeaderWidget'); + return this.getTextFromCmsWithCustomIfStatements( + this.widget.subheader, + widgetFields.CONTENT_GROUP_WIDGET.SECONDARY_TEXT + ); }, explanatoryText() { - return this.getExplantoryTextFromCms('ExplanatoryTextWidget'); + return this.getTextFromCmsWithCustomIfStatements( + this.widget.explanatoryText, + widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT + ); }, nextStepsHeader() { - return this.getHeaderTextFromCms('NextStepsWidget'); + return this.getTextFromCmsWithCustomIfStatements( + this.widget.nextStep, + widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT + ); }, nextStepsBody() { - return this.getBodyTextFromCms('NextStepsWidget')?.replaceAll('{custom:damage}', this.damageText); - }, - continueWithSchedulingBodyText() { - return this.getCmsContent('continueWithSchedulingCopy', 'BodyText'); - }, - unverifiedADASNextStepsBodyText() { - return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText')?.replaceAll('{custom:damage}', this.damageText); - }, - unverifiedNonADASNextStepsBodyText() { - return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText')?.replaceAll('{custom:damage}', this.damageText); - }, - unverifiedNonADASRepairBodyText() { - return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText'); + return this.getTextFromCmsWithCustomIfStatements( + this.widget.nextStep, + widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT + )?.replaceAll('{custom:damage}', this.damageText); }, damageText() { const damageString = getDamageString(); return damageString === 'match' ? '' : damageString; }, - vehicleDeductible() { - const deductible = useMainStore().order.currentDeductible; - return deductible; - }, formattedDeductible() { - return this.getDeductibleString(this.vehicleDeductible); - }, - isDeductibleZero() { - return this.vehicleDeductible === 0; - }, - policyLookupSuccessful() { - return useMainStore().order.policy.policyLookupSuccessful; + return this.getDeductibleString(this.deductibleValue); }, registerClaimSuccessful() { return useMainStore().payment.insuranceCoverage.isVerified; }, verifiedNoComp() { - return this.policyLookupSuccessful ? useMainStore().order.policy.noCoverage : false; + return this.policyLookupSuccessful && this.isNoComp; }, verifiedITAC() { return this.policyLookupSuccessful - && !this.verifiedNoComp - && this.vehicleDeductible > this.totalServicePrice; + && !this.isNoComp + && this.deductibleValue > this.totalServicePrice; }, + // TODO maybe tweak coveredAndServicePriceAboveOrEqualDeductible() { - return !this.verifiedNoComp && this.totalServicePrice >= this.vehicleDeductible; + return !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue; }, verifiedDeductible() { return useMainStore().isClaimRegistrationRequired - ? this.registerClaimSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible && this.vehicleDeductible !== null + ? this.registerClaimSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible && this.deductibleValue !== null : this.policyLookupSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible; }, unverified() { @@ -305,9 +316,7 @@ export default { const parts = useMainStore().order.lineItems.glassParts; return parts !== null && !!parts.find((part) => part.requiresRecalibration); }, - isRepair() { - return useMainStore().order.damage.isRepair; - }, + // TODO replace with better method totalServicePrice() { let total = 0; this.availableLineItems.forEach((lineItem) => { @@ -319,27 +328,30 @@ export default { return this.getServicePriceString(this.totalServicePrice); }, costSavings() { - const savings = this.getITACCostSavings(this.vehicleDeductible, this.totalServicePrice); + const savings = this.getITACCostSavings(this.deductibleValue, this.totalServicePrice); const formattedSavings = parseFloat(savings).toFixed(2); return `$${formattedSavings}`; }, - questionText() { - return this.getCmsContent('ServiceProviderQuestion', 'QuestionText'); + serviceProviderQuestionText() { + return this.getCmsContent( + this.widget.serviceProviderQuestion, + widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT + ); }, - answersFromCms() { - return this.getCmsContent('ServiceProviderQuestion', 'Answers'); + serviceProviderQuestionAnswers() { + return this.getCmsContent( + this.widget.serviceProviderQuestion, + widgetFields.INPUT_QUESTION_WIDGET.ANSWERS + ); }, - displayQuote() { + isQuoteDisplayed() { return this.verifiedITAC || this.verifiedNoComp; } }, watch: { selectedProvider() { - if (this.selectedProvider === 'Safelite') { - this.$refs.siteFooter.updateButtonText('Continue with Safelite'); - } else { - this.$refs.siteFooter.updateButtonText('Continue'); - } + const buttonText = this.selectedProvider === SAFELITE_PROVIDER ? 'Continue with Safelite' : 'Safelite'; + this.$refs.siteFooter.updateButtonText(buttonText); }, nextStepsBody(newValue, oldValue) { if (newValue !== oldValue) { @@ -366,9 +378,6 @@ export default { } this.$refs.loadingModal.hideModal(); }, - async forwardButtonAction() { - return this.navigateForward(); - }, async navigateForward() { if (this.unverified || this.verifiedDeductible) { useMainStore().saveSupportingItems(this.supportingItems); @@ -379,8 +388,8 @@ export default { { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } ); } else if (this.verifiedITAC || this.verifiedNoComp) { - useMainStore().updateIsSafeliteProvider(this.selectedProvider === 'Safelite'); - if (this.selectedProvider === 'Safelite') { + useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER); + if (this.selectedProvider === SAFELITE_PROVIDER) { useMainStore().saveSupportingItems(this.supportingItems); this.$router.navigate( navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, @@ -407,25 +416,9 @@ export default { ); } }, - getHeaderTextFromCms(cmsWidgetName) { - const header = this.getCmsContent(cmsWidgetName, 'HeaderText'); - return processIfStatements(header, 'custom', this.getCustomValueFromString); - }, - getSubheaderTextFromCms(cmsWidgetName) { - const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText'); - return processIfStatements(subHeader, 'custom', this.getCustomValueFromString); - }, - getBodyTextFromCms(cmsWidgetName) { - const bodyText = this.getCmsContent(cmsWidgetName, 'BodyText'); - return processIfStatements(bodyText, 'custom', this.getCustomValueFromString); - }, - getSecondaryTextFromCms(cmsWidgetName) { - const secondaryText = this.getCmsContent(cmsWidgetName, 'SecondaryText'); - return processIfStatements(secondaryText, 'custom', this.getCustomValueFromString); - }, - getExplantoryTextFromCms(cmsWidgetName) { - const explanatoryText = this.getCmsContent(cmsWidgetName, 'BodyText'); - return processIfStatements(explanatoryText, 'custom', this.getCustomValueFromString); + getTextFromCmsWithCustomIfStatements(widgetName, widgetField) { + const rawText = this.getCmsContent(widgetName, widgetField); + return processIfStatements(rawText, 'custom', this.getCustomValueFromString); }, getCustomValueFromString(str) { switch (str) { @@ -444,20 +437,23 @@ export default { case 'nonADASRepair': return this.isRepair; case 'deductibleOverZero': - return this.verifiedDeductible && !this.isDeductibleZero; // TODO what if deductible is negative? + return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative? case 'isDeductibleZero': - return this.verifiedDeductible && this.isDeductibleZero; + return this.verifiedDeductible && this.deductibleValue === 0; default: return null; } }, + // TODO move to common location getTotalLineItemPrice(lineItem) { return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice; }, + // TODO use price formatter getDeductibleString(deductible) { const formattedDeductibleFloat = parseFloat(deductible).toFixed(2); return `$${formattedDeductibleFloat}`; }, + // TODO use price formatter getServicePriceString(price) { const formattedPriceFloat = parseFloat(price).toFixed(2); return `$${formattedPriceFloat}`; @@ -467,6 +463,9 @@ export default { }, setSupportingItems(newSupportingItems) { this.supportingItems = newSupportingItems; + }, + setAvailableLineItems(newAvailableLineItems) { + this.availableLineItems = newAvailableLineItems; } } }; diff --git a/src/store/index.js b/src/store/index.js index 114b9989..c2517558 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -947,10 +947,9 @@ export const useMainStore = defineStore({ }, async getSupportingItems() { - const glassPartsArray = this.order.lineItems.glassParts ?? []; - const { carId } = this.order.vehicle; - const { isRepair } = this.order.damage; - const { numberOfChips } = this.order.damage; + const glassPartsArray = this.lineItems.glassParts ?? []; + const { carId } = this.vehicle; + const { isRepair, numberOfChips } = this.damage; return globalMethods .callHttpClient({