INSR-7772: tpa-submit parity updates
- Rearrange/style tpa-submit page
- Update supporting components to better match heritage
- DeductibleBox
- ReviewBlock
- Alert
- Update store logic to actually handle extension
- Add/update recal modal and contact details modal
- Update titleCase to treat dashes like spaces
This commit is contained in:
Alex Humphries
parent
23223e759d
commit
b0b31df8b0
9 changed files with 299 additions and 226 deletions
|
|
@ -71,6 +71,9 @@ export const pageProgressMapper = {
|
|||
'tpa-search': {
|
||||
percent: 85
|
||||
},
|
||||
'tpa-submit': {
|
||||
percent: 95
|
||||
},
|
||||
'tpa-confirmation': {
|
||||
percent: 100
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,11 +34,8 @@ export function createOrderedListFromStringOfParagraphs(stringOfParagraphs) {
|
|||
* @returns {string}
|
||||
*/
|
||||
export function toTitleCase(text) {
|
||||
const temp = text?.toLowerCase()?.split(' ') ?? [];
|
||||
for (let i = 0; i < temp.length; i++) {
|
||||
temp[i] = temp[i].charAt(0).toUpperCase() + temp[i].slice(1);
|
||||
}
|
||||
return temp.join(' ');
|
||||
let temp = text.toLowerCase();
|
||||
return temp.replace(/(^|\s|-)\S/g, (letter) => letter.toUpperCase());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<modal
|
||||
:ref="modalName"
|
||||
:modalPosition="modalPositions.center"
|
||||
:headerText="headerText"
|
||||
:footerButtonText="footerButtonText"
|
||||
:onModalClosedCallback="resetFormValues"
|
||||
|
|
@ -8,25 +9,27 @@
|
|||
@isModalOpened="setModalStatus"
|
||||
@footerButtonEvent="clickFooterButtonEvent">
|
||||
<template v-if="isModalOpened">
|
||||
<textboxQuestion
|
||||
ref="firstNameQuestion"
|
||||
v-model="firstName"
|
||||
inputId="firstName"
|
||||
:cmsWidgetName="widget.firstNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.firstName" />
|
||||
<textboxQuestion
|
||||
ref="lastNameQuestion"
|
||||
v-model="lastName"
|
||||
class="mt-4"
|
||||
inputId="lastName"
|
||||
:cmsWidgetName="widget.lastNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.lastName" />
|
||||
<div class="row">
|
||||
<textboxQuestion
|
||||
class="col"
|
||||
ref="firstNameQuestion"
|
||||
v-model="firstName"
|
||||
inputId="firstName"
|
||||
:cmsWidgetName="widget.firstNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.firstName" />
|
||||
<textboxQuestion
|
||||
class="col"
|
||||
ref="lastNameQuestion"
|
||||
v-model="lastName"
|
||||
inputId="lastName"
|
||||
:cmsWidgetName="widget.lastNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.lastName" />
|
||||
</div>
|
||||
<textboxQuestion
|
||||
ref="emailQuestion"
|
||||
v-model="emailAddress"
|
||||
class="mt-4"
|
||||
inputId="emailAddress"
|
||||
:cmsWidgetName="widget.emailQuestion"
|
||||
isRequired
|
||||
|
|
@ -34,13 +37,19 @@
|
|||
<textboxQuestion
|
||||
ref="phoneNumberQuestion"
|
||||
v-model="phoneNumber"
|
||||
class="mt-4"
|
||||
inputId="phoneNumber"
|
||||
:cmsWidgetName="widget.phoneNumberQuestion"
|
||||
isRequired
|
||||
:mask="phoneMask"
|
||||
disableAutoFill
|
||||
:validationRules="rules.phoneNumber" />
|
||||
<textboxQuestion
|
||||
ref="extensionQuestion"
|
||||
v-model="extension"
|
||||
inputId="extension"
|
||||
:cmsWidgetName="widget.extensionQuestion"
|
||||
disableAutoFill
|
||||
:validationRules="rules.extension" />
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
|
@ -51,10 +60,11 @@ import modal from '@/digital-components/modal/modal.vue';
|
|||
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
|
||||
|
||||
// Supporting Files
|
||||
import { useMainStore } from '@/store/index.js';
|
||||
import { useMainStore } from '@/store';
|
||||
import globalRules from '@/constants/global-rules.js';
|
||||
import MaskaFormattedMasks from '@/constants/maska-masks';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
import { modalPositions } from '@/constants/component-variants';
|
||||
|
||||
export default {
|
||||
name: 'contact-details-drawer',
|
||||
|
|
@ -67,27 +77,39 @@ export default {
|
|||
const { firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
servicePhone } = useMainStore().contactInfo;
|
||||
servicePhone,
|
||||
extension } = useMainStore().contactInfo;
|
||||
console.log('Initial contact info loaded:', {
|
||||
firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
servicePhone,
|
||||
extension
|
||||
});
|
||||
return {
|
||||
isModalOpened: false,
|
||||
firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
phoneNumber: servicePhone,
|
||||
extension: extension,
|
||||
widget: {
|
||||
title: 'ContactDetailsDrawerHeaderWidget',
|
||||
firstNameQuestion: 'FirstNameQuestionWidget',
|
||||
lastNameQuestion: 'LastNameQuestionWidget',
|
||||
emailQuestion: 'EmailQuestionWidget',
|
||||
phoneNumberQuestion: 'PhoneNumberQuestionWidget',
|
||||
extensionQuestion: 'ExtensionQuestionWidget',
|
||||
drawerFooter: 'ContactDetailsDrawerFooterWidget'
|
||||
},
|
||||
rules: {
|
||||
firstName: globalRules.FIRST_NAME_REQUIRED,
|
||||
lastName: globalRules.LAST_NAME_REQUIRED,
|
||||
emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
|
||||
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
|
||||
}
|
||||
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
|
||||
extension: `${globalRules.EXTENSION_FORMAT}`
|
||||
},
|
||||
modalPositions
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -121,10 +143,11 @@ export default {
|
|||
lastName: this.lastName,
|
||||
emailAddress: this.emailAddress
|
||||
};
|
||||
useMainStore().updateContactInfo(contactInfo);
|
||||
useMainStore().updatePhoneNumbers({
|
||||
this.mainStore.updateContactInfo(contactInfo);
|
||||
this.mainStore.updatePhoneNumbers({
|
||||
home: this.phoneNumber,
|
||||
service: this.phoneNumber
|
||||
service: this.phoneNumber,
|
||||
extension: this.extension
|
||||
});
|
||||
this.$emit('update-contact-details');
|
||||
},
|
||||
|
|
@ -132,11 +155,20 @@ export default {
|
|||
const { firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
servicePhone } = useMainStore().contactInfo;
|
||||
servicePhone,
|
||||
extension } = this.mainStore.contactInfo;
|
||||
console.log('Resetting form values to:', {
|
||||
firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
servicePhone,
|
||||
extension
|
||||
});
|
||||
this.firstName = firstName;
|
||||
this.lastName = lastName;
|
||||
this.emailAddress = emailAddress;
|
||||
this.phoneNumber = servicePhone;
|
||||
this.extension = extension;
|
||||
},
|
||||
openModal() {
|
||||
this.modal.openModal();
|
||||
|
|
@ -155,5 +187,14 @@ export default {
|
|||
font-size: $h5-font-size;
|
||||
font-weight: $font-weight-normal !important;
|
||||
}
|
||||
.textbox-question {
|
||||
margin-bottom: 1.25rem;
|
||||
:deep(label:has(b)) {
|
||||
font-weight: $font-weight-normal;
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
<template>
|
||||
<div
|
||||
id="deductibleBox"
|
||||
class="deductible-box d-flex justify-content-between align-items-center py-2">
|
||||
<p
|
||||
id="deductibleLabel"
|
||||
class="deductible-box__text">
|
||||
Deductible
|
||||
</p>
|
||||
<p
|
||||
id="deductibleValue"
|
||||
class="deductible-box__text">
|
||||
{{ value }}
|
||||
</p>
|
||||
class="deductible-box">
|
||||
<span class="deductible-label">Deductible:</span>
|
||||
<span class="deductible-value">{{ value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -28,12 +20,17 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.deductible-box {
|
||||
background-color: $green;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.deductible-box__text {
|
||||
color: white;
|
||||
.deductible-label {
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
}
|
||||
.deductible-value {
|
||||
color: $green;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,28 @@
|
|||
<template>
|
||||
<div class="review-block">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="review-block__header small-strong pb-1">
|
||||
{{ customHeaderText }}
|
||||
</p>
|
||||
<textLink
|
||||
linkType="textSmall"
|
||||
:text="editLinkText"
|
||||
useLoadingModal
|
||||
href="javascript:void(0)"
|
||||
class="link"
|
||||
@clickEvent="editClicked">
|
||||
<template
|
||||
v-if="editScreenReaderTextCmsWidgetName"
|
||||
#after-text>
|
||||
<span class="sr-only"> {{ screenReaderOnlyText }} </span>
|
||||
</template>
|
||||
</textLink>
|
||||
</div>
|
||||
<p
|
||||
v-for="line in lines"
|
||||
:key="line"
|
||||
class="small review-block__body--line"
|
||||
v-html="line">
|
||||
<p class="review-block__header">
|
||||
{{ customHeaderText }}
|
||||
</p>
|
||||
<div class="review-body">
|
||||
<p
|
||||
v-for="line in lines"
|
||||
:key="line"
|
||||
v-html="line">
|
||||
</p>
|
||||
</div>
|
||||
<textLink
|
||||
linkType="text"
|
||||
:text="editLinkText"
|
||||
useLoadingModal
|
||||
href="javascript:void(0)"
|
||||
class="link"
|
||||
@clickEvent="editClicked">
|
||||
<template
|
||||
v-if="editScreenReaderTextCmsWidgetName"
|
||||
#after-text>
|
||||
<span class="sr-only"> {{ screenReaderOnlyText }} </span>
|
||||
</template>
|
||||
</textLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -36,14 +35,13 @@ export default {
|
|||
props: {
|
||||
customHeaderText: String,
|
||||
editScreenReaderTextCmsWidgetName: String,
|
||||
lines: Array
|
||||
lines: Array,
|
||||
editLinkText: {
|
||||
type: String,
|
||||
default: 'Edit'
|
||||
},
|
||||
},
|
||||
emits: ['click-edit'],
|
||||
data() {
|
||||
return {
|
||||
editLinkText: 'Edit'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
editClicked() {
|
||||
this.$emit('click-edit');
|
||||
|
|
@ -59,12 +57,16 @@ export default {
|
|||
}
|
||||
.review-block__header {
|
||||
color: $black;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
.review-block__body--line {
|
||||
color: $gray-600;
|
||||
|
||||
.review-body {
|
||||
margin-bottom: .625rem
|
||||
}
|
||||
|
||||
.link {
|
||||
text-underline-offset: 1px;
|
||||
font-weight: $font-weight-normal
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,53 +13,52 @@
|
|||
</div>
|
||||
<div class="iss-heritage-container-width">
|
||||
<div class="tpa-submit-container iss-heritage-content-container-width">
|
||||
<!-- TODO fix styling -->
|
||||
<alert
|
||||
ref="alertIncomplete"
|
||||
alertClass="alert-warning"
|
||||
:cmsWidgetName="widget.alertIncomplete"
|
||||
/>
|
||||
<textBlock
|
||||
ref="subHeaderTitle"
|
||||
:customText="subHeaderTitle"
|
||||
justifyText="center"
|
||||
:marginTopSizeOverride="4"
|
||||
class="text-color--black fs-5 tpa-submit__title--line-height" />
|
||||
class="tpa-submit-title"/>
|
||||
<textBlock
|
||||
id="tpaSubmitSubHeaderBodyOne"
|
||||
ref="tpaSubmitSubHeaderBodyOne"
|
||||
:customText="subHeaderBodyOne"
|
||||
class="small text-color--darker-gray" />
|
||||
<textBlock
|
||||
id="tpaSubmitSubHeaderBodyTwo"
|
||||
ref="tpaSubmitSubHeaderBodyTwo"
|
||||
:customText="subHeaderBodyTwo"
|
||||
class="mb-4 small text-color--darker-gray" />
|
||||
<buttonMain
|
||||
ref="buttonMainOne"
|
||||
variant="success"
|
||||
:buttonText="forwardButtonText"
|
||||
class="w-100 mb-5"
|
||||
@clickEvent="forwardButtonAction" />
|
||||
<hr class="mb-0" />
|
||||
:customText="subHeaderBodyOne" />
|
||||
<alert
|
||||
v-if="recalibrationRequired"
|
||||
ref="alertRecalWarning"
|
||||
alertClass="alert-warning recal-alert"
|
||||
:isCollapsible="true"
|
||||
:cmsWidgetName="widget.alertRecalWarning"
|
||||
@textLinkClicked="openRecalModal" />
|
||||
<modal
|
||||
ref="recalModal"
|
||||
class="recal-modal"
|
||||
:modalPosition="modalPositions.center"
|
||||
:headerText="recalModalContent.headerText"
|
||||
:footerButtonText="recalModalContent.footerButtonText"
|
||||
@footerButtonEvent="closeRecalModal">
|
||||
<div class="recal-modal-subheader">{{ recalModalContent.subHeaderText }}</div>
|
||||
<img class="recal-modal-image" :src="recalModalContent.image" />
|
||||
<div class="recal-modal-body" v-html="recalModalContent.bodyText"></div>
|
||||
</modal>
|
||||
<hr />
|
||||
<div id="serviceSummarySection">
|
||||
<textBlock
|
||||
id="tpaSubmitServiceSummaryTitle"
|
||||
ref="tpaSubmitServiceSummaryTitle"
|
||||
:customText="serviceSummaryText"
|
||||
:marginTopSizeOverride="4"
|
||||
class="fw-bold fs-1 lh-lg text-color--black" />
|
||||
<div class="px-4 my-3">
|
||||
<div
|
||||
v-for="(section, index) in sections"
|
||||
:key="section.title">
|
||||
<hr
|
||||
v-if="index !== 0"
|
||||
class="my-3" />
|
||||
<reviewBlock
|
||||
:id="'review-block-' + index"
|
||||
:customHeaderText="section.title"
|
||||
:lines="section.lines"
|
||||
@clickEdit="() => section.onClickEdit()" />
|
||||
</div>
|
||||
<div
|
||||
v-for="(section, index) in sections"
|
||||
:key="section.title">
|
||||
<hr v-if="index !== 0" />
|
||||
<reviewBlock
|
||||
:id="'review-block-' + index"
|
||||
:customHeaderText="section.title"
|
||||
:lines="section.lines"
|
||||
:editLinkText="section.editLinkText"
|
||||
@clickEdit="() => section.onClickEdit()" />
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-0" />
|
||||
<hr />
|
||||
<div
|
||||
id="submitOrderDetailsSection"
|
||||
ref="submitOrderDetailsSection">
|
||||
|
|
@ -67,17 +66,10 @@
|
|||
id="tpaSubmitOrderDetailsTitle"
|
||||
ref="tpaSubmitOrderDetailsTitle"
|
||||
:customText="orderDetailsTitle"
|
||||
:marginTopSizeOverride="4"
|
||||
class="fw-bold text-color--black" />
|
||||
<textBlock
|
||||
id="tpaSubmitOrderDetailsBody"
|
||||
ref="tpaSubmitOrderDetailsBody"
|
||||
:customText="orderDetailsBody"
|
||||
:marginTopSizeOverride="4"
|
||||
class="mb-4 px-4 small text-color--darker-gray" />
|
||||
:marginTopSizeOverride="0"
|
||||
class="fw-bold order-details-title" />
|
||||
<deductibleBox
|
||||
ref="deductibleBox"
|
||||
class="px-3"
|
||||
:value="deductibleBoxValue" />
|
||||
</div>
|
||||
<siteFooter
|
||||
|
|
@ -104,6 +96,8 @@ import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
|
|||
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
|
||||
import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import modal from '@/digital-components/modal/modal.vue';
|
||||
|
||||
// Supporting files
|
||||
import {
|
||||
|
|
@ -114,21 +108,16 @@ import {
|
|||
import { Form } from 'vee-validate';
|
||||
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';
|
||||
import { submitWorkOrder } from '@/helpers/order-helper.js';
|
||||
import bailoutMessage from '@/constants/bailoutMessage';
|
||||
import submitType from '@/constants/submit-type';
|
||||
import { modalPositions } from '@/constants/component-variants';
|
||||
|
||||
const VERIFYING_COVERAGE = 'Verifying coverage';
|
||||
|
||||
|
|
@ -143,7 +132,9 @@ export default {
|
|||
siteFooter,
|
||||
contactDetailsDrawer,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form
|
||||
Form,
|
||||
alert,
|
||||
modal
|
||||
},
|
||||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -154,27 +145,19 @@ export default {
|
|||
});
|
||||
},
|
||||
data() {
|
||||
const { companyName } = useMainStore().order.serviceLocation.provider;
|
||||
return {
|
||||
sections: [],
|
||||
widget: {
|
||||
siteHeader: 'SiteHeaderWidget',
|
||||
siteSubHeader: 'SiteSubHeaderWidget',
|
||||
serviceSummary: 'ServiceSummaryContent',
|
||||
subheader: {
|
||||
vehicle: 'VehicleSubTitle',
|
||||
damage: 'DamageSubTitle',
|
||||
shop: 'PreferredShopSubTitle',
|
||||
contactInfo: 'ContactDetailsSubTitle'
|
||||
},
|
||||
damageLocations: 'DamageLocationsWidget',
|
||||
orderDetails: 'OrderDetailsContent',
|
||||
footer: 'SiteFooterWidget'
|
||||
footer: 'SiteFooterWidget',
|
||||
alertIncomplete: 'AlertIncompleteWidget',
|
||||
alertRecalWarning: 'AlertRecalWarningWidget',
|
||||
editShopLinkText: 'EditShopLinkTextWidget',
|
||||
contactDetails: 'ContactDetailsSectionWidget'
|
||||
},
|
||||
companyName,
|
||||
customValueMap: {
|
||||
glassShop: companyName
|
||||
}
|
||||
modalPositions
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -227,53 +210,21 @@ export default {
|
|||
);
|
||||
},
|
||||
isVerified() {
|
||||
return useMainStore().isVerified;
|
||||
return this.mainStore.isVerified;
|
||||
},
|
||||
currentDeductible() {
|
||||
return useMainStore().order.currentDeductible;
|
||||
return this.mainStore.order.currentDeductible;
|
||||
},
|
||||
deductibleBoxValue() {
|
||||
return this.isVerified
|
||||
? formatAmountInDollars(this.currentDeductible)
|
||||
: VERIFYING_COVERAGE;
|
||||
},
|
||||
getVehicleLines() {
|
||||
const { year, make, model } = useMainStore().order.vehicle;
|
||||
const line = [year, make, model]
|
||||
.filter((v) => v != null && v !== '')
|
||||
.join(' ');
|
||||
return [line];
|
||||
},
|
||||
locationAnswers() {
|
||||
return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
|
||||
},
|
||||
driverSideDamageAnswers() {
|
||||
const answerContent = getLocationAnswer(
|
||||
damageLocationsSelected.DRIVER,
|
||||
this.locationAnswers
|
||||
);
|
||||
return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
|
||||
},
|
||||
passengerSideDamageAnswers() {
|
||||
const answerContent = getLocationAnswer(
|
||||
damageLocationsSelected.PASSENGER,
|
||||
this.locationAnswers
|
||||
);
|
||||
return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
|
||||
},
|
||||
getDamageLines() {
|
||||
const { glassToReplace, isRepair } = useMainStore().order.damage;
|
||||
return getDamageDisplayContent(
|
||||
this.locationAnswers,
|
||||
this.driverSideDamageAnswers,
|
||||
this.passengerSideDamageAnswers,
|
||||
glassToReplace,
|
||||
isRepair
|
||||
);
|
||||
getPreferredShopTitle() {
|
||||
return toTitleCase(this.mainStore.order.serviceLocation.provider.companyName ?? '');
|
||||
},
|
||||
getPreferredShopLines() {
|
||||
const { phoneNumber, address } =
|
||||
useMainStore().order.serviceLocation.provider;
|
||||
const { phoneNumber, address } = this.mainStore.order.serviceLocation.provider;
|
||||
const { streetAddress, city, state, zipCode } = address;
|
||||
const displayAddress = formatAddress(
|
||||
streetAddress,
|
||||
|
|
@ -284,58 +235,82 @@ export default {
|
|||
);
|
||||
const displayPhoneNumber = toDisplayPhoneNumber(phoneNumber);
|
||||
return [
|
||||
toTitleCase(this.companyName ?? ''),
|
||||
displayAddress,
|
||||
displayPhoneNumber
|
||||
];
|
||||
},
|
||||
getEditShopLinkText() {
|
||||
return this.getCmsContent(
|
||||
this.widget.editShopLinkText,
|
||||
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
||||
);
|
||||
},
|
||||
getContactInfoTitle() {
|
||||
const cmsContent = this.getCmsContent(
|
||||
this.widget.contactDetails,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
|
||||
);
|
||||
return getStringWithCustomValues(cmsContent, this.customValueMap);
|
||||
},
|
||||
getContactInfoLines() {
|
||||
const { firstName, lastName, emailAddress, servicePhone } =
|
||||
useMainStore().contactInfo;
|
||||
const cmsContent = this.getCmsContent(
|
||||
this.widget.contactDetails,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
||||
);
|
||||
return [
|
||||
`${firstName} ${lastName}`,
|
||||
emailAddress ?? '',
|
||||
toDisplayPhoneNumber(servicePhone)
|
||||
getStringWithCustomValues(cmsContent, this.customValueMap)
|
||||
];
|
||||
},
|
||||
getEditContactInfoLinkText() {
|
||||
return this.getCmsContent(
|
||||
this.widget.contactDetails,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT
|
||||
);
|
||||
},
|
||||
recalModalContent() {
|
||||
const widgetName = 'RecalModal';
|
||||
return {
|
||||
headerText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT),
|
||||
subHeaderText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT),
|
||||
bodyText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT),
|
||||
footerButtonText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT),
|
||||
image: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE)
|
||||
}
|
||||
},
|
||||
recalibrationRequired() {
|
||||
return this.mainStore.hasRecalibrationPart;
|
||||
},
|
||||
customValueMap() {
|
||||
return {
|
||||
glassShop: this.getPreferredShopTitle,
|
||||
contactPhone: toDisplayPhoneNumber(this.mainStore.contactInfo.servicePhone),
|
||||
contactEmail: this.mainStore.contactInfo.emailAddress
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSections() {
|
||||
const vehicleScenario = useMainStore().isPolicyVehicle
|
||||
? this.navigationScenarios.EDIT_POLICY_VEHICLE
|
||||
: this.navigationScenarios.EDIT_VEHICLE;
|
||||
this.sections = [
|
||||
this.getSection(
|
||||
this.widget.subheader.vehicle,
|
||||
this.getVehicleLines,
|
||||
() => this.navigate(vehicleScenario)
|
||||
),
|
||||
// eslint-disable-next-line max-len
|
||||
this.getSection(
|
||||
this.widget.subheader.damage,
|
||||
this.getDamageLines,
|
||||
() => this.navigate(this.navigationScenarios.EDIT_DAMAGE)
|
||||
),
|
||||
this.getSection(
|
||||
this.widget.subheader.shop,
|
||||
this.getPreferredShopTitle,
|
||||
this.getPreferredShopLines,
|
||||
() => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
|
||||
this.getEditShopLinkText,
|
||||
() => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP),
|
||||
),
|
||||
// eslint-disable-next-line max-len
|
||||
this.getSection(
|
||||
this.widget.subheader.contactInfo,
|
||||
this.getContactInfoTitle,
|
||||
this.getContactInfoLines,
|
||||
this.getEditContactInfoLinkText,
|
||||
this.openContactDetailsModal
|
||||
)
|
||||
];
|
||||
},
|
||||
getSection(widgetName, lines, onClick) {
|
||||
getSection(title, lines, editLinkText, onClick) {
|
||||
return {
|
||||
title: this.getCmsContent(
|
||||
widgetName,
|
||||
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
||||
),
|
||||
title: title,
|
||||
lines,
|
||||
editLinkText,
|
||||
onClickEdit: onClick
|
||||
};
|
||||
},
|
||||
|
|
@ -344,7 +319,7 @@ export default {
|
|||
await submitWorkOrder({ submitType: submitType.TPA }).then(() => {
|
||||
this.navigate(this.navigationScenarios.CLICKED_FORWARD);
|
||||
}).catch((submitError) => {
|
||||
useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data));
|
||||
this.mainStore.setBailout(bailoutMessage.saveSessionError(submitError.data));
|
||||
this.navigate(
|
||||
this.navigationScenarios.SAVE_SESSION_FAILED,
|
||||
this.$route,
|
||||
|
|
@ -372,6 +347,12 @@ export default {
|
|||
},
|
||||
openContactDetailsModal() {
|
||||
this.$refs.contactDetailsDrawer.openModal();
|
||||
},
|
||||
openRecalModal() {
|
||||
this.$refs.recalModal.openModal();
|
||||
},
|
||||
closeRecalModal() {
|
||||
this.$refs.recalModal.closeModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -387,26 +368,69 @@ export default {
|
|||
}
|
||||
|
||||
.tpa-submit {
|
||||
#tpaSubmitOrderDetailsBody {
|
||||
p {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.tpa-submit__title--line-height {
|
||||
line-height: map-get($spacers, 6);
|
||||
.alert-warning {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.text-color--darker-gray {
|
||||
color: $darker-gray;
|
||||
.tpa-submit-title {
|
||||
font-size: 1.25rem;
|
||||
color: $black;
|
||||
font-weight: 400;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
|
||||
.text-color--black {
|
||||
.recal-alert {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
hr {
|
||||
opacity: 1;
|
||||
color: $gray-350;
|
||||
margin: 1.875rem 0rem;
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.order-details-title {
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
|
||||
.modal.recal-modal .modal-dialog {
|
||||
.modal-header {
|
||||
justify-content: start;
|
||||
margin: 0rem;
|
||||
padding: 1.25rem 1.25rem .625rem 1.25rem;
|
||||
.modal-title {
|
||||
font-weight: $font-weight-bolder;
|
||||
font-size: .875rem;
|
||||
line-height: 1.25rem;
|
||||
text-align: start;
|
||||
justify-content: start;
|
||||
}
|
||||
.btn-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
padding: 0rem 1.25rem 1.25rem 1.25rem;
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.recal-modal-subheader {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $black;
|
||||
}
|
||||
.recal-modal-image {
|
||||
margin: 1.25rem 0rem
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -197,6 +197,7 @@ export const getDefaultState = () => ({
|
|||
homePhone: null,
|
||||
alternativePhone: null,
|
||||
servicePhone: null,
|
||||
extension: null,
|
||||
requestTextUpdates: false,
|
||||
notesForTechnician: ''
|
||||
},
|
||||
|
|
@ -354,6 +355,7 @@ export const useMainStore = defineStore({
|
|||
homePhone: s.order.contactInfo.homePhone,
|
||||
alternativePhone: s.order.contactInfo.alternativePhone,
|
||||
servicePhone: s.order.contactInfo.servicePhone,
|
||||
extension: s.order.contactInfo.extension,
|
||||
requestTextUpdates: s.order.contactInfo.requestTextUpdates ?? false,
|
||||
notesForTechnician: s.order.contactInfo.notesForTechnician
|
||||
}),
|
||||
|
|
@ -2572,9 +2574,12 @@ export const useMainStore = defineStore({
|
|||
|
||||
updatePhoneNumbers(phoneNumbers) {
|
||||
const contact = this.order.contactInfo;
|
||||
console.log('Updating phone numbers with:', phoneNumbers);
|
||||
console.log('Current contact info before update:', contact);
|
||||
contact.homePhone = phoneNumbers.home !== undefined ? phoneNumbers.home : contact.homePhone;
|
||||
contact.alternativePhone = phoneNumbers.alternative !== undefined ? phoneNumbers.alternative : contact.alternativePhone;
|
||||
contact.servicePhone = phoneNumbers.service !== undefined ? phoneNumbers.service : contact.servicePhone;
|
||||
contact.extension = phoneNumbers.extension !== undefined ? phoneNumbers.extension : contact.extension;
|
||||
},
|
||||
|
||||
GetExperimentsByUser(userId) {
|
||||
|
|
|
|||
|
|
@ -494,18 +494,21 @@ describe('Store', () => {
|
|||
const homePhone = getRandomInt(1000000000, 9999999999);
|
||||
const servicePhone = getRandomInt(1000000000, 9999999999);
|
||||
const altPhone = getRandomInt(1000000000, 9999999999);
|
||||
const extension = getRandomInt(10000, 99999);
|
||||
|
||||
// Act
|
||||
store.updatePhoneNumbers({
|
||||
home: homePhone,
|
||||
service: servicePhone,
|
||||
alternative: altPhone
|
||||
alternative: altPhone,
|
||||
extension: extension
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(store.contactInfo.homePhone).toEqual(homePhone);
|
||||
expect(store.contactInfo.servicePhone).toEqual(servicePhone);
|
||||
expect(store.contactInfo.alternativePhone).toEqual(altPhone);
|
||||
expect(store.contactInfo.extension).toEqual(extension);
|
||||
});
|
||||
it('All null values => contact info set in store to all nulls', () => {
|
||||
// Act
|
||||
|
|
|
|||
|
|
@ -226,6 +226,7 @@ export default {
|
|||
padding: 0rem .625rem;
|
||||
}
|
||||
.btn-collapse {
|
||||
display: flex;
|
||||
border: none;
|
||||
background: none;
|
||||
min-width: 1rem;
|
||||
|
|
@ -242,7 +243,7 @@ export default {
|
|||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
border-color: transparent;
|
||||
.btn-close {
|
||||
|
|
|
|||
Loading…
Reference in a new issue