Merge pull request #2198 from Safelite/feature/CASH-77

Feature/cash-77: Add popup for Save Progress before /quote fully loads
2025-01-15 08:20:46 -05:00 · 2025-01-15 08:20:46 -05:00 · 4d462fdb0a
commit 4d462fdb0a
parent 94504194ea 40ef99f06b
9 changed files with 398 additions and 67 deletions
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@ -2,7 +2,9 @@
    <!-- Modal -->
    <div
        class="modal fade modal-component"
+        :class="modalId"
        v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
+        :data-bs-backdrop="backdropSetting"
        :id="modalId"
        tabindex="-1"
        aria-labelledby="ModalComponentLabel"
@ -29,7 +31,7 @@
                        <modalButtonMain
                            isPrimary
                            class="w-100"
-                            id="modalbtn"
+                            :id="modalId + '-modalbtn'"
                            ref="modalButtonMain"
                            loaderColor="white"
                            :buttonText="footerButtonText"
@ -54,6 +56,7 @@ export default {
        headerText: String,
        footerButtonText: String,
        suppressPageScroll: Boolean,
+        staticBackdrop: Boolean,
        onModalOpenedCallback: {
            type: Function,
        },
@ -92,7 +95,7 @@ export default {
            e.preventDefault();
            if (this.isEnterClicked) return;
            this.isEnterClicked = true;
-            document.getElementById("modalbtn")?.focus();
+            document.getElementById(this.modalId + "-modalbtn")?.focus();
            this.$refs.modalButtonMain.clicked();
            document.getElementById(this.modalId)?.focus();
            setTimeout(() => {
@ -108,10 +111,12 @@ export default {
        onModalClosed() {
            this.resetButtonStyle();
            this.onModalClosedCallback?.();
-            if (this.suppressPageScroll) document.querySelector("body").classList.remove("prevent-modal-scroll");
+            if (this.suppressPageScroll)
+                document.querySelector("body").classList.remove("prevent-modal-scroll");
        },
        openModal() {
-            if (this.suppressPageScroll) document.querySelector("body").classList.add("prevent-modal-scroll");
+            if (this.suppressPageScroll)
+                document.querySelector("body").classList.add("prevent-modal-scroll");
            const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
            modal.show();
            this.$emit("isModalOpened", true);
@ -129,6 +134,9 @@ export default {
            }
            return !this.meta.dirty || !this.meta.valid;
        },
+        backdropSetting() {
+            return this.staticBackdrop ? "static" : "true";
+        },
    },
    components: {
        modalButtonMain,
@ -241,20 +249,45 @@ export default {
    .modal-body {
        display: flex;
        flex-direction: column;
+
        .textbox-question {
-            padding: .25rem 0;
+            padding: 0;
+
+            margin: 0 0 1.5rem 0;
+        }
+    }
+}
+
+.save-progress-modal-question,
+.save-progress-popup-question {
+    p.modal-body {
+        padding: 0;
+    }
+    .modal-body {
+        display: flex;
+        flex-direction: column;
+
+        .textbox-question {
+            padding: 0;
+
            label {
                text-align: left;
-                font-weight: 600;
+                font-weight: 900;
            }
        }
    }
+    .modal-body-inner {
+        text-align: center;
+        margin-bottom: 1.5rem;
+    }
    .modal-disclaimer {
-        font-size: .75rem;
+        font-size: 0.75rem;
        order: 2;
    }
    .modal-footer {
-        padding: 1.5rem 0;
+        margin: 0 0 1.5rem 0;
+        padding-top: 0;
+        padding-bottom: 0;
    }
 }
 body {
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@ -6,6 +6,7 @@
            :buttonText="buttonText"
            loaderColor="white"
            :suppressLoader="true"
+            class="save-progress-button"
            @click-event="openModal" />
        <alert
            class="my-4"
@ -18,7 +19,7 @@
            suppressPageScroll
            :footerButtonText="modalButtonText"
            @footer-button-event="saveProgress">
-            <p class="modal-body">{{ modalBodyText }}</p>
+            <p class="modal-body-inner">{{ modalBodyText }}</p>
            <saveProgressQuestion
                ref="saveProgressQuestion"
                v-model="userInput"
@ -102,50 +103,42 @@ export default {

 <style lang="scss" scoped>
 .save-progress-modal-question {
-    order: 2;
    margin-bottom: 1.5rem;
+    order: 2;
+    text-align: center;
+    background: $blue-100;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.5rem;

-    .btn-secondary {
+    .save-progress-button {
+        order: 4;
        position: relative;
-        background: $blue-100;
-        border: 1px solid transparent;
-        border-radius: $border-radius-lg;
        color: $blue;
-        font-weight: 500;
-        font-size: .875rem;
-        transition: all 150ms linear;
-        height: 3.5rem;
-        width: 100%;
+        border: none;
+        font-weight: 900;
+        font-size: 0.875rem;
+        text-align: center;
+        display: inline-block;
+        width: auto;
+        height: auto;
        text-decoration: underline;
-        text-underline-offset: .5rem;
-        &:hover {
-            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
-            color: $white;
-        }
-        &:focus, // Mouse, touch, stylus focus
-    &:focus-visible {
-            // Keyboard focus for accessibility
-            outline: none;
-            box-shadow:
-                0 0 0 3px $white,
-                0 0 0 5.5px $blue-700;
-            color: $white;
-            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
-        }
-        &:disabled {
-            background: transparent;
-            color: $gray-550 !important;
-            font-weight: 400;
-            height: 48px;
-            border: 1px solid $gray-550;
-            border-radius: $border-radius-lg;
-            cursor: pointer;
-            pointer-events: all;
-        }
-        &.has-loader {
-            color: $blue;
-            background-color: $blue;
-            pointer-events: none;
+        text-underline-offset: 0.375rem;
+        line-height: 1rem;
+        padding: 1rem;
+        margin: 0 auto;
+        transition: all 150ms linear;
+        background: none;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:focus-visible {
+            color: $blue-700;
+            background: none;
+            box-shadow: none;
        }
        &.delay {
            // fixes flicker while transitioning between states
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js
+++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js
@ -0,0 +1,51 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import saveProgressPopupQuestion from "./save-progress-popup-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+jest.mock("@/digital-components/modal/modal", () => ({
+    methods: {
+        closeModal: jest.fn(),
+        resetButtonStyle: jest.fn(),
+    },
+}));
+
+describe("save-progress-popup-question ", () => {
+    describe("when closeModal is run ", () => {
+        test("the modal should close ", () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: "",
+                    modalWidgetName: "testModal",
+                },
+            });
+
+            // Act
+            wrapper.vm.closeModal();
+
+            // Assert
+            expect(wrapper.vm.modal).not.toBeNull();
+        });
+    });
+});
+
+function setupMocks({ options, props }) {
+    const mountOptions = getMountOptions({
+        ...options,
+    });
+
+    const mockBaseMixin = {
+        methods: {
+            getCmsContent: jest.fn(),
+            dispatchStoreAction: jest.fn(),
+        },
+    };
+
+    if (props) mountOptions.propsData = props;
+
+    mountOptions.global.mixins = [mockBaseMixin];
+
+    const wrapper = mount(saveProgressPopupQuestion, mountOptions);
+
+    return { wrapper };
+}
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
+++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
@ -0,0 +1,227 @@
+<template>
+    <div class="save-progress-popup-question" :class="[isProgressSaved ? 'progress-saved' : '']">
+        <modal
+            :ref="modalName"
+            :headerText="modalHeaderText"
+            suppressPageScroll
+            :staticBackdrop="true"
+            :onModalClosedCallback="onModalClosed"
+            :footerButtonText="modalButtonText"
+            @footer-button-event="saveProgress">
+            <p class="modal-body-inner">{{ modalBodyText }}</p>
+            <saveProgressQuestion
+                ref="saveProgressQuestion"
+                v-model="userInput"
+                cmsWidgetName="SaveProgressPopupQuestionWidget"
+                class="save-progress-popup-question" />
+            <buttonMain
+                ref="skipButton"
+                :buttonText="buttonText"
+                loaderColor="white"
+                :suppressLoader="true"
+                class="skip-button"
+                @click-event="closeModal" />
+            <alert
+                class="my-4"
+                v-if="isProgressSaved"
+                cmsWidgetName="SaveProgressModalAlertWidget"
+                alertClass="alert-success" />
+            <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
+        </modal>
+    </div>
+</template>
+
+<script>
+import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
+import modal from "@/digital-components/modal/modal";
+import { storeActions } from "@/constants/store-actions.js";
+import buttonMain from "@/ux-components/button-main/button-main";
+import alert from "@/ux-components/alert/alert";
+
+export default {
+    name: "save-progress-popup-question",
+
+    data() {
+        return {
+            userInput: "",
+            isProgressSaved: false,
+        };
+    },
+    mounted() {
+        if (this.showSaveProgressPopup) this.modal.openModal();
+    },
+    emits: ["close-save-progress-popup", "save-progress"], // <--- should remove oodles of warnings in dev tools
+    props: {
+        modelValue: Object,
+        modalWidgetName: String,
+        pageName: String,
+        showSaveProgressPopup: Boolean,
+    },
+    computed: {
+        buttonText() {
+            return this.isProgressSaved
+                ? "Close"
+                : this.getCmsContent(this.modalWidgetName, "BodyText2");
+        },
+        modalHeaderText() {
+            return this.getCmsContent(this.modalWidgetName, "HeaderText");
+        },
+        modalBodyText() {
+            return this.getCmsContent(this.modalWidgetName, "BodyText");
+        },
+        modalButtonText() {
+            return this.getCmsContent(this.modalWidgetName, "FooterText");
+        },
+        modalDisclaimerText() {
+            return this.getCmsContent(this.modalWidgetName, "FooterText2");
+        },
+        modalName() {
+            return this.modalWidgetName;
+        },
+        modal() {
+            return this.$refs[this.modalName];
+        },
+    },
+    methods: {
+        closeModal() {
+            this.modal.closeModal();
+        },
+        onModalClosed() {
+            // send call to close popup
+            this.$emit("close-save-progress-popup");
+        },
+        async saveProgress() {
+            // save email address to store
+            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
+
+            // hide save progress button; show success message alert
+            this.isProgressSaved = true;
+
+            // send store call to send to new API (that triggers an email send)
+            this.$emit("save-progress");
+
+            // send call to close popup
+            this.closeModal();
+            this.$emit("close-save-progress-popup");
+        },
+    },
+
+    components: {
+        modal,
+        buttonMain,
+        saveProgressQuestion,
+        alert,
+    },
+};
+</script>
+
+<style lang="scss">
+.save-progress-popup-question {
+    order: 2;
+    margin-bottom: 1.5rem;
+
+    .modal-header {
+        padding-top: 1rem;
+
+        .modal-title {
+            padding-top: 3rem;
+        }
+
+        .modal-title::before {
+            position: absolute;
+            content: "";
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 63 62'%3E%3Cpath fill='%23B3B4B5' d='M31.5 62c17.052 0 30.876-1.503 30.876-3.358 0-1.854-13.824-3.358-30.876-3.358S.624 56.788.624 58.642C.624 60.497 14.448 62 31.5 62Z' opacity='.4'/%3E%3Cpath fill='%23DA291C' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m33.358 52.715-4.574 4.573-24.192-24.2 4.491-4.491 24.275 24.118Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M58.408 13.402 55.61 30.469 33.356 52.715 9.083 28.597 31.411 6.269l17.067-2.797 9.93 9.93Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M45.586 19.907a3.618 3.618 0 1 0 0-7.237 3.618 3.618 0 0 0 0 7.237Z'/%3E%3C/svg%3E");
+            width: 3.875rem;
+            height: 3.875rem;
+            top: 2.5rem;
+            left: calc(50% - 3.875rem / 2);
+        }
+    }
+
+    .skip-button {
+        order: 4;
+        position: relative;
+        color: $black;
+        border: none;
+        font-weight: 900;
+        font-size: 0.875rem;
+        text-align: center;
+        display: inline-block;
+        width: auto;
+        height: auto;
+        text-decoration: underline;
+        text-underline-offset: 0.375rem;
+        line-height: 1rem;
+        padding: 0 0 4px 0;
+        margin: 0 auto 1.5rem auto;
+        transition: all 150ms linear;
+        background: none;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:focus-visible {
+            color: $blue-700;
+            background: none;
+            box-shadow: none;
+        }
+
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+    .alert {
+        border-radius: $border-radius-lg;
+        border: 1px solid $green;
+        order: 2;
+        margin: 0 0 1.5rem 0;
+    }
+    .alert-heading {
+        position: relative;
+        font-weight: 600;
+        font-size: 1rem;
+        color: $black;
+        text-align: left;
+        padding-left: 1.5rem;
+        &::before {
+            position: absolute;
+            content: "";
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
+            width: 1rem;
+            height: 1rem;
+            top: 6px;
+            left: 0;
+        }
+    }
+    .modal-footer {
+        order: 3;
+    }
+    .modal-disclaimer {
+        order: 4;
+    }
+
+    &.progress-saved {
+        .modal-footer,
+        .save-progress-popup-question {
+            display: none;
+        }
+    }
+}
+.applied-promo {
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 24px;
+    color: $green;
+
+    .promo-code {
+        text-transform: uppercase;
+    }
+}
+.alert {
+    color: $red;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 24px;
+}
+</style>
--- a/src/layouts/capability-questions/capability-questions.vue
+++ b/src/layouts/capability-questions/capability-questions.vue
@ -13,13 +13,11 @@
            @back-click="navigateBack"
            :key="currentGlassIndex"
            :index="currentGlassIndex">
-            
            <!-- save progress goes into <slot> on questions-page-layout -->
-            <saveProgressModalQuestion 
+            <saveProgressModalQuestion
                modalWidgetName="SaveProgressModalWidget"
                v-if="!isEmailInStoreOnPageLoad"
                @save-progress="saveProgress" />
-
        </questions-page-layout>
    </Form>
 </template>
--- a/src/layouts/molding-questions/molding-questions.vue
+++ b/src/layouts/molding-questions/molding-questions.vue
@ -13,13 +13,11 @@
            @back-click="navigateBack"
            :key="currentGlassIndex"
            :index="currentGlassIndex">
-            
            <!-- save progress goes into <slot> on questions-page-layout -->
-            <saveProgressModalQuestion 
+            <saveProgressModalQuestion
                modalWidgetName="SaveProgressModalWidget"
                v-if="!isEmailInStoreOnPageLoad"
                @save-progress="saveProgress" />
-
        </questions-page-layout>
    </Form>
 </template>
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@ -13,13 +13,11 @@
            @back-click="navigateBack"
            :key="currentGlassIndex"
            :index="currentGlassIndex">
-            
            <!-- save progress goes into <slot> on questions-page-layout -->
-            <saveProgressModalQuestion 
+            <saveProgressModalQuestion
                modalWidgetName="SaveProgressModalWidget"
                v-if="!isEmailInStoreOnPageLoad"
                @save-progress="saveProgress" />
-
        </questions-page-layout>
    </Form>
 </template>
--- a/src/layouts/quote/quote.spec.js
+++ b/src/layouts/quote/quote.spec.js
@ -123,7 +123,7 @@ store.getters = {
        },
        customer: {
            emailAddress: "test@test.com",
-        }
+        },
    },
 };

@ -141,7 +141,7 @@ afterEach(() => {
        },
        customer: {
            emailAddress: "test@test.com",
-        }
+        },
    };
 });

