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

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

@ -4,11 +4,16 @@
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">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader <siteHeader
ref="siteHeader" ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" /> cmsWidgetName="SiteHeaderWidget" />
<div class="main-content-container"> </div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader <siteSubHeader
ref="siteSubHeader" ref="siteSubHeader"
:cmsWidgetName="subHeaderCmsWidgetName" :cmsWidgetName="subHeaderCmsWidgetName"
@ -60,6 +65,7 @@
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div> </div>
</div> </div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -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>

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

@ -1,13 +1,19 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="main-content-container"> </div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="sub-header-content" class="sub-header-content"
justification="left" /> justification="left" />
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
// Components // Components
@ -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>