From 7103951114d9c73d9c6c2969c1c29ba357fb03b9 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Mon, 1 May 2023 15:28:27 -0400
Subject: [PATCH] refactored modals to their own files and added link to
 shop-preference modal if there is state steering text

---
 .../provider-preference.vue                   | 70 +++++---------
 .../shop-preference-modal.vue                 | 95 +++++++++++++++++++
 .../steering-modal/steering-modal.vue         | 92 ++++++++++++++++++
 3 files changed, 210 insertions(+), 47 deletions(-)
 create mode 100644 src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue
 create mode 100644 src/layouts/provider-preference/steering-modal/steering-modal.vue

diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index bf17382d..39aa6650 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -28,19 +28,15 @@
         </div>
    </Form>      
 
-    <contentGroupModal cmsWidgetName="ShopPreferenceDrawer" ref="ShopPreferenceDrawer" />
+    <recalModal ref="recalModal" cmsWidgetName="RecalModal" />
+    <steeringModal cmsWidgetName="StateSteeringModal" ref="StateSteeringModal" />
+    <shopPreferenceModal 
+        cmsWidgetName="ShopPreferenceDrawer" 
+        ref="ShopPreferenceDrawer" 
+        @openSteering="openStateSteeringModal"
+        showSteeringLink=""/>
+    
 
-    <modal
-        ref="SteeringModal"
-        modalId="SteeringModal"
-        @footer-button-event="closeSteeringModal"
-        :footerButtonText="steeringModalFooter">
-        <h5 class="text-center">{{steeringModalHeader}}</h5>
-        <div class="steeringModalBody">
-            <div class="mb-4" >{{steeringModalBody}}</div>
-            <div v-if="steeringModalBody2">{{steeringModalBody2}}</div>
-        </div>
-    </modal>
    
 </template>
 <script>
