Adding final touches to contact details
This commit is contained in:
parent
62bc36ff42
commit
8a139b96f6
3 changed files with 1331 additions and 1364 deletions
|
|
@ -33,12 +33,12 @@
|
||||||
:validationRules="rules.lastName" />
|
:validationRules="rules.lastName" />
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
ref="emailQuestion"
|
ref="emailQuestion"
|
||||||
v-model="email"
|
v-model="emailAddress"
|
||||||
class="margin-top-16"
|
class="margin-top-16"
|
||||||
inputId="email"
|
inputId="emailAddress"
|
||||||
:cmsWidgetName="widget.emailQuestion"
|
:cmsWidgetName="widget.emailQuestion"
|
||||||
isRequired
|
isRequired
|
||||||
:validationRules="rules.email" />
|
:validationRules="rules.emailAddress" />
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
ref="phoneNumberQuestion"
|
ref="phoneNumberQuestion"
|
||||||
v-model="phoneNumber"
|
v-model="phoneNumber"
|
||||||
|
|
@ -50,6 +50,7 @@
|
||||||
<checkbox
|
<checkbox
|
||||||
ref="requestTextUpdatesCheckbox"
|
ref="requestTextUpdatesCheckbox"
|
||||||
v-model="requestTextUpdates"
|
v-model="requestTextUpdates"
|
||||||
|
:isChecked="requestTextUpdates"
|
||||||
class="margin-top-8"
|
class="margin-top-8"
|
||||||
checkboxName="requestTextUpdates"
|
checkboxName="requestTextUpdates"
|
||||||
buttonID="requestTextUpdates"
|
buttonID="requestTextUpdates"
|
||||||
|
|
@ -63,7 +64,7 @@
|
||||||
:isDisabled="false"
|
:isDisabled="false"
|
||||||
:isRequired="false"
|
:isRequired="false"
|
||||||
:cmsWidgetName="widget.notesQuestion"
|
:cmsWidgetName="widget.notesQuestion"
|
||||||
maxLength="500"
|
maxLength="250"
|
||||||
:inputRows="3" />
|
:inputRows="3" />
|
||||||
|
|
||||||
<p
|
<p
|
||||||
|
|
@ -89,7 +90,7 @@
|
||||||
ref="siteFooter"
|
ref="siteFooter"
|
||||||
:cmsWidgetName="widget.siteFooter"
|
:cmsWidgetName="widget.siteFooter"
|
||||||
:isForwardActionDisabled="!meta.valid"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
@forwardClicked="navigateForward"
|
@forwardClicked="forwardButtonAction"
|
||||||
@backClicked="backButtonAction" />
|
@backClicked="backButtonAction" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -135,13 +136,15 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
const { firstName, lastName, emailAddress, phoneNumber, textUpdates, notesForTechnician }
|
||||||
|
= useMainStore().contactInfo;
|
||||||
return {
|
return {
|
||||||
firstName: useMainStore().order.customer.firstName,
|
firstName,
|
||||||
lastName: useMainStore().order.customer.lastName,
|
lastName,
|
||||||
email: useMainStore().order.customer.emailAddress,
|
emailAddress,
|
||||||
phoneNumber: useMainStore().order.customer.phoneNumber,
|
phoneNumber,
|
||||||
requestTextUpdates: false,
|
requestTextUpdates: textUpdates,
|
||||||
notesForTechnician: '',
|
notesForTechnician,
|
||||||
widget: {
|
widget: {
|
||||||
siteHeader: 'SiteHeaderWidget',
|
siteHeader: 'SiteHeaderWidget',
|
||||||
siteSubHeader: 'SiteSubHeaderWidget',
|
siteSubHeader: 'SiteSubHeaderWidget',
|
||||||
|
|
@ -157,7 +160,7 @@ export default {
|
||||||
rules: {
|
rules: {
|
||||||
firstName: globalRules.FIRST_NAME_REQUIRED,
|
firstName: globalRules.FIRST_NAME_REQUIRED,
|
||||||
lastName: globalRules.LAST_NAME_REQUIRED,
|
lastName: globalRules.LAST_NAME_REQUIRED,
|
||||||
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
|
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}`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -188,6 +191,15 @@ export default {
|
||||||
* @summary Steps to perform when forward button clicked.
|
* @summary Steps to perform when forward button clicked.
|
||||||
*/
|
*/
|
||||||
forwardButtonAction() {
|
forwardButtonAction() {
|
||||||
|
const contactInfo = {
|
||||||
|
firstName: this.firstName,
|
||||||
|
lastName: this.lastName,
|
||||||
|
emailAddress: this.emailAddress,
|
||||||
|
phoneNumber: this.phoneNumber,
|
||||||
|
textUpdates: this.requestTextUpdates,
|
||||||
|
notesForTechnician: this.notesForTechnician
|
||||||
|
};
|
||||||
|
useMainStore().updateContactInfo(contactInfo);
|
||||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
|
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
|
||||||
this.$route);
|
this.$route);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -9,9 +9,9 @@
|
||||||
:id="buttonID"
|
:id="buttonID"
|
||||||
:tabindex="tabIndex"
|
:tabindex="tabIndex"
|
||||||
:aria-required="isRequired"
|
:aria-required="isRequired"
|
||||||
|
:checked="isChecked"
|
||||||
@change="handleCheckChange"
|
@change="handleCheckChange"
|
||||||
:ref="checkboxName"
|
:ref="checkboxName" />
|
||||||
/>
|
|
||||||
<label class="d-flex align-items-start" :for="buttonID">
|
<label class="d-flex align-items-start" :for="buttonID">
|
||||||
<p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
|
<p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
|
||||||
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||||
|
|
@ -30,6 +30,10 @@ export default {
|
||||||
screenReaderOnlyText: String,
|
screenReaderOnlyText: String,
|
||||||
isRequired: Boolean,
|
isRequired: Boolean,
|
||||||
hasError: Boolean,
|
hasError: Boolean,
|
||||||
|
isChecked: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleCheckChange() {
|
handleCheckChange() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue