Fixing vehicle damage lines

This commit is contained in:
Michaela Brydon 2024-01-19 11:56:52 -05:00
parent 4b40e1ca6e
commit 73bf00cdd5
5 changed files with 127 additions and 102 deletions

View file

@ -0,0 +1,71 @@
import damageLocationsSelected from '@/constants/damage-locations-selected.js';
function getLocationAnswer(damageLocation, locationAnswers) {
return locationAnswers?.find((answer) => answer.Name === damageLocation);
}
function getGlassPieces(damageLocation, glassToReplace) {
return glassToReplace?.filter((item) => item.glassLocation === damageLocation);
}
function getWindshieldCopy(answerContent, glassToReplace, isRepair) {
const windshieldPieces = getGlassPieces(damageLocationsSelected.WINDSHIELD, glassToReplace);
return isRepair || !!windshieldPieces?.length ? [answerContent?.Text] : [];
}
function getRearCopy(answerContent, glassToReplace) {
const rearPieces = getGlassPieces(damageLocationsSelected.REAR, glassToReplace);
return rearPieces?.length ? [answerContent?.Text] : [];
}
function generateBulletedListFromAnswers(answers) {
const items = answers.map((answer) => `<li>${answer.Text}</li>`);
return `<ul>${items.join('')}</ul>`;
}
function getSideCopy(location, locationAnswers, damageAnswers, glassToReplace) {
const sideItems = getGlassPieces(location, glassToReplace);
const damageAnswersOnOrder = damageAnswers?.filter((answer) =>
sideItems?.some((glassPiece) => answer.Name === glassPiece.glassName));
return sideItems?.length
? [
locationAnswers?.Text,
generateBulletedListFromAnswers(damageAnswersOnOrder)
]
: [];
}
function getDamageDisplayContent(
locationAnswers,
driverSideDamageAnswers,
passengerSideDamageAnswers,
glassToReplace,
isRepair
) {
return [
...getWindshieldCopy(
getLocationAnswer(damageLocationsSelected.WINDSHIELD, locationAnswers),
glassToReplace,
isRepair
),
...getSideCopy(
damageLocationsSelected.DRIVER,
getLocationAnswer(damageLocationsSelected.DRIVER, locationAnswers),
driverSideDamageAnswers,
glassToReplace
),
...getSideCopy(
damageLocationsSelected.PASSENGER,
getLocationAnswer(damageLocationsSelected.PASSENGER, locationAnswers),
passengerSideDamageAnswers,
glassToReplace
),
...getRearCopy(
getLocationAnswer(damageLocationsSelected.REAR, locationAnswers),
glassToReplace
)
];
}
export { getDamageDisplayContent, getLocationAnswer };

View file