@@ -51,8 +47,6 @@ import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal";
-import modal from "@/digital-components/modal/modal" 
-import { states } from "@/constants/states"
 
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
@@ -60,7 +54,10 @@ import { Form, defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer";
 import siteHeader from "@/iss-components/site-header/site-header";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-import providerPrefRadio from "./provider-pref-radio/provider-pref-radio.vue"
+import providerPrefRadio from "./provider-pref-radio/provider-pref-radio";
+import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal";
+import steeringModal from "@/layouts/provider-preference/steering-modal/steering-modal";
+import shopPreferenceModal from "@/layouts/provider-preference/shop-preference-modal/shop-preference-modal";
 
 // DEFINE VALIDATION RULES
 defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
@@ -76,8 +73,10 @@ export default {
         Form,
         buttonQuestion,
         contentGroupModal,
-        modal,
-        providerPrefRadio
+        providerPrefRadio,
+        recalModal,
+        steeringModal,
+        shopPreferenceModal
     },
     data() {
         return {
@@ -102,14 +101,6 @@ export default {
         isForwardActionDisabled() {
             return this.selectedProvider === null;
         },
-
-        ProviderPreferenceHeaderText(){
-            return this.getCmsContent("ProviderPreference", "HeaderText");
-        },
-        questionText() {
-            return this.getCmsContent("ProviderPreference", "SubHeaderText");
-        },
-        
         prefAnswers() {
             const cmsAnswersContent = [
                 {
@@ -133,22 +124,10 @@ export default {
             ));
             return modifiedAnswers;
         },
-
-        steeringModalHeader() {
-            let header = this.getCmsContent("StateSteeringModal", "HeaderText");
-            return header.replace("{custom:state}", states[this.mainStore.order.customer.address.state])
-        },
-        steeringModalBody() {
+        showSteeringLink() {
             const bodyText = this.getCmsContent("StateSteeringModal", "BodyText");
-            return processIfStatements(bodyText, "custom", this.getStateSpecificText); 
+            return !!bodyText; 
         },
-        steeringModalBody2() {
-            const bodyText = this.getCmsContent("StateSteeringModal", "BodyText2");
-            return processIfStatements(bodyText, "custom", this.getStateSpecificText); 
-        },
-        steeringModalFooter() {
-            return this.getCmsContent("StateSteeringModal", "FooterText");
-        }
     },
     methods: {
         getHeaderTextFromCms(cmsWidgetName) {
@@ -166,9 +145,7 @@ export default {
             const footerText = this.getCmsContent(cmsWidgetName, "FooterText");
             return processIfStatements(footerText, "custom", this.getCustomValueFromString);
         },
-        getStateSpecificText(value) {
-            return this.mainStore.order.customer.address.state?.toLowerCase() == value?.toLowerCase();
-        },
+
         arePagePrerequisiteValid() {
             return true;
         },
@@ -176,7 +153,6 @@ export default {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         forwardButtonAction() {
-            console.log("here!")
             if(this.selectedProvider.toLowerCase() == "safeliteoption")
             {
                 this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
@@ -186,14 +162,14 @@ export default {
                 this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA, this.$route);
             }
         },
-        closeSteeringModal() {
-            this.$refs["SteeringModal"].closeModal();
+        openStateSteeringModal() {
+            this.$refs["StateSteeringModal"].openModal();
         }
     },
     mounted() {
         setupModalLinks(this);
-        if(this.steeringModalBody) {
-            this.$refs["SteeringModal"].openModal();
+        if(this.showSteeringLink) {
+            this.openStateSteeringModal();
         }
     }
 };
diff --git a/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue b/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue
new file mode 100644
index 00000000..ff59735c
--- /dev/null
+++ b/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue
@@ -0,0 +1,95 @@
+<template>
+     <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText"
+        @footer-button-event="footerButtonClick">
+        <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
+        <div>
+            <div class="mb-4" v-html="ModalBodyText"></div>
+            <a 
+                v-if="showSteeringLink" 
+                v-html="ModalSubBodyText"
+                @click="openSteeringModal">
+            </a>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "@/digital-components/modal/modal";
+import { states } from "@/constants/states";
+
+export default {
+    name: "content-group-modal",
+    props: {
+        cmsWidgetName: String,
+        showSteeringLink: Boolean,
+    },
+    emits: ["openSteering"],
+    computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
+        ModalHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        ModalSubheadertext() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        ModalBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+        ModalSubBodyText() {
+            let header = this.getCmsContent(this.cmsWidgetName, "BodyText2");
+            return header.replace("{custom:state}", states[this.mainStore.order.customer.address.state])
+        },
+        ModalImage() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+    },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+
+        footerButtonClick() {
+            this.$refs[this.ModalName].closeModal();
+        },
+        openSteeringModal(){
+            this.$refs[this.ModalName].closeModal();
+            this.$emit("openSteering");
+        }
+    },
+    components: {
+        modal,
+    },
+};
+</script>
+
+<style lang="scss">
+.modal {
+    &.modal-component {
+        .modal-dialog {
+            .modal-content {
+                .modal-body {
+                    .modal-sub-body {
+                        color: $gray-600;
+                    }
+                    ul {
+                        margin-bottom: 0;
+                    }
+                    p {
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/layouts/provider-preference/steering-modal/steering-modal.vue b/src/layouts/provider-preference/steering-modal/steering-modal.vue
new file mode 100644
index 00000000..d08a03f9
--- /dev/null
+++ b/src/layouts/provider-preference/steering-modal/steering-modal.vue
@@ -0,0 +1,92 @@
+<template>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText"
+        @footer-button-event="footerButtonClick">
+        <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
+        <div>
+            <div class="mb-4" v-html="ModalBodyText"></div>
+            <div v-if="ModalSubBodyText" v-html="ModalSubBodyText"></div>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "@/digital-components/modal/modal";
+import { processIfStatements } from '@/helpers/cms-content-helper';
+import { states } from "@/constants/states";
+
+export default {
+    name: "content-group-modal",
+    props: {
+        cmsWidgetName: String,
+    },
+    computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
+        ModalHeadline() {
+            let header = this.getCmsContent(this.cmsWidgetName, "HeaderText");
+            return header.replace("{custom:state}", states[this.mainStore.order.customer.address.state])
+        },
+        ModalSubheadertext() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        ModalBodyText() {
+            const bodyText = this.getCmsContent(this.cmsWidgetName, "BodyText");
+            return processIfStatements(bodyText, "custom", this.getStateSpecificText); 
+        },
+        ModalSubBodyText() {
+            const bodyText = this.getCmsContent(this.cmsWidgetName, "BodyText2");
+            return processIfStatements(bodyText, "custom", this.getStateSpecificText); 
+        },
+        ModalImage() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+    },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+
+        footerButtonClick() {
+            this.$refs[this.ModalName].closeModal();
+        },
+
+        getStateSpecificText(value) {
+            return this.mainStore.order.customer.address.state?.toLowerCase() == value?.toLowerCase();
+        },
+    },
+    components: {
+        modal,
+    },
+};
+</script>
+
+<style lang="scss">
+.modal {
+    &.modal-component {
+        .modal-dialog {
+            .modal-content {
+                .modal-body {
+                    .modal-sub-body {
+                        color: $gray-600;
+                    }
+                    ul {
+                        margin-bottom: 0;
+                    }
+                    p {
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>