jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP update markup for two pages.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-17 09:52:51 -04:00
parent 4bcffb29b9
commit bbeec83585
2 changed files with 95 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
src/layouts/bailout-page/bailout-page.vue
View file

@ -4,60 +4,66 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<siteHeader <div class="row justify-content-center">
ref="siteHeader" <div class="col-md-6 px-0 px-md-2">
cmsWidgetName="SiteHeaderWidget" /> <siteHeader
<div class="main-content-container"> ref="siteHeader"
<siteSubHeader cmsWidgetName="SiteHeaderWidget" />
ref="siteSubHeader" </div>
:cmsWidgetName="subHeaderCmsWidgetName" </div>
:contentProperty="subHeaderContentProperty" <div class="row justify-content-center">
:stripRteStyle="stripRteStyle" <div class="col-md-6 col-xl-4">
:subContentProperty="subContentProperty" <siteSubHeader
class="sub-header-content" ref="siteSubHeader"
justification="left" /> :cmsWidgetName="subHeaderCmsWidgetName"
<textboxQuestion :contentProperty="subHeaderContentProperty"
ref="firstName" :stripRteStyle="stripRteStyle"
v-model="bailoutPageModel.firstName" :subContentProperty="subContentProperty"
inputId="firstNameField" class="sub-header-content"
cmsWidgetName="FirstNameQuestion" justification="left" />
isRequired <textboxQuestion
disableAutoFill ref="firstName"
:validationRules="rules.firstName" /> v-model="bailoutPageModel.firstName"
<textboxQuestion inputId="firstNameField"
ref="lastName" cmsWidgetName="FirstNameQuestion"
v-model="bailoutPageModel.lastName" isRequired
inputId="lastNameField" disableAutoFill
cmsWidgetName="LastNameQuestion" :validationRules="rules.firstName" />
isRequired <textboxQuestion
disableAutoFill ref="lastName"
:validationRules="rules.lastName" /> v-model="bailoutPageModel.lastName"
<textboxQuestion inputId="lastNameField"
ref="phoneNumber" cmsWidgetName="LastNameQuestion"
v-model="bailoutPageModel.phoneNumber" isRequired
inputId="phoneNumberField" disableAutoFill
cmsWidgetName="PhoneNumberQuestion" :validationRules="rules.lastName" />
isRequired <textboxQuestion
:mask="phoneMask" ref="phoneNumber"
disableAutoFill v-model="bailoutPageModel.phoneNumber"
:validationRules="rules.phoneNumber" /> inputId="phoneNumberField"
<textboxQuestion cmsWidgetName="PhoneNumberQuestion"
ref="emailAddress" isRequired
v-model="bailoutPageModel.email" :mask="phoneMask"
inputId="emailAddressField" disableAutoFill
cmsWidgetName="EmailAddressQuestion" :validationRules="rules.phoneNumber" />
isRequired <textboxQuestion
disableAutoFill ref="emailAddress"
:validationRules="rules.email" /> v-model="bailoutPageModel.email"
<siteFooter inputId="emailAddressField"
ref="siteFooter" cmsWidgetName="EmailAddressQuestion"
class="footer-content-container" isRequired
cmsWidgetName="SiteFooterWidget" disableAutoFill
:isForwardActionDisabled="!meta.valid" :validationRules="rules.email" />
:isBackButtonHidden="!canNavigateBack" <siteFooter
@backClicked="backButtonAction" ref="siteFooter"
@ForwardClicked="forwardButtonAction" /> class="footer-content-container"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="!canNavigateBack"
@backClicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div> </div>
</div> </div>
</Form> </Form>
@ -90,7 +96,7 @@ export default {
siteFooter, siteFooter,
textboxQuestion, textboxQuestion,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form,
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -100,8 +106,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -121,14 +127,14 @@ export default {
widget: { widget: {
defaultSiteHeader: 'SiteSubHeaderWidget', defaultSiteHeader: 'SiteSubHeaderWidget',
noTpa: 'ContentGroupNoTPAWidget', noTpa: 'ContentGroupNoTPAWidget',
notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop' notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop',
}, },
rules: { rules: {
firstName: globalRules.FIRST_NAME_REQUIRED, firstName: globalRules.FIRST_NAME_REQUIRED,
lastName: globalRules.LAST_NAME_REQUIRED, lastName: globalRules.LAST_NAME_REQUIRED,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`, phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}` email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
} },
}; };
}, },
computed: { computed: {
@ -179,13 +185,16 @@ export default {
}, },
phoneMask() { phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER; return MaskaFormattedMasks.PHONE_NUMBER;
} },
}, },
methods: { methods: {
backButtonAction() { backButtonAction() {
// route to move backwards // route to move backwards
this.mainStore.resetBailout(); this.mainStore.resetBailout();
this.$router.navigate(this.navigationScenarios.CLICKED_BACK_PREVIOUS, this.$route); this.$router.navigate(
this.navigationScenarios.CLICKED_BACK_PREVIOUS,
this.$route
);
}, },
forwardButtonAction() { forwardButtonAction() {
this.mainStore.setBailoutContactInfo(this.bailoutPageModel); this.mainStore.setBailoutContactInfo(this.bailoutPageModel);
@ -201,10 +210,10 @@ export default {
firstName: useMainStore().order.customer.firstName, firstName: useMainStore().order.customer.firstName,
lastName: useMainStore().order.customer.lastName, lastName: useMainStore().order.customer.lastName,
phoneNumber: useMainStore().order.customer.phoneNumber, phoneNumber: useMainStore().order.customer.phoneNumber,
email: useMainStore().order.customer.emailAddress email: useMainStore().order.customer.emailAddress,
}; };
} },
} },
}; };
</script> </script>

34
src/layouts/contact-confirmation/contact-confirmation.vue
View file

@ -1,11 +1,17 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="row justify-content-center">
<div class="main-content-container"> <div class="col-md-6 px-0 px-md-2">
<siteSubHeader <siteHeader cmsWidgetName="SiteHeaderWidget" />
cmsWidgetName="SiteSubHeaderWidget" </div>
class="sub-header-content" </div>
justification="left" /> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="sub-header-content"
justification="left" />
</div>
</div> </div>
</div> </div>
</template> </template>
@ -23,7 +29,7 @@ export default {
name: 'contact-confirmation', name: 'contact-confirmation',
components: { components: {
siteHeader, siteHeader,
siteSubHeader siteSubHeader,
}, },
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
@ -32,8 +38,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -47,13 +53,15 @@ export default {
return { mainStore }; return { mainStore };
}, },
data() { data() {
const contactConfirmationData = useMainStore().pageData(issPageValues.CONTACT_CONFIRMATION); const contactConfirmationData = useMainStore().pageData(
issPageValues.CONTACT_CONFIRMATION
);
return { return {
contactConfirmationModel: contactConfirmationData contactConfirmationModel: contactConfirmationData,
}; };
}, },
computed: {}, computed: {},
methods: {} methods: {},
}; };
</script> </script>