INSR-7759: Review dropdown header tweak, contact details drawer updates
This commit is contained in:
Alex Humphries
parent
4e996145c3
commit
e12ac95cc7
3 changed files with 49 additions and 15 deletions
|
|
@ -9,25 +9,29 @@
|
|||
@isModalOpened="setModalStatus"
|
||||
@footerButtonEvent="clickFooterButtonEvent">
|
||||
<template v-if="isModalOpened">
|
||||
<div class="row">
|
||||
<span class="name-section-label">{{ nameSectionLabel }}</span>
|
||||
<div class="row form-group">
|
||||
<textboxQuestion
|
||||
class="col"
|
||||
class="col-lg-6"
|
||||
ref="firstNameQuestion"
|
||||
v-model="firstName"
|
||||
inputId="firstName"
|
||||
:displayQuestionText="false"
|
||||
:cmsWidgetName="widget.firstNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.firstName" />
|
||||
<textboxQuestion
|
||||
class="col"
|
||||
class="col-lg-6 last-name-question"
|
||||
ref="lastNameQuestion"
|
||||
v-model="lastName"
|
||||
inputId="lastName"
|
||||
:displayQuestionText="false"
|
||||
:cmsWidgetName="widget.lastNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.lastName" />
|
||||
</div>
|
||||
<textboxQuestion
|
||||
class="form-group"
|
||||
ref="emailQuestion"
|
||||
v-model="emailAddress"
|
||||
inputId="emailAddress"
|
||||
|
|
@ -35,6 +39,7 @@
|
|||
isRequired
|
||||
:validationRules="rules.emailAddress" />
|
||||
<textboxQuestion
|
||||
class="form-group"
|
||||
ref="phoneNumberQuestion"
|
||||
v-model="phoneNumber"
|
||||
inputId="phoneNumber"
|
||||
|
|
@ -44,6 +49,7 @@
|
|||
disableAutoFill
|
||||
:validationRules="rules.phoneNumber" />
|
||||
<textboxQuestion
|
||||
class="form-group"
|
||||
ref="extensionQuestion"
|
||||
v-model="extension"
|
||||
inputId="extension"
|
||||
|
|
@ -97,8 +103,8 @@ export default {
|
|||
drawerFooter: 'ContactDetailsDrawerFooterWidget'
|
||||
},
|
||||
rules: {
|
||||
firstName: globalRules.FIRST_NAME_REQUIRED,
|
||||
lastName: globalRules.LAST_NAME_REQUIRED,
|
||||
firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
|
||||
lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
|
||||
emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
|
||||
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
|
||||
extension: `${globalRules.EXTENSION_FORMAT}`
|
||||
|
|
@ -121,7 +127,10 @@ export default {
|
|||
},
|
||||
phoneMask() {
|
||||
return MaskaFormattedMasks.PHONE_NUMBER;
|
||||
}
|
||||
},
|
||||
nameSectionLabel() {
|
||||
return this.getCmsContent(this.widget.firstNameQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setModalStatus(isOpened) {
|
||||
|
|
@ -174,13 +183,18 @@ export default {
|
|||
font-size: $h5-font-size;
|
||||
font-weight: $font-weight-normal !important;
|
||||
}
|
||||
.textbox-question {
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
:deep(label:has(b)) {
|
||||
font-weight: $font-weight-normal;
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
align-items: start;
|
||||
}
|
||||
.name-section-label {
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.last-name-question {
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-top: .625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<contactDetailsDrawer
|
||||
ref="contactDetailsDrawer"
|
||||
class="contact-details-drawer"
|
||||
@updateContactDetails="refreshContactDetails" />
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
@ -107,6 +111,7 @@ import alert from '@/ux-components/alert/alert.vue';
|
|||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
|
||||
import contactDetailsDrawer from '@/iss-components/contact-details-drawer/contact-details-drawer.vue';
|
||||
|
||||
// Supporting Items
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
|
|
@ -142,7 +147,8 @@ export default {
|
|||
alert,
|
||||
textBlock,
|
||||
buttonQuestion,
|
||||
textboxQuestion
|
||||
textboxQuestion,
|
||||
contactDetailsDrawer
|
||||
},
|
||||
mixins: [baseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -418,6 +424,7 @@ export default {
|
|||
);
|
||||
break;
|
||||
case 'customer':
|
||||
this.openContactDetailsModal();
|
||||
break;
|
||||
case 'wipers':
|
||||
this.$router.navigateWithSpinner(
|
||||
|
|
@ -426,6 +433,12 @@ export default {
|
|||
);
|
||||
break;
|
||||
}
|
||||
},
|
||||
openContactDetailsModal() {
|
||||
this.$refs.contactDetailsDrawer.openModal();
|
||||
},
|
||||
refreshContactDetails() {
|
||||
this.smsPhoneNumber = this.getSMSPhoneFromStore();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -543,5 +556,11 @@ $page-side-padding: 1.5rem;
|
|||
}
|
||||
}
|
||||
}
|
||||
.contact-details-drawer {
|
||||
:deep(strong) {
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="row review-toggle flex align-items-center"
|
||||
class="review-toggle d-flex align-items-center justify-content-between"
|
||||
:class="[isExpanded ? 'expanded' : '']"
|
||||
@click="toggleIsExpanded">
|
||||
<a
|
||||
aria-label="expand appointment details"
|
||||
href="javascript:void(0)"
|
||||
class="col d-flex justify-content-between py-0">
|
||||
class="d-flex py-0">
|
||||
<span class="label">Appointment details</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -117,6 +117,7 @@ export default {
|
|||
|
||||
.review-toggle {
|
||||
margin-bottom: .625rem;
|
||||
flex-direction: row;
|
||||
&:after {
|
||||
content: "";
|
||||
transition: transform none;
|
||||
|
|
|
|||
Loading…
Reference in a new issue