INSR-7759: Review dropdown header tweak, contact details drawer updates

src/iss-components/contact-details-drawer/contact-details-drawer.vue

@@ -9,25 +9,29 @@
         @isModalOpened="setModalStatus"
         @footerButtonEvent="clickFooterButtonEvent">
         <template v-if="isModalOpened">
-            <div class="row">
+            <span class="name-section-label">{{ nameSectionLabel }}</span>
+            <div class="row form-group">
                 <textboxQuestion
-                    class="col"
+                    class="col-lg-6"
                     ref="firstNameQuestion"
                     v-model="firstName"
                     inputId="firstName"
+                    :displayQuestionText="false"
                     :cmsWidgetName="widget.firstNameQuestion"
                     isRequired
                     :validationRules="rules.firstName" />
                 <textboxQuestion
-                    class="col"
+                    class="col-lg-6 last-name-question"
                     ref="lastNameQuestion"
                     v-model="lastName"
                     inputId="lastName"
+                    :displayQuestionText="false"
                     :cmsWidgetName="widget.lastNameQuestion"
                     isRequired
                     :validationRules="rules.lastName" />
             </div>
             <textboxQuestion
+                class="form-group"
                 ref="emailQuestion"
                 v-model="emailAddress"
                 inputId="emailAddress"
@@ -35,6 +39,7 @@
                 isRequired
                 :validationRules="rules.emailAddress" />
             <textboxQuestion
+                class="form-group"
                 ref="phoneNumberQuestion"
                 v-model="phoneNumber"
                 inputId="phoneNumber"
@@ -44,6 +49,7 @@
                 disableAutoFill
                 :validationRules="rules.phoneNumber" />
             <textboxQuestion
+                class="form-group"
                 ref="extensionQuestion"
                 v-model="extension"
                 inputId="extension"
@@ -97,8 +103,8 @@ export default {
                 drawerFooter: 'ContactDetailsDrawerFooterWidget'
             },
             rules: {
-                firstName: globalRules.FIRST_NAME_REQUIRED,
+                firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
-                lastName: globalRules.LAST_NAME_REQUIRED,
+                lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
                 emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
                 phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
                 extension: `${globalRules.EXTENSION_FORMAT}`
@@ -121,7 +127,10 @@ export default {
         },
         phoneMask() {
             return MaskaFormattedMasks.PHONE_NUMBER;
-        }
+        },
+        nameSectionLabel() {
+            return this.getCmsContent(this.widget.firstNameQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
+        },
     },
     methods: {
         setModalStatus(isOpened) {
@@ -174,13 +183,18 @@ export default {
         font-size: $h5-font-size;
         font-weight: $font-weight-normal !important;
     }
-    .textbox-question {
+    .form-group {
         margin-bottom: 1.25rem;
-        :deep(label:has(b)) {
+        align-items: start;
-            font-weight: $font-weight-normal;
+    }
-            b {
+    .name-section-label {
-                font-weight: 600;
+        color: $black;
-            }
+        font-weight: 600;
+        margin-bottom: .25rem;
+    }
+    .last-name-question {
+        @include media-breakpoint-down(lg) {
+            margin-top: .625rem;
         }
     }
 }

src/layouts/payment-method/payment-method.vue

@@ -90,6 +90,10 @@
                     </div>
                 </div>
             </div>
+            <contactDetailsDrawer
+                ref="contactDetailsDrawer"
+                class="contact-details-drawer"
+                @updateContactDetails="refreshContactDetails" />
         </div>
     </Form>
 </template>
@@ -107,6 +111,7 @@ import alert from '@/ux-components/alert/alert.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
 import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
+import contactDetailsDrawer from '@/iss-components/contact-details-drawer/contact-details-drawer.vue';
 
 // Supporting Items
 import settleAllPromises from '@/helpers/layout-helper';
@@ -142,7 +147,8 @@ export default {
         alert,
         textBlock,
         buttonQuestion,
-        textboxQuestion
+        textboxQuestion,
+        contactDetailsDrawer
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -418,6 +424,7 @@ export default {
                     );
                     break;
                 case 'customer':
+                    this.openContactDetailsModal();
                     break;
                 case 'wipers':
                     this.$router.navigateWithSpinner(
@@ -426,6 +433,12 @@ export default {
                     );
                     break;
             }
+        },
+        openContactDetailsModal() {
+            this.$refs.contactDetailsDrawer.openModal();
+        },
+        refreshContactDetails() {
+            this.smsPhoneNumber = this.getSMSPhoneFromStore();
         }
     }
 };
@@ -543,5 +556,11 @@ $page-side-padding: 1.5rem;
             }
         }
     }
+    .contact-details-drawer {
+        :deep(strong) {
+            color: $black;
+            font-weight: 600;
+        }
+    }
 }
 </style>

src/layouts/payment-method/review-dropdown/review-dropdown.vue

@@ -1,13 +1,13 @@
 <template>
     <div>
         <div
-            class="row review-toggle flex align-items-center"
+            class="review-toggle d-flex align-items-center justify-content-between"
             :class="[isExpanded ? 'expanded' : '']"
             @click="toggleIsExpanded">
             <a
                 aria-label="expand appointment details"
                 href="javascript:void(0)"
-                class="col d-flex justify-content-between py-0">
+                class="d-flex py-0">
                 <span class="label">Appointment details</span>
             </a>
         </div>
@@ -117,6 +117,7 @@ export default {
 
 .review-toggle {
     margin-bottom: .625rem;
+    flex-direction: row;
     &:after {
         content: "";
         transition: transform none;