INSR-10489: Add benefit-recal-modal to schedule-page

src/layouts/schedule-page/benefit-recal-modal/benefit-recal-modal.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="benefit-recal-modal-container">
+        <modal
+            class="benefit-recal-modal"
+            ref="benefitRecalModal"
+            :displayCloseButton="true"
+            :displayFooterButton="false"
+            :closeLinkText="modalCloseLinkText"
+            :footerButtonText="modalFooterButtonText"
+            :onModalClosedCallback="onModalClosed">
+            <img
+                :src="modalImage"
+                class="recal-image"
+                alt="" />
+            <h5
+                class="header-text"
+                v-html="modalHeaderText"></h5>
+            <div v-html="modalBodyText" class="recal-modal-body"></div>
+            <div class="recal-modal-footer">
+                <buttonMain
+                    id="modalbtn"
+                    ref="modalButtonMain"
+                    class="w-100"
+                    :buttonText="modalFooterButtonText"
+                    @clickEvent="continueWithSafeliteClicked" />
+                <textLink
+                    class="mt-4 mb-0"
+                    linkType="text"
+                    :text="modalCloseLinkText"
+                    href="#!"
+                    @click="scheduleElsewhereClicked" />
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import widgetFields from '@/constants/cms-widget-fields';
+import modal from '@/digital-components/modal/modal.vue';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
+import textLink from '@/ux-components/text-link/text-link.vue';
+
+export default {
+    name: 'benefit-recal-modal',
+    components: {
+        modal,
+        buttonMain,
+        textLink
+    },
+    emits: ['continue-safelite-clicked', 'schedule-elsewhere-clicked'],
+    data() {
+        return {
+            schedulingElsewhere: false
+        };
+     },
+    props: {
+        cmsWidgetName: {
+            type: String,
+            default: 'BenefitRecalModalWidget'
+        }
+    },
+    computed: {
+        modalBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT)
+        },
+        modalCloseLinkText() {
+            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+        },
+        modalHeaderText() {
+            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+        },
+        modalFooterButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT);
+        },
+        modalImage() {
+            return this.getCmsContent(this.cmsWidgetName, 'Image');
+        }
+    },
+    methods: {
+        continueWithSafeliteClicked() {
+            this.$refs.benefitRecalModal.closeModal();
+        },
+        scheduleElsewhereClicked() {
+            this.schedulingElsewhere = true;
+            this.$refs.benefitRecalModal.closeModal();
+        },
+        onModalClosed() {
+            this.pushEvent();
+            if (!this.schedulingElsewhere) {
+                console.log('Emitting continue-safelite-clicked event');
+                this.$emit('continue-safelite-clicked');
+            }
+            else {
+                console.log('Emitting schedule-elsewhere-clicked event');
+                this.$emit('schedule-elsewhere-clicked');
+            }
+        },
+        openModal() {
+            this.$refs.benefitRecalModal.openModal();
+        },
+        pushEvent() {
+            const gaLabel = this.schedulingElsewhere ? 'schedule_elsewhere_clicked' : 'continue_with_safelite_clicked';
+                this.pushEventToGA(
+                    'safelite_benefit_modal',
+                    'modal_closed',
+                    gaLabel,
+                    true
+                );
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.benefit-recal-modal-container {
+    .recal-image {
+        margin: 1rem 0;
+        width: 23.5rem;
+        height: auto;
+    }
+    .recal-modal-footer {
+        border-top: none;
+        padding: .625rem 1.5rem 1.5rem 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        button {
+            margin: 0;
+            background-color: $green;
+            color: $white;
+            border-color: $blue;
+                font-weight: $font-weight-bold;
+            &:hover {
+                background-color: $green;
+                color: $white;
+                border-color: $heritage-blue-secondary;
+                box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $green; 
+            }
+            &:active,
+            &:focus {
+                box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $green; 
+            }
+        }
+        a {
+            margin: 1rem 0 0;
+        }
+    }
+}
+:deep(.modal) {
+    .modal-footer {
+        display: none;
+    }
+}
+</style>

src/layouts/schedule-page/schedule-page.vue

@@ -55,7 +55,7 @@
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardButtonHidden="!hasNeededServiceLocationData"
                         :isForwardButtonNavigationDisabled="!isFormValid"
-                        @backClicked="navigateBack(this, navigateBackScenario)"
+                        @backClicked="backButtonAction"
                         @forwardClicked="forwardButtonAction" />
                 </div>
             </div>
@@ -69,6 +69,11 @@
             cmsWidgetName="RecalAckModalWidget"
             :ackError="ackError"
             @recalAcknowledged="updateIsRecalAcknowledged"/>
+        <benefitRecalModal
+            :ref="BENEFIT_RECAL_MODAL_REF_NAME"
+            cmsWidgetName="BenefitRecalModalWidget"
+            @continue-safelite-clicked="continueWithSafeliteClicked"
+            @schedule-elsewhere-clicked="scheduleElsewhereClicked" />
     </Form>
 </template>
 <script>
@@ -81,6 +86,7 @@ import serviceLocation from '@/layouts/schedule-page/service-location/service-lo
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import suggestTimeslotModal from '@/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue';
 import recalAckModal from '@/layouts/schedule-page/recal-ack-modal/recal-ack-modal.vue';
+import benefitRecalModal from '@/layouts/schedule-page/benefit-recal-modal/benefit-recal-modal.vue';
 
 // Supporting files
 import { experimentSettings, experimentTest, experimentVariation, experimentUniverses } from '@/constants/experiments';
@@ -118,6 +124,7 @@ import errorMessages from '@/constants/error-messages';
 const SUGGEST_TIMESLOT_MODAL_REF_NAME = 'SuggestTimeslotModal';
 const TIME_SLOTS_CALL_DAYS_LIMIT = 15;
 const RECAL_ACK_MODAL_REF_NAME = 'recalAckModal';
+const BENEFIT_RECAL_MODAL_REF_NAME = 'benefitRecalModal';
 
 const getAvailableDates = async (
     startDateString,
@@ -240,7 +247,8 @@ export default {
         siteFooter,
         suggestTimeslotModal,
         Form,
-        recalAckModal
+        recalAckModal,
+        benefitRecalModal
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -382,7 +390,9 @@ export default {
             showDatePickerError: false,
             SUGGEST_TIMESLOT_MODAL_REF_NAME,
             RECAL_ACK_MODAL_REF_NAME,
-            isRecalAcknowledged: this.getIsRecalAcknowledgedForScheduling()
+            isRecalAcknowledged: this.getIsRecalAcknowledgedForScheduling(),
+            BENEFIT_RECAL_MODAL_REF_NAME,
+            benefitRecalModalAcknowledged: false
         };
     },
     computed: {
@@ -439,6 +449,9 @@ export default {
         },
         ackError() {
             return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
+        },
+        hasBenefitRecalModal() {
+            return this.getCmsContent('BenefitRecalModalWidget', 'HeaderText');
         }
     },
     watch: {
@@ -1017,6 +1030,29 @@ export default {
         getIsRecalAcknowledgedForScheduling() {
             return this.mainStore.order.isRecalAcknowledgedForScheduling;
         },
+        continueWithSafeliteClicked() {
+            console.log('continueWithSafeliteClicked');
+            this.benefitRecalModalAcknowledged = true;
+        },
+        scheduleElsewhereClicked() {
+            console.log('scheduleElsewhereClicked');
+            this.navigateBack(this, this.navigateBackScenario)
+        },
+        backButtonAction() {
+            if (this.hasBenefitRecalModal && !this.benefitRecalModalAcknowledged) {
+                this.$refs[BENEFIT_RECAL_MODAL_REF_NAME].openModal();
+                const gaLabel = this.mainStore.hasRecalibrationPart ? 'recalibration_version' : 'non-recalibration_version';
+                    this.pushEventToGA(
+                        'safelite_benefit_modal_displayed',
+                        this.mainStore.accountNameForEvents,
+                        gaLabel,
+                        true
+                    );
+            }
+            else {
+                this.navigateBack(this, this.navigateBackScenario)
+            }
+        }
     }
 };
 </script>