WIP update markup for two pages.

src/layouts/bailout-page/bailout-page.vue

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

src/layouts/contact-confirmation/contact-confirmation.vue

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