From 6f1baada011086541903a2c1e04f08a101c5454a Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 24 Jan 2024 13:58:29 -0500
Subject: [PATCH] Adding contact details drawer

---
 .../contact-details-drawer.spec.js            |   0
 .../contact-details-drawer.vue                | 147 ++++++++++++++++++
 src/layouts/tpa-submit/tpa-submit.vue         |  22 ++-
 3 files changed, 163 insertions(+), 6 deletions(-)
 create mode 100644 src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js
 create mode 100644 src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue

diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
new file mode 100644
index 00000000..c46bce95
--- /dev/null
+++ b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
@@ -0,0 +1,147 @@
+<template>
+    <modal
+        :ref="modalName"
+        :headerText="headerText"
+        :footerButtonText="footerButtonText"
+        :onModalClosedCallback="resetFormValues"
+        class="contact-details-drawer"
+        @isModalOpened="setModalStatus"
+        @footerButtonEvent="saveContactDetails">
+        <template v-if="isModalOpened">
+            <textboxQuestion
+                ref="firstNameQuestion"
+                v-model="firstName"
+                class=""
+                inputId="firstName"
+                :cmsWidgetName="widget.firstNameQuestion"
+                isRequired
+                :validationRules="rules.firstName" />
+            <textboxQuestion
+                ref="lastNameQuestion"
+                v-model="lastName"
+                class="mt-4"
+                inputId="lastName"
+                :cmsWidgetName="widget.lastNameQuestion"
+                isRequired
+                :validationRules="rules.lastName" />
+            <textboxQuestion
+                ref="emailQuestion"
+                v-model="emailAddress"
+                class="mt-4"
+                inputId="emailAddress"
+                :cmsWidgetName="widget.emailQuestion"
+                isRequired
+                :validationRules="rules.emailAddress" />
+            <textboxQuestion
+                ref="phoneNumberQuestion"
+                v-model="phoneNumber"
+                class="mt-4"
+                inputId="phoneNumber"
+                :cmsWidgetName="widget.phoneNumberQuestion"
+                isRequired
+                :validationRules="rules.phoneNumber" />
+        </template>
+    </modal>
+</template>
+
+<script>
+// Components
+import modal from '@/digital-components/modal/modal.vue';
+import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
+
+// Supporting Files
+import { useMainStore } from '@/store/index.js';
+import globalRules from '@/constants/global-rules.js';
+import widgetFields from '@/constants/cms-widget-fields.js';
+
+export default {
+    name: 'contact-details-drawer',
+    components: {
+        modal,
+        textboxQuestion
+    },
+    emits: ['update-contact-details'],
+    data() {
+        const { firstName,
+            lastName,
+            emailAddress,
+            phoneNumber } = useMainStore().contactInfo;
+        return {
+            isModalOpened: false,
+            firstName,
+            lastName,
+            emailAddress,
+            phoneNumber,
+            widget: {
+                title: 'ContactDetailsDrawerHeaderWidget',
+                firstNameQuestion: 'FirstNameQuestionWidget',
+                lastNameQuestion: 'LastNameQuestionWidget',
+                emailQuestion: 'EmailQuestionWidget',
+                phoneNumberQuestion: 'PhoneNumberQuestionWidget',
+                drawerFooter: 'ContactDetailsDrawerFooterWidget'
+            },
+            rules: {
+                firstName: globalRules.FIRST_NAME_REQUIRED,
+                lastName: globalRules.LAST_NAME_REQUIRED,
+                emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
+            }
+        };
+    },
+    computed: {
+        modalName() {
+            return 'contact-details-modal';
+        },
+        modal() {
+            return this.$refs[this.modalName];
+        },
+        headerText() {
+            return this.getCmsContent(this.widget.title, widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT);
+        },
+        footerButtonText() {
+            return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
+        }
+    },
+    methods: {
+        setModalStatus(isOpened) {
+            this.isModalOpened = isOpened;
+        },
+        saveContactDetails() {
+            const contactInfo = {
+                firstName: this.firstName,
+                lastName: this.lastName,
+                emailAddress: this.emailAddress,
+                phoneNumber: this.phoneNumber
+            };
+            useMainStore().updateContactInfo(contactInfo);
+            this.$emit('update-contact-details');
+            this.closeModal();
+        },
+        openModal() {
+            this.modal.openModal();
+        },
+        closeModal() {
+            this.modal.closeModal();
+        },
+        resetFormValues() {
+            const { firstName,
+                lastName,
+                emailAddress,
+                phoneNumber } = useMainStore().contactInfo;
+            this.firstName = firstName;
+            this.lastName = lastName;
+            this.emailAddress = emailAddress;
+            this.phoneNumber = phoneNumber;
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+@import "@/styles/ux-variables.scss";
+
+.contact-details-drawer .modal-title {
+    font-size: $h5-font-size;
+    font-weight: $font-weight-normal !important;
+}
+</style>
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 9886298f..2d061854 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -91,6 +91,9 @@
                         @forwardClicked="forwardButtonAction" />
                 </div>
             </div>
+            <contactDetailsDrawer
+                ref="contactDetailsDrawer"
+                @updateContactDetails="setSections" />
         </div>
     </Form>
 </template>
@@ -102,6 +105,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
 import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
+import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 
 // Supporting files
@@ -126,6 +130,7 @@ export default {
         reviewBlock,
         deductibleBox,
         siteFooter,
+        contactDetailsDrawer,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -246,18 +251,20 @@ export default {
                     ? this.navigationScenarios.EDIT_POLICY_VEHICLE
                     : this.navigationScenarios.EDIT_VEHICLE;
                 this.sections = [
-                    this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, vehicleScenario),
-                    this.getSection(this.widget.subheader.damage, this.getDamageLines, this.navigationScenarios.EDIT_DAMAGE),
-                    this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, this.navigationScenarios.EDIT_PREFERRED_SHOP),
+                    this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, () => this.navigate(vehicleScenario)),
                     // eslint-disable-next-line max-len
-                    this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.navigationScenarios.EDIT_CONTACT_DETAILS)
+                    this.getSection(this.widget.subheader.damage, this.getDamageLines, () => this.navigate(this.navigationScenarios.EDIT_DAMAGE)),
+                    // eslint-disable-next-line max-len
+                    this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)),
+                    // eslint-disable-next-line max-len
+                    this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.openContactDetailsModal)
                 ];
             },
-            getSection(widgetName, lines, scenario) {
+            getSection(widgetName, lines, onClick) {
                 return {
                     title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
                     lines,
-                    onClickEdit: () => this.navigate(scenario)
+                    onClickEdit: onClick
                 };
             },
             forwardButtonAction() {
@@ -281,6 +288,9 @@ export default {
             getAnswersNullSafe(widgetName) {
                 const rawAnswers = this.getCmsContent(widgetName, 'Answers');
                 return rawAnswers || [];
+            },
+            openContactDetailsModal() {
+                this.$refs.contactDetailsDrawer.openModal();
             }
         }
 };