--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@ -1,8 +1,10 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
+        <div
+            class="container-fluid page-container-grouped-styles quote-page"
+            :class="showSaveProgressPopup ? 'show-save-progress-popup' : ''">
+            <div class="row justify-content-center funnel-header-wrapper">
                <div class="col-md-6">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                </div>
@ -77,8 +79,9 @@
                        @back-clicked="backButtonAction"
                        @ForwardClicked="forwardButtonAction" />

-                    <saveProgressModalQuestion 
+                    <saveProgressModalQuestion
                        modalWidgetName="SaveProgressModalWidget"
+                        modalName="SaveProgressModal"
                        v-if="!isEmailInStoreOnPageLoad"
                        @save-progress="saveProgress" />

@ -89,6 +92,18 @@
                        class="mb-5 quote-disclaimer" />
                </div>
            </div>
+
+            <div class="row justify-content-center save-progress-popup">
+                <div class="col-md-6 col-xl-4">
+                    <saveProgressPopupQuestion
+                        modalWidgetName="SaveProgressPopupWidget"
+                        modalName="SaveProgressPopup"
+                        v-if="!isEmailInStoreOnPageLoad && showSaveProgressPopup"
+                        :showSaveProgressPopup="showSaveProgressPopup"
+                        @save-progress="saveProgress"
+                        @close-save-progress-popup="closeSaveProgressPopup" />
+                </div>
+            </div>
        </div>
    </Form>
 </template>
