Initial blockout for modal

src/digital-components/phone-number-question/phone-number-question.vue

@@ -8,7 +8,7 @@
             :mask="mask"
             :isRequired="isRequired"
             :validationRules="validationRulesForTextBoxQuestion"
-            cmsWidgetName="PhoneNumberQuestionWidget" />
+            :cmsWidgetName="cmsWidgetName" />
     </div>
 </template>
 

src/layouts/customer-details/customer-details.vue

@@ -25,7 +25,7 @@
                 validationRules="email-address-required|email-address-format" />
             <phoneNumberQuestion
                 class="mb-4"
-                cmsWidgetName="phoneNumberQuestionWidget"
+                cmsWidgetName="PhoneNumberQuestionWidget"
                 v-model="phoneNumber"
                 isRequired
                 validationRules="phone-number-required" />

src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue

@@ -0,0 +1,90 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="customer-details-question">
+            <modal
+                ref="CustomerDetailsModal"
+                headerText="Contact details"
+                footerButtonText="Save contact details"
+                :onModalOpenedCallback="onModalOpened"
+                :onModalClosedCallback="onModalClosed"
+                @isModalOpened="setModalStatus"
+                @footer-button-event="setContactDetails">
+                <template v-if="isModalOpened">
+                    <textboxQuestion
+                        class="mb-4"
+                        cmsWidgetName="CustomerFirstNameWidget"
+                        v-model="firstName"
+                        ref="firstName"
+                        customInputId="firstName"
+                        validation-rules="" />
+                    <textboxQuestion
+                        class="mb-4"
+                        cmsWidgetName="CustomerLastNameWidget"
+                        v-model="lastName"
+                        ref="lastName"
+                        customInputId="lastName"
+                        validation-rules="" />
+                    <textboxQuestion
+                        class="mb-4"
+                        cmsWidgetName="CustomerEmailWidget"
+                        v-model="emailAddress"
+                        ref="emailAddress"
+                        customInputId="emailAddress"
+                        validation-rules="" />
+                    <phoneNumberQuestion
+                        class="mb-4"
+                        cmsWidgetName="CustomerPhoneWidget"
+                        v-model="phoneNumber"
+                        ref="phoneNumber"
+                        isRequired
+                        validation-rules="" />
+                </template>
+            </modal>
+        </div>
+    </transition>
+</template>
+
+<script>
+import modal from "@/digital-components/modal/modal";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
+
+export default {
+    name: "customer-details-modal-question",
+    data() {
+        return {
+            isModalOpened: false,
+            firstName: "",
+            lastName: "",
+            emailAddress: "",
+            phoneNumber: "",
+            isSmsOptIn: false,
+        };
+    },
+    props: {},
+    computed: {
+        modal() {
+            return this.$refs.CustomerDetailsModal;
+        },
+    },
+    methods: {
+        openModal() {
+            this.modal.openModal();
+        },
+        closeModal() {
+            this.modal.closeModal();
+        },
+        onModalOpened() {},
+        onModalClosed() {},
+        setModalStatus(isOpened) {
+            this.isModalOpened = isOpened;
+        },
+        setContactDetails() {},
+    },
+    components: {
+        modal,
+        textboxQuestion,
+        phoneNumberQuestion,
+    },
+};
+</script>

src/layouts/review/review.vue

@@ -89,6 +89,8 @@
                 <hr class="my-0" />
             </div>
 
+            <customerDetailsModalQuestion ref="customerDetailsModalQuestion" />
+
             <funnelFooter
                 cmsWidgetName="FunnelFooterWidget"
                 @back-clicked="backButtonAction"
@@ -111,6 +113,8 @@ import serviceLocationReview from "@/layouts/review/review-sections/service-loca
 import scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review";
 import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
 
+import customerDetailsModalQuestion from "@/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue";
+
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 
@@ -183,7 +187,9 @@ export default {
                 this.$route
             );
         },
-        editCustomerDetails() {},
+        editCustomerDetails() {
+            this.$refs.customerDetailsModalQuestion.openModal();
+        },
     },
     computed: {
         subHeaderTitle() {
@@ -212,7 +218,7 @@ export default {
         },
         customerInfo() {
             return this.$store.getters.order.customer;
-        }
+        },
     },
     components: {
         funnelHeader,
@@ -226,6 +232,7 @@ export default {
         serviceLocationReview,
         scheduleReview,
         customerReview,
+        customerDetailsModalQuestion,
     },
 };
 </script>