Adding contact details drawer
This commit is contained in:
Michaela Brydon
parent
b5a39258bd
commit
6f1baada01
3 changed files with 163 additions and 6 deletions
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<modal
|
||||
:ref="modalName"
|
||||
:headerText="headerText"
|
||||
:footerButtonText="footerButtonText"
|
||||
:onModalClosedCallback="resetFormValues"
|
||||
class="contact-details-drawer"
|
||||
@isModalOpened="setModalStatus"
|
||||
@footerButtonEvent="saveContactDetails">
|
||||
<template v-if="isModalOpened">
|
||||
<textboxQuestion
|
||||
ref="firstNameQuestion"
|
||||
v-model="firstName"
|
||||
class=""
|
||||
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" />
|
||||
<textboxQuestion
|
||||
ref="emailQuestion"
|
||||
v-model="emailAddress"
|
||||
class="mt-4"
|
||||
inputId="emailAddress"
|
||||
:cmsWidgetName="widget.emailQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.emailAddress" />
|
||||
<textboxQuestion
|
||||
ref="phoneNumberQuestion"
|
||||
v-model="phoneNumber"
|
||||
class="mt-4"
|
||||
inputId="phoneNumber"
|
||||
:cmsWidgetName="widget.phoneNumberQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.phoneNumber" />
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
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 globalRules from '@/constants/global-rules.js';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
|
||||
export default {
|
||||
name: 'contact-details-drawer',
|
||||
components: {
|
||||
modal,
|
||||
textboxQuestion
|
||||
},
|
||||
emits: ['update-contact-details'],
|
||||
data() {
|
||||
const { firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
phoneNumber } = useMainStore().contactInfo;
|
||||
return {
|
||||
isModalOpened: false,
|
||||
firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
phoneNumber,
|
||||
widget: {
|
||||
title: 'ContactDetailsDrawerHeaderWidget',
|
||||
firstNameQuestion: 'FirstNameQuestionWidget',
|
||||
lastNameQuestion: 'LastNameQuestionWidget',
|
||||
emailQuestion: 'EmailQuestionWidget',
|
||||
phoneNumberQuestion: 'PhoneNumberQuestionWidget',
|
||||
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}`
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
modalName() {
|
||||
return 'contact-details-modal';
|
||||
},
|
||||
modal() {
|
||||
return this.$refs[this.modalName];
|
||||
},
|
||||
headerText() {
|
||||
return this.getCmsContent(this.widget.title, widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT);
|
||||
},
|
||||
footerButtonText() {
|
||||
return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setModalStatus(isOpened) {
|
||||
this.isModalOpened = isOpened;
|
||||
},
|
||||
saveContactDetails() {
|
||||
const contactInfo = {
|
||||
firstName: this.firstName,
|
||||
lastName: this.lastName,
|
||||
emailAddress: this.emailAddress,
|
||||
phoneNumber: this.phoneNumber
|
||||
};
|
||||
useMainStore().updateContactInfo(contactInfo);
|
||||
this.$emit('update-contact-details');
|
||||
this.closeModal();
|
||||
},
|
||||
openModal() {
|
||||
this.modal.openModal();
|
||||
},
|
||||
closeModal() {
|
||||
this.modal.closeModal();
|
||||
},
|
||||
resetFormValues() {
|
||||
const { firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
phoneNumber } = useMainStore().contactInfo;
|
||||
this.firstName = firstName;
|
||||
this.lastName = lastName;
|
||||
this.emailAddress = emailAddress;
|
||||
this.phoneNumber = phoneNumber;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/styles/ux-variables.scss";
|
||||
|
||||
.contact-details-drawer .modal-title {
|
||||
font-size: $h5-font-size;
|
||||
font-weight: $font-weight-normal !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -91,6 +91,9 @@
|
|||
@forwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
<contactDetailsDrawer
|
||||
ref="contactDetailsDrawer"
|
||||
@updateContactDetails="setSections" />
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
@ -102,6 +105,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
|
|||
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
|
||||
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';
|
||||
|
||||
// Supporting files
|
||||
|
|
@ -126,6 +130,7 @@ export default {
|
|||
reviewBlock,
|
||||
deductibleBox,
|
||||
siteFooter,
|
||||
contactDetailsDrawer,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form
|
||||
},
|
||||
|
|
@ -246,18 +251,20 @@ export default {
|
|||
? this.navigationScenarios.EDIT_POLICY_VEHICLE
|
||||
: this.navigationScenarios.EDIT_VEHICLE;
|
||||
this.sections = [
|
||||
this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, vehicleScenario),
|
||||
this.getSection(this.widget.subheader.damage, this.getDamageLines, this.navigationScenarios.EDIT_DAMAGE),
|
||||
this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, this.navigationScenarios.EDIT_PREFERRED_SHOP),
|
||||
this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, () => this.navigate(vehicleScenario)),
|
||||
// eslint-disable-next-line max-len
|
||||
this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.navigationScenarios.EDIT_CONTACT_DETAILS)
|
||||
this.getSection(this.widget.subheader.damage, this.getDamageLines, () => this.navigate(this.navigationScenarios.EDIT_DAMAGE)),
|
||||
// eslint-disable-next-line max-len
|
||||
this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)),
|
||||
// eslint-disable-next-line max-len
|
||||
this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.openContactDetailsModal)
|
||||
];
|
||||
},
|
||||
getSection(widgetName, lines, scenario) {
|
||||
getSection(widgetName, lines, onClick) {
|
||||
return {
|
||||
title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
|
||||
lines,
|
||||
onClickEdit: () => this.navigate(scenario)
|
||||
onClickEdit: onClick
|
||||
};
|
||||
},
|
||||
forwardButtonAction() {
|
||||
|
|
@ -281,6 +288,9 @@ export default {
|
|||
getAnswersNullSafe(widgetName) {
|
||||
const rawAnswers = this.getCmsContent(widgetName, 'Answers');
|
||||
return rawAnswers || [];
|
||||
},
|
||||
openContactDetailsModal() {
|
||||
this.$refs.contactDetailsDrawer.openModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue