Fixing vehicle damage lines
This commit is contained in:
parent
4b40e1ca6e
commit
73bf00cdd5
5 changed files with 127 additions and 102 deletions
71
src/helpers/damage-review-content-generator.js
Normal file
71
src/helpers/damage-review-content-generator.js
Normal 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 };
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue