Adding final touches to contact details

src/layouts/contact-details/contact-details.vue

@@ -33,12 +33,12 @@
                         :validationRules="rules.lastName" />
                     <textboxQuestion
                         ref="emailQuestion"
-                        v-model="email"
+                        v-model="emailAddress"
                         class="margin-top-16"
-                        inputId="email"
+                        inputId="emailAddress"
                         :cmsWidgetName="widget.emailQuestion"
                         isRequired
-                        :validationRules="rules.email" />
+                        :validationRules="rules.emailAddress" />
                     <textboxQuestion
                         ref="phoneNumberQuestion"
                         v-model="phoneNumber"
@@ -50,6 +50,7 @@
                     <checkbox
                         ref="requestTextUpdatesCheckbox"
                         v-model="requestTextUpdates"
+                        :isChecked="requestTextUpdates"
                         class="margin-top-8"
                         checkboxName="requestTextUpdates"
                         buttonID="requestTextUpdates"
@@ -63,7 +64,7 @@
                         :isDisabled="false"
                         :isRequired="false"
                         :cmsWidgetName="widget.notesQuestion"
-                        maxLength="500"
+                        maxLength="250"
                         :inputRows="3" />
 
                     <p
@@ -89,7 +90,7 @@
                         ref="siteFooter"
                         :cmsWidgetName="widget.siteFooter"
                         :isForwardActionDisabled="!meta.valid"
-                        @forwardClicked="navigateForward"
+                        @forwardClicked="forwardButtonAction"
                         @backClicked="backButtonAction" />
                 </div>
             </div>
@@ -135,13 +136,15 @@ export default {
         });
     },
     data() {
+        const { firstName, lastName, emailAddress, phoneNumber, textUpdates, notesForTechnician } 
+            = useMainStore().contactInfo;
         return {
-            firstName: useMainStore().order.customer.firstName,
-            lastName: useMainStore().order.customer.lastName,
-            email: useMainStore().order.customer.emailAddress,
-            phoneNumber: useMainStore().order.customer.phoneNumber,
-            requestTextUpdates: false,
-            notesForTechnician: '',
+            firstName,
+            lastName,
+            emailAddress,
+            phoneNumber,
+            requestTextUpdates: textUpdates,
+            notesForTechnician,
             widget: {
                 siteHeader: 'SiteHeaderWidget',
                 siteSubHeader: 'SiteSubHeaderWidget',
@@ -157,7 +160,7 @@ export default {
             rules: {
                 firstName: globalRules.FIRST_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}`
             }
         };
@@ -188,6 +191,15 @@ export default {
         * @summary Steps to perform when forward button clicked.
         */
         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.$route);
         }

src/ux-components/checkbox/checkbox.vue

@@ -9,9 +9,9 @@
             :id="buttonID"
             :tabindex="tabIndex"
             :aria-required="isRequired"
+            :checked="isChecked"
             @change="handleCheckChange"
-            :ref="checkboxName"
-             />
+            :ref="checkboxName" />
         <label class="d-flex align-items-start" :for="buttonID">
             <p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
@@ -30,6 +30,10 @@ export default {
         screenReaderOnlyText: String,
         isRequired: Boolean,
         hasError: Boolean,
+        isChecked: {
+            type: Boolean,
+            default: false
+        }
     },
     methods: {
       handleCheckChange() {