@ -9,6 +9,8 @@
<script>
import damageLocationsSelected from '@/constants/damage-locations-selected.js';
import reviewBlock from '@/layouts/review-page/review-block/review-block.vue';
import { useMainStore } from '@/store';
import { getDamageDisplayContent, getLocationAnswer } from '@/helpers/damage-review-content-generator.js';
export default {
name: 'damage-review',
@ -21,83 +23,24 @@ export default {
damage: Object
},
emits: ['edit-clicked'],
data() {
return {};
},
computed: {
displayContent() {
return [
...this.windshieldCopy,
...this.driverSideCopy,
...this.passengerSideCopy,
...this.rearCopy
];
const { glassToReplace, isRepair } = useMainStore().order.damage;
return this.getDamageDisplayContent(
this.locationAnswers,
this.driverSideDamageAnswers,
this.passengerSideDamageAnswers,
glassToReplace,
isRepair
);
},
hasWindshieldDamage() {
const windshieldPieces = this.getGlassPieces(damageLocationsSelected.WINDSHIELD);
return this.damage.isRepair || !!windshieldPieces?.length;
driverSideDamageAnswers() {
const answerContent = this.getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
return this.getAnswersNullSafe(answerContent?.SubWidgetName);
},
hasDriverSideDamage() {
const driverPieces = this.getGlassPieces(damageLocationsSelected.DRIVER);
return !!driverPieces?.length;
},
hasPassengerSideDamage() {
const passengerPieces = this.getGlassPieces(damageLocationsSelected.PASSENGER);
return !!passengerPieces?.length;
},
hasRearDamage() {
const rearPieces = this.getGlassPieces(damageLocationsSelected.REAR);
return !!rearPieces?.length;
},
windshieldCopy() {
const answerContent = this.getLocationAnswer(damageLocationsSelected.WINDSHIELD);
if (this.hasWindshieldDamage) {
return [answerContent?.Text];
}
return [];
},
driverSideCopy() {
const answerContent = this.getLocationAnswer(damageLocationsSelected.DRIVER);
const damageAnswers = this.getAnswersNullSafe(answerContent?.SubWidgetName);
const driverSideItems = this.getGlassPieces(damageLocationsSelected.DRIVER);
const damageAnswersOnOrder = damageAnswers?.filter((answer) =>
driverSideItems?.some((glassPiece) => answer.Name === glassPiece.glassName));
if (this.hasDriverSideDamage) {
return [
answerContent?.Text,
this.generateBulletedListFromAnswers(damageAnswersOnOrder)
];
}
return [];
},
passengerSideCopy() {
const answerContent = this.getLocationAnswer(damageLocationsSelected.PASSENGER);
const damageAnswers = this.getAnswersNullSafe(answerContent?.SubWidgetName);
const passengerSideItems = this.getGlassPieces(damageLocationsSelected.PASSENGER);
const damageAnswersOnOrder = damageAnswers?.filter((answer) =>
passengerSideItems?.some((glassPiece) => answer.Name === glassPiece.glassName));
if (this.hasPassengerSideDamage) {
return [
answerContent?.Text,
this.generateBulletedListFromAnswers(damageAnswersOnOrder)
];
}
return [];
},
rearCopy() {
const answerContent = this.getLocationAnswer(damageLocationsSelected.REAR);
if (this.hasRearDamage) {
return [answerContent?.Text];
}
return [];
passengerSideDamageAnswers() {
const answerContent = this.getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
return this.getAnswersNullSafe(answerContent?.SubWidgetName);
},
locationAnswers() {
return this.getAnswersNullSafe(this.damageLocationsWidgetName);
@ -109,26 +52,10 @@ export default {
},
getAnswersNullSafe(widgetName) {
const rawAnswers = this.getCmsContent(widgetName, 'Answers');
return rawAnswers || [];
},
getLocationAnswer(damageLocation) {
return this.locationAnswers?.find((answer) => answer.Name === damageLocation);
},
getGlassPieces(damageLocation) {
return this.damage?.glassToReplace?.filter((item) => item.glassLocation === damageLocation);
},
generateBulletedListFromAnswers(answers) {
let list = '<ul>';
answers.forEach((answer) => {
list += `<li>${answer.Text}</li>`;
});
list += '</ul>';
return list;
}
getDamageDisplayContent,
getLocationAnswer
}
};
</script>

View file

@ -21,8 +21,8 @@
<p
v-for="line in lines"
:key="line"
class="small review-block__body--line">
{{ line }}
class="small review-block__body--line"
v-html="line">
</p>
</div>
</template>

View file

@ -78,7 +78,9 @@
:customText="orderDetailsBody"
:marginTopSizeOverride="4"
class="mb-4 px-4 small text-color--darker-gray" />
<deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
<deductibleBox
ref="deductibleBox"
:value="deductibleBoxValue" />
</div>
<siteFooter
ref="siteFooter"
@ -109,6 +111,8 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
import widgetFields from '@/constants/cms-widget-fields.js';
import { useMainStore } from '@/store';
import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars } from '@/helpers/text-helper.js';
import { getDamageDisplayContent, getLocationAnswer } from '@/helpers/damage-review-content-generator.js';
import damageLocationsSelected from '@/constants/damage-locations-selected.js';
const VERIFYING_COVERAGE = 'Verifying coverage';
@ -148,6 +152,7 @@ export default {
shop: 'PreferredShopSubTitle',
contactInfo: 'ContactDetailsSubTitle'
},
damageLocations: 'DamageLocationsWidget',
orderDetails: 'OrderDetailsContent',
footer: 'SiteFooterWidget'
},
@ -197,15 +202,34 @@ export default {
.join(' ');
return [line];
},
locationAnswers() {
return this.getAnswersNullSafe(this.widget.damageLocations);
},
driverSideDamageAnswers() {
const answerContent = this.getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
return this.getAnswersNullSafe(answerContent?.SubWidgetName);
},
passengerSideDamageAnswers() {
const answerContent = this.getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
return this.getAnswersNullSafe(answerContent?.SubWidgetName);
},
// TODO finish
getDamageLines() {
return [useMainStore().order.policy.damageCause ?? ''];
const { glassToReplace, isRepair } = useMainStore().order.damage;
return this.getDamageDisplayContent(
this.locationAnswers,
this.driverSideDamageAnswers,
this.passengerSideDamageAnswers,
glassToReplace,
isRepair
);
},
getPreferredShopLines() {
const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
const { streetAddress, city, state, zipCode } = address;
const displayAddress = this.formatAddress(streetAddress, null, city, state, zipCode);
const displayPhoneNumber = this.toDisplayPhoneNumber(phoneNumber);
return [this.companyName ?? '', displayAddress, displayPhoneNumber];
return [this.toTitleCase(this.companyName ?? ''), displayAddress, displayPhoneNumber];
},
getContactInfoLines() {
const { firstName, lastName, emailAddress, phoneNumber } = useMainStore().contactInfo;
@ -231,15 +255,12 @@ export default {
return {
title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
lines,
onClickEdit: this.getNavigateByScenarioMethod(scenario)
onClickEdit: () => this.navigate(scenario)
};
},
forwardButtonAction() {
this.navigate(this.navigationScenarios.CLICKED_FORWARD);
},
getNavigateByScenarioMethod(scenario) {
return () => this.navigate(scenario);
},
navigate(scenario) {
this.$router.navigate(scenario, this.$route);
},
@ -255,12 +276,18 @@ export default {
return null;
}
},
getAnswersNullSafe(widgetName) {
const rawAnswers = this.getCmsContent(widgetName, 'Answers');
return rawAnswers || [];
},
processIfStatements,
getStringWithCustomValues,
toDisplayPhoneNumber,
toTitleCase,
formatAddress,
formatAmountInDollars
formatAmountInDollars,
getDamageDisplayContent,
getLocationAnswer
}
};
</script>

View file

@ -13,7 +13,6 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
import coverageStatuses from '@/constants/coverage-statuses';
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
import { convertDateStringToDate, getDateDifferenceInDays, militaryToTwelveHourTime } from '@/helpers/date-helper';
// import endorsementOptions from '@/constants/endorsement-options';
const storeId = 'main';
@ -220,6 +219,7 @@ export const useMainStore = defineStore({
lineItems: (state) => state.order.lineItems,
payment: (state) => state.order.payment,
policy: (state) => state.order.policy,
hasExactlyOneChip: () => state.order.damage.numberOfChips === 1,
hasAnyNonWindshieldGlassParts: (s) => !s.order.policy.isDamageGlassOnly,
isMobileAppointment: (state) => state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
|| state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP,