CSR-1012 | content group modals on quote page

src/fmg-components/content-group-modal/content-group-modal.vue

@@ -60,27 +60,3 @@ export default {
     },
 };
 </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>

src/layouts/quote/quote.vue

@@ -29,11 +29,11 @@ digital
                     cmsWidgetName="quoteDisclaimer"
                     justifyText="left"
                     typeStyle="caption"
-                    class="mt-7" />
+                    class="mt-4" />
-                <modal cmsWidgetName="RainDefenseModal" />
+                <contentGroupModal cmsWidgetName="RainDefenseModal" />
-                <modal cmsWidgetName="FrontWiperModal" />
+                <contentGroupModal cmsWidgetName="FrontWiperModal" />
-                <modal cmsWidgetName="RearWiperModal" />
+                <contentGroupModal cmsWidgetName="RearWiperModal" />
-                <modal cmsWidgetName="RecalModal" />
+                <contentGroupModal cmsWidgetName="RecalModal" />
                 <funnel-footer
                     cmsWidgetName="FunnelFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
@@ -54,7 +54,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
 import servicePackageQuestion from "./service-package-question/service-package-question";
 import textBlock from "@/digital-components/text-block/text-block";
-import modal from "@/digital-components/modal/modal";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import baseMixin from "@/mixins/base-mixin.js";
 import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
@@ -202,7 +202,7 @@ export default {
         textBlock,
         cashOrInsuranceQuestion,
         servicePackageQuestion,
-        modal,
+        contentGroupModal,
         loadingModal,
     },
 };

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -27,7 +27,7 @@
             ref="addressQuestions"
             v-model="mobileQuestionModel.addressQuestions"
             captureApartmentNumberOrBusinessName="true" />
-        <vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue"/>
+        <vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue" />
         <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
     </modal>
 </template>
@@ -49,7 +49,7 @@ import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
-import TextBlock from '../../../digital-components/text-block/text-block.vue';
+import TextBlock from "../../../digital-components/text-block/text-block.vue";
 
 // Define Validation Rules
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@@ -105,9 +105,7 @@ export default {
                 input.focus();
             });
         },
-        saveMobileLocationData() {
+        saveMobileLocationData() {},
-
-        },
     },
     computed: {
         getModalId() {
@@ -127,7 +125,6 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
-
     },
     mounted() {},
     components: {
@@ -135,7 +132,7 @@ export default {
         modal,
         addressQuestions,
         vehicleProtectedQuestion,
-        textBlock
+        textBlock,
     },
 };
 </script>

src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue

@@ -18,7 +18,7 @@ export default {
     name: "vehicle-protected-question",
     data() {
         return {
-            answers: [ "Yes", "No" ],
+            answers: ["Yes", "No"],
         };
     },
     props: {
@@ -50,4 +50,4 @@ export default {
         },
     },
 };
-</script>
+</script>

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -22,31 +22,31 @@
         :onModalOpenedCallback="onModalOpened"
         :footerButtonText="footerButtonText"
         @footer-button-event="setZip">
-            <textboxQuestion
+        <textboxQuestion
-                ref="zipInputTextQuestion"
+            ref="zipInputTextQuestion"
-                :cmsWidgetName="this.textboxQuestionWidgetName"
+            :cmsWidgetName="this.textboxQuestionWidgetName"
-                v-model="serviceZipCodeInput"
+            v-model="serviceZipCodeInput"
-                inputId="serviceZipCodeInput"
+            inputId="serviceZipCodeInput"
-                questionAlignment="center"
+            questionAlignment="center"
-                mask="#####"
+            mask="#####"
-                isRequired
+            isRequired
-                disableAutoFill
+            disableAutoFill
-                validationRules="zip-required|zip-format" />
+            validationRules="zip-required|zip-format" />
-            <alert
+        <alert
-                ref="alertInvalidZip"
+            ref="alertInvalidZip"
-                v-if="displayInvalidZipAlert"
+            v-if="displayInvalidZipAlert"
-                class="my-4"
+            class="my-4"
-                :cmsWidgetName="this.alertInvalidZipWidgetName"
+            :cmsWidgetName="this.alertInvalidZipWidgetName"
-                alertClass="alert-danger"
+            alertClass="alert-danger"
-                v-bind:isDismissible="false" />
+            v-bind:isDismissible="false" />
-            <alert
+        <alert
-                ref="alertNonServiceableZip"
+            ref="alertNonServiceableZip"
-                v-if="displayNonServiceableZipAlert"
+            v-if="displayNonServiceableZipAlert"
-                class="my-4"
+            class="my-4"
-                :cmsWidgetName="this.alertNonServiceableZipWidgetName"
+            :cmsWidgetName="this.alertNonServiceableZipWidgetName"
-                :manualHeadline="AlertNonServiceableZipHeader"
+            :manualHeadline="AlertNonServiceableZipHeader"
-                alertClass="alert-danger"
+            alertClass="alert-danger"
-                v-bind:isDismissible="false" />
+            v-bind:isDismissible="false" />
     </modal>
 </template>
 
@@ -152,9 +152,7 @@ export default {
             if (this.serviceZip && this.serviceZip != 0) {
                 return this.serviceZipState + ", " + this.serviceZip;
             }
-            return (
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
-                this.getCmsContent(this.cmsWidgetName, "SubheaderText") || "Enter your service ZIP"
-            );
         },
         footerButtonText() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");