Checkpoint - needs additional testing / debugging

src/layouts/service-location/service-location.vue

@@ -46,7 +46,7 @@
                 alertClass="alert-warning" />
             <appointmentTypeQuestion
                 v-model="selectedAppointmentType"
-                v-if="!displayNoShopsAlert"
+                v-show="!displayNoShopsAlert"
                 :isServiceableMobile="isServiceableMobile"
                 :isServiceableInshop="isServiceableInshop"
                 ref="appointmentTypeQuestion"
@@ -67,12 +67,14 @@
                 modalWidgetName="MobileLocationModalWidget" />
             <shopQuestion
                 ref="shopQuestion"
-                v-show="selectedAppointmentType === 'Inshop' || selectedAppointmentType === 'Dropoff'"
+                v-show="
-                v-model="selectedShop"
+                    selectedAppointmentType === 'Inshop' || selectedAppointmentType === 'Dropoff'
+                "
+                v-model="providerNumber"
                 :isDropoff="isDropoff"
                 :serviceZipCode="zipCode"
                 :selectedAppointmentType="selectedAppointmentType"
-                :shopQuestionData="shopQuestionData"
+                :shopQuestionData="shopQuestionInitialData"
                 cmsWidgetName="ShopQuestionWidget" />
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer
@@ -147,9 +149,8 @@ export default {
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
             selectedAppointmentType: "Dropoff",
-            providerNumber: null,
+            providerNumber: "127",
-            shopQuestionData: null,
+            shopQuestionInitialData: null,
-            selectedShop: "",
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -163,7 +164,7 @@ export default {
 
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
 
-        const shopQuestionDataPromise = shopQuestion.methods.loadData();
+        const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData();
 
         // Settle promises and get results
         const promiseResultMap = [
@@ -184,8 +185,8 @@ export default {
                 promise: getZipCodeData,
             },
             {
-                resultKey: "shopQuestionData",
+                resultKey: "shopQuestionInitialData",
-                promise: shopQuestionDataPromise,
+                promise: shopQuestionInitialDataPromise,
             },
         ];
 
@@ -197,9 +198,9 @@ export default {
             vm.setData(
                 resultMap.zipCodeData,
                 resultMap.serviceabilityDetails,
-                resultMap.mobileFeePart,
+                resultMap.mobileFeePart
-                resultMap.shopQuestionData
             );
+            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
         });
     },
     computed: {
@@ -321,10 +322,6 @@ export default {
             if (mobileFeePart) {
                 this.mobileFeePart = mobileFeePart;
             }
-
-            if (shopQuestionData) {
-                this.shopQuestionData = shopQuestionData;
-            }
         },
         setContainsMilitaryBase(val) {
             if (this.zipContainsMilitaryBase !== val) {
@@ -374,6 +371,15 @@ export default {
             this.$refs[modalName].openModal();
         },
     },
+    // watch: {
+    //     zipCode: {
+    //         async handler() {
+    //             console.log(this.$refs)
+    //             const initialData = await this.$refs.shopQuestion.loadInitialData();
+    //             this.$refs.shopQuestion.initializeComponent(initialData);
+    //         }
+    //     }
+    // },
     components: {
         alert,
         serviceZipModalQuestion,

src/layouts/service-location/shop-question/shop-question.vue

@@ -71,17 +71,12 @@ export default {
         serviceZipCode: String,
         selectedAppointmentType: String,
         cmsWidgetName: String,
-        shopQuestionData: {
+        shopQuestionInitialData: {
             type: Object,
             required: true,
         },
         validationRules: String,
     },
-    components: {
-        alert,
-        buttonQuestion,
-        textLink,
-    },
     computed: {
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
@@ -102,31 +97,26 @@ export default {
         },
     },
     methods: {
-        loadData() {
+        loadInitialData() {
             return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
                 serviceZipCode: this.serviceZipCode,
             });
         },
-        async updateShopList() {
+        initializeComponent(shopQuestionInitialData) {
-            const result = await this.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
+            this.shops = shopQuestionInitialData;
-                serviceZipCode: this.serviceZipCode,
-            });
-
-            this.resetShopList();
-
-            return result.data;
         },
-        shopIterator(array, n) {
+        getNextShopsFromList(numberToGet = 3) {
-            let l = array.length;
+            const shopIterator = (array, n) => {
-            return () => {
+                let l = array.length;
-                var end = this.shopIndex + n;
+                return () => {
-                var part = array.slice(this.shopIndex, end);
+                    var end = this.shopIndex + n;
-                this.shopIndex = end < l ? end : this.shops.length;
+                    var part = array.slice(this.shopIndex, end);
-                return part;
+                    this.shopIndex = end < l ? end : this.shops.length;
+                    return part;
+                };
             };
-        },
+
-        async getNextShopsFromList() {
+            const nextShop = shopIterator(this.shops, numberToGet);
-            const nextShop = this.shopIterator(this.shops, 3);
 
             // Map API result data
             const mappedData = nextShop().map((shop) => {
@@ -147,70 +137,68 @@ export default {
                 });
             }
 
-            await this.$nextTick();
+            this.$nextTick().then(() => {
-
+                if (this.shopIndex == this.shops.length) {
-            if (this.shopIndex == this.shops.length) {
+                    this.displaySeeMoreLocationsLink = false;
-                this.displaySeeMoreLocationsLink = false;
+                } else {
-            } else {
+                    this.displaySeeMoreLocationsLink = true;
-                this.displaySeeMoreLocationsLink = true;
+                }
-            }
-
-            await this.$nextTick();
-
-            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
-
-            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
-
 
+                this.$nextTick().then(() => {
+                    this.scrollToBottom();
+                });
+            });
         },
         resetShopList() {
             this.answers = [];
             this.shopIndex = 0;
-            this.getNextShopsFromList();
 
             this.displaySeeMoreLocationsLink = true;
             this.selectedValue = "";
             this.$refs.buttonQuestion.resetField();
         },
+        scrollToBottom() {
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
+        },
     },
-    // mounted() {
-    //     console.log(this.shopQuestionData);
-    //     this.shops = this.shopQuestionData;
-    //     this.getNextShopsFromList();
-    //     console.log(this.shops);
-    // },
     watch: {
         serviceZipCode: {
-            async handler() {
+            handler(newValue) {
-                this.shops = await this.updateShopList();
+                this.loadInitialData(newValue).then((result) => {
+                    this.initializeComponent(result.data);
+                    this.resetShopList();
+                });
             },
         },
         selectedAppointmentType: {
-            async handler(newValue, oldValue) {
+            handler(newValue) {
-                if (oldValue == undefined) {
+                // If the validation has been previously triggered, clear it before displaying the component
-                    this.shops = this.shopQuestionData;
+                this.$refs.buttonQuestion.resetField();
-                    this.getNextShopsFromList();
+
-                    this.displaySeeMoreLocationsLink = true;
+                if (newValue != null) {
-                    return;
+                    this.$nextTick().then(() => {
+                        this.scrollToBottom();
+                    });
                 }
-
-                await this.$nextTick();
-
-                const container = document.getElementsByClassName(
-                    "page-container-grouped-styles"
-                )[0];
-                container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
-
-                this.resetShopList();
             },
         },
-        shopQuestionData: {
+        shops: {
             handler(newValue) {
-                console.log(newValue)
+                this.$refs.buttonQuestion.resetField();
-                this.shops = newValue;
+                const selectedShopIndex = newValue.findIndex((provider) => provider.providerNumber == this.modelValue);
-                this.getNextShopsFromList();
+                if (selectedShopIndex >= 3) {
+                    this.getNextShopsFromList(selectedShopIndex + 1);
+                } else {
+                    this.getNextShopsFromList();
+                }
             },
-        }
+        },
+    },
+    components: {
+        alert,
+        buttonQuestion,
+        textLink,
     },
 };
 </script>

src/mixins/analytics-mixin.js

@@ -24,38 +24,35 @@ import { applicationConfig } from "../constants/application-config";
 export default {
     methods: {
         logPageView(pageEvent) {
-            const currentPageName = getPageNameByQueryString();
+            // const currentPageName = getPageNameByQueryString();
-            var payload = {
+            // var payload = {
-                userId: getDeviceIdValue(),
+            //     userId: getDeviceIdValue(),
-                sessionKey: getSessionKeyValue(),
+            //     sessionKey: getSessionKeyValue(),
-                pageName: currentPageName,
+            //     pageName: currentPageName,
-                sessionId: getSessionIdValue(),
+            //     sessionId: getSessionIdValue(),
-                action: "",
+            //     action: "",
-                event: pageEvent,
+            //     event: pageEvent,
-                shouldUseSessionId: false,
+            //     shouldUseSessionId: false,
-                experimentsForUser: store.getters.applicationUser.experiments,
+            //     experimentsForUser: store.getters.applicationUser.experiments,
-            };
+            // };
-
+            // baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
-            baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
         },
 
         logCustomEvent(category, action, label, value) {
-            const currentPageName = getPageNameByQueryString();
+            // const currentPageName = getPageNameByQueryString();
-
+            // var payload = {
-            var payload = {
+            //     userId: getDeviceIdValue(),
-                userId: getDeviceIdValue(),
+            //     sessionKey: getSessionKeyValue(),
-                sessionKey: getSessionKeyValue(),
+            //     pageName: currentPageName,
-                pageName: currentPageName,
+            //     sessionId: getSessionIdValue(),
-                sessionId: getSessionIdValue(),
+            //     category: category,
-                category: category,
+            //     action: action,
-                action: action,
+            //     label: label,
-                label: label,
+            //     value: value,
-                value: value,
+            //     shouldUseSessionId: false,
-                shouldUseSessionId: false,
+            //     experimentsForUser: store.getters.applicationUser.experiments,
-                experimentsForUser: store.getters.applicationUser.experiments,
+            // };
-            };
+            // baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
-
-            baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
         },
 
         pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {