-
+
+ :customText="subHeaderBodyOne" /> +
+ ![]()
+
+
+
+ :customText="subHeaderBodyOne" /> +
{{ recalModalContent.subHeaderText }}
+
-
+
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 +229,86 @@ 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() {
+ let contactPhone = toDisplayPhoneNumber(this.mainStore.contactInfo.servicePhone);
+ if (this.mainStore.contactInfo.extension) {
+ contactPhone += ` Ext. ${this.mainStore.contactInfo.extension}`;
+ }
+ return {
+ glassShop: this.getPreferredShopTitle,
+ contactPhone: contactPhone,
+ 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 +317,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 +345,12 @@ export default {
},
openContactDetailsModal() {
this.$refs.contactDetailsDrawer.openModal();
+ },
+ openRecalModal() {
+ this.$refs.recalModal.openModal();
+ },
+ closeRecalModal() {
+ this.$refs.recalModal.closeModal();
}
}
};
@@ -387,26 +366,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
+ }
}
}
diff --git a/src/store/index.js b/src/store/index.js
index 4c5bcbbd..939f1fd9 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -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
}),
@@ -1455,7 +1457,7 @@ export const useMainStore = defineStore({
emailAddress: contactInfo.emailAddress || customer.emailAddress,
firstName: contactInfo.firstName || customer.firstName,
lastName: contactInfo.lastName || customer.lastName,
- homePhone: contactInfo.homePhone,
+ homePhone: contactInfo.extension && contactInfo.homePhone ? contactInfo.homePhone + contactInfo.extension : contactInfo.homePhone,
servicePhone: contactInfo.servicePhone,
alternativePhone: contactInfo.alternativePhone,
isSmsOptIn: contactInfo.requestTextUpdates ?? false
@@ -1589,7 +1591,8 @@ export const useMainStore = defineStore({
order.contactInfo.firstName = data?.customer?.firstName;
order.contactInfo.lastName = data?.customer?.lastName;
order.contactInfo.emailAddress = data?.customer?.emailAddress;
- order.contactInfo.homePhone = data?.customer?.homePhone;
+ order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
+ order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
order.contactInfo.servicePhone = data?.customer?.servicePhone;
order.contactInfo.alternativePhone = data?.customer?.alternativePhone;
order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn;
@@ -1657,7 +1660,8 @@ export const useMainStore = defineStore({
order.contactInfo.firstName = data?.customer?.firstName;
order.contactInfo.lastName = data?.customer?.lastName;
order.contactInfo.emailAddress = data?.customer?.emailAddress;
- order.contactInfo.homePhone = data?.customer?.homePhone;
+ order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
+ order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
order.contactInfo.servicePhone = data?.customer?.servicePhone;
order.contactInfo.alternativePhone = data?.customer?.alternativePhone;
order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn;
@@ -2095,6 +2099,7 @@ export const useMainStore = defineStore({
this.order.contactInfo.homePhone = null;
this.order.contactInfo.alternativePhone = null;
this.order.contactInfo.servicePhone = null;
+ this.order.contactInfo.extension = null;
this.order.contactInfo.requestTextUpdates = false;
this.order.contactInfo.notesForTechnician = '';
},
@@ -2576,6 +2581,7 @@ export const useMainStore = defineStore({
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) {
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 154776b2..239589ee 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -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
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 00b3e91f..cda82a85 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -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 {
-
-
-
-
+ -
+
+
+
+
@@ -67,17 +66,10 @@
id="tpaSubmitOrderDetailsTitle"
ref="tpaSubmitOrderDetailsTitle"
:customText="orderDetailsTitle"
- :marginTopSizeOverride="4"
- class="fw-bold text-color--black" />
-