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

Feature/CASH-77 - add Save Progress to /quote page

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -103,6 +103,8 @@ export default {
 <style lang="scss" scoped>
 .save-progress-modal-question {
     order: 2;
+    margin-bottom: 1.5rem;
+
     .btn-secondary {
         position: relative;
         background: $blue-100;

src/layouts/quote/quote.spec.js

@@ -121,6 +121,9 @@ store.getters = {
             isInsurance: false,
             parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
         },
+        customer: {
+            emailAddress: "test@test.com",
+        }
     },
 };
 
@@ -136,6 +139,9 @@ afterEach(() => {
             insuranceCoverage: {},
             isInsurance: false,
         },
+        customer: {
+            emailAddress: "test@test.com",
+        }
     };
 });
 
@@ -263,6 +269,9 @@ describe("quote.vue", () => {
                     glassParts: ["item", "item2"],
                 },
                 payment: {},
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     zipCode: "12345",
                     zipCodeCtu: "value",
@@ -309,6 +318,9 @@ describe("quote.vue", () => {
                     glassParts: ["item", "item2"],
                 },
                 payment: {},
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     zipCode: "12345",
                     zipCodeCtu: "value",
@@ -355,6 +367,9 @@ describe("quote.vue", () => {
                 payment: {
                     isInsurance: null,
                 },
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     state: null,
                 },
@@ -396,6 +411,9 @@ describe("quote.vue", () => {
                 payment: {
                     isInsurance: null,
                 },
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     state: null,
                 },
@@ -438,6 +456,9 @@ describe("quote.vue", () => {
                 payment: {
                     isInsurance: true,
                 },
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     state: null,
                 },
@@ -480,6 +501,9 @@ describe("quote.vue", () => {
                 payment: {
                     isInsurance: false,
                 },
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     state: null,
                 },
@@ -523,6 +547,9 @@ describe("quote.vue", () => {
                 payment: {
                     isInsurance: null, // Ensure that previous selection isn't overriding selection
                 },
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     state: null,
                 },
@@ -568,6 +595,9 @@ describe("quote.vue", () => {
                 payment: {
                     isInsurance: null, // Ensure that previous selection isn't overriding selection
                 },
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     state: null,
                 },
@@ -612,6 +642,9 @@ describe("quote.vue", () => {
                 payment: {
                     isInsurance: null,
                 },
+                customer: {
+                    emailAddress: "test@test.com",
+                },
                 serviceLocation: {
                     state: "AZ",
                 },
@@ -717,6 +750,9 @@ describe("quote.vue", () => {
                     isInsurance: true,
                     inactivePromos: [],
                 },
+                customer: {
+                    emailAddress: "test@test.com",
+                },
             },
             externalParameterState: { isExternalParameter: 1 },
             externalParameterQuote: {

src/layouts/quote/quote.vue

@@ -77,6 +77,11 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
 
+                    <saveProgressModalQuestion 
+                        modalWidgetName="SaveProgressModalWidget"
+                        v-if="!isEmailInStoreOnPageLoad"
+                        @save-progress="saveProgress" />
+
                     <textBlock
                         cmsWidgetName="quoteDisclaimer"
                         justifyText="center"
@@ -84,11 +89,6 @@
                         class="mb-5 quote-disclaimer" />
                 </div>
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <button @click="handleClick">Click me!</button>
-                </div>
-            </div>
         </div>
     </Form>
 </template>
@@ -105,6 +105,7 @@ import contentGroupModal from "@/fmg-components/content-group-modal/content-grou
 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";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -189,6 +190,8 @@ export default {
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
+        const emailFromStore = store.getters.order.customer.emailAddress;
+        
         const lineItems = deepClone(store.getters.order.lineItems);
         lineItems.vaps = lineItems.vaps ?? [];
         const nullSafeGlassParts = lineItems.glassParts ?? [];
@@ -269,6 +272,7 @@ 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.addableVaps = addableVaps;
             vm.lineItems = lineItems;
             vm.availableLineItems = pricingResults;
@@ -415,6 +419,7 @@ export default {
             servicePackage: null,
             holdParentAccountNumber: null,
             holdBillToAccountNumber: null,
+            isEmailInStoreOnPageLoad: null,
         };
     },
     computed: {
@@ -504,6 +509,9 @@ export default {
         backButtonAction() {
             vehicleQuestionsMixin.methods.navigateBack(this);
         },
+        saveProgress() {
+            saveQuote({ pageNameToLog: "quote" });
+        },
         forwardButtonAction() {
             this.dispatchStoreAction(
                 this.storeActions.SAVE_PAYMENT_TYPE,
@@ -689,6 +697,7 @@ export default {
         afterpayModalBanner,
         promoModalQuestion,
         recalDisclaimer,
+        saveProgressModalQuestion,
     },
 };
 </script>