Adding final touches to contact details

This commit is contained in:
brydon1 2023-07-11 16:51:33 -04:00
parent 62bc36ff42
commit 8a139b96f6
3 changed files with 1331 additions and 1364 deletions

View file

@ -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

View file

@ -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() {