@ -106,6 +121,7 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import afterpayModalBanner from "@/layouts/quote/afterpay-modal-banner/afterpay-modal-banner";
 import recalDisclaimer from "@/layouts/quote/recal-disclaimer/recal-disclaimer.vue";
 import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
+import saveProgressPopupQuestion from "@/fmg-components/save-progress-popup-question/save-progress-popup-question";

 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@ -191,7 +207,9 @@ export default {

        const resultMap = await settleAllPromises(promiseResultMap);
        const emailFromStore = store.getters.order.customer.emailAddress;
-        
+        const isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
+        const showSaveProgressPopup = isEmailInStoreOnPageLoad ? false : true;
+
        const lineItems = deepClone(store.getters.order.lineItems);
        lineItems.vaps = lineItems.vaps ?? [];
        const nullSafeGlassParts = lineItems.glassParts ?? [];
@ -272,7 +290,8 @@ export default {
        // Call the "next" function to complete the transition to this page.
        next(async (vm) => {
            vm.setCmsContent(resultMap.cmsContent);
-            vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
+            vm.isEmailInStoreOnPageLoad = isEmailInStoreOnPageLoad;
+            vm.showSaveProgressPopup = showSaveProgressPopup;
            vm.addableVaps = addableVaps;
            vm.lineItems = lineItems;
            vm.availableLineItems = pricingResults;
@ -420,6 +439,7 @@ export default {
            holdParentAccountNumber: null,
            holdBillToAccountNumber: null,
            isEmailInStoreOnPageLoad: null,
+            showSaveProgressPopup: null,
        };
    },
    computed: {
@ -466,9 +486,6 @@ export default {
        },
    },
    methods: {
-        async handleClick() {
-            await saveQuote({ pageNameToLog: "quote" });
-        },
        openModalAction(modalName) {
            this.$refs[modalName].openModal();
        },
@ -510,8 +527,13 @@ export default {
            vehicleQuestionsMixin.methods.navigateBack(this);
        },
        saveProgress() {
+            this.isEmailInStoreOnPageLoad = true;
+            this.showSaveProgressPopup = false;
            saveQuote({ pageNameToLog: "quote" });
        },
+        closeSaveProgressPopup() {
+            this.showSaveProgressPopup = false;
+        },
        forwardButtonAction() {
            this.dispatchStoreAction(
                this.storeActions.SAVE_PAYMENT_TYPE,
@ -698,10 +720,21 @@ export default {
        promoModalQuestion,
        recalDisclaimer,
        saveProgressModalQuestion,
+        saveProgressPopupQuestion,
    },
 };
 </script>
+
 <style>
+.quote-page.show-save-progress-popup .row.justify-content-center {
+    display: none;
+
+    &.funnel-header-wrapper,
+    &.save-progress-popup {
+        display: block;
+    }
+}
+
 .funnel-sub-header {
    p {
        font-size: 1rem;