From 0606e9cc275ca2363df81cd1ea11f51405d1e379 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 22 Nov 2023 11:11:26 -0500
Subject: [PATCH] Toggling routing depending on safelite shop or not

---
 src/iss-components/google-map/google-map.vue  |   3 +
 src/layouts/tpa-search/tpa-search.vue         | 257 +++++++++---------
 .../router-constants/navigation-scenarios.js  |   2 +
 src/router/router-constants/routing-table.js  |   6 +-
 4 files changed, 139 insertions(+), 129 deletions(-)

diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue
index fa5a57d8..4e5ba28f 100644
--- a/src/iss-components/google-map/google-map.vue
+++ b/src/iss-components/google-map/google-map.vue
@@ -27,6 +27,9 @@ export default {
             this.createMapWithMarkersForAddresses(newAddresses);
         }
     },
+    beforeMount() {
+        this.createMapWithMarkersForAddresses(this.addresses);
+    },
     methods: {
         async getMap(center) {
             const { Map } = await window.google.maps.importLibrary('maps');
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index c08087ee..c50523c4 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -1,124 +1,124 @@
 <template>
-<div class="page-container-grouped-styles">
-    <div class="fade-on-route-transition">
-        <siteHeader
-            ref="siteHeader"
-            :cmsWidgetName="widget.siteHeader" />
-        <Form
-            id="searchProvidersForm"
-            @submit="onSubmit"
-            @invalidSubmit="onInvalidSubmit">
-            <div class="container-fluid pb-2">
-                <div class="mx-5">
-                    <label
-                        id="tpaSearchQuestionLabel"
-                        for="tpaSearchQuestionField"
-                        class="text-center mt-5 mb-0 text-black w-100 search-question">
-                        {{ tpaSearchQuestionLabel }}
-                    </label>
-                    <label
-                        id="searchInstructions"
-                        for="tpaSearchQuestionField"
-                        class="text-center small darker-gray w-100 mb-4">
-                        {{ searchInstructionsText }}
-                    </label>
-                    <div class="mb-5">
-                        <textboxQuestion
-                            id="tpaSearchQuestionField"
-                            v-model="zipCode"
-                            inputId="tpaSearchQuestionField"
-                            :cmsWidgetName="widget.tpaSearchQuestion"
-                            :includeSearchIcon="true"
-                            :displayQuestionText="false"
-                            isRequired
-                            :validationRules="rules.zipCode"
-                            @clickEvent="searchClick" />
-                    </div>
-                </div>
-            </div>
-        </Form>
-        <loader
-            v-if="initialLoading"
-            ref="providersLoader"
-            loaderPosition="center"
-            loaderColor="blue"
-            :width="4"
-            :height="4"
-            class="loader" />
-        <div v-else>
-            <googleMap
-                id="map"
-                class="mb-4"
-                :addresses="providerAddresses"
-                :zipCode="mapZipCode"></googleMap>
+    <div class="page-container-grouped-styles">
+        <div class="fade-on-route-transition">
+            <siteHeader
+                ref="siteHeader"
+                :cmsWidgetName="widget.siteHeader" />
             <Form
-                id="providerSelectionForm"
-                v-slot="{ meta }"
+                id="searchProvidersForm"
                 @submit="onSubmit"
                 @invalidSubmit="onInvalidSubmit">
                 <div class="container-fluid pb-2">
                     <div class="mx-5">
-                        <dropdownQuestion
-                            id="searchRadiusFilter"
-                            v-model="filter"
-                            :cmsWidgetName="widget.filterByQuestion"
-                            inputId="filterByQuestionField"
-                            :options="filterOptions"
-                            disableAutoFill
-                            :validationRules="rules.filter" />
-
-                        <loader
-                            v-if="reloadProviders"
-                            ref="providersLoader"
-                            loaderPosition="center"
-                            loaderColor="blue"
-                            :width="4"
-                            :height="4"
-                            class="my-4" />
-                        <div v-else>
-                            <div class="my-4">
-                                <buttonQuestion
-                                    id="selectProviderQuestion"
-                                    v-model="selectedProviderNumber"
-                                    buttonTypeString="shopListButton"
-                                    :buttonTypeObject="shopListButton"
-                                    class="radioQuestion"
-                                    :answers="providerButtonData"
-                                    groupName="chooseShop"
-                                    textPosition="text-start"
-                                    isRequired
-                                    :validationRules="rules.provider"
-                                    :additionalButtonData="additionalButtonData" />
-                                <alert
-                                    v-if="providers?.length === 0 ?? true"
-                                    id="alertNoNetworkProviders"
-                                    :cmsWidgetName="widget.noNetworkShopsAlert"
-                                    alertClass="alert-warning"
-                                    :isDismissible="false"
-                                    :manualHeadline="noNetworkShopsAlertHeaderText" />
-                            </div>
-                            <div
-                                class="text-center">
-                                <textLink
-                                    id="preferredShopNotListedLink"
-                                    linkType="navigation"
-                                    href="#!"
-                                    :text="shopNotListedModalLink"
-                                    @clickEvent="doNotSeeMyShopLinkClick" />
-                            </div>
+                        <label
+                            id="tpaSearchQuestionLabel"
+                            for="tpaSearchQuestionField"
+                            class="text-center mt-5 mb-0 text-black w-100 search-question">
+                            {{ tpaSearchQuestionLabel }}
+                        </label>
+                        <label
+                            id="searchInstructions"
+                            for="tpaSearchQuestionField"
+                            class="text-center small darker-gray w-100 mb-4">
+                            {{ searchInstructionsText }}
+                        </label>
+                        <div class="mb-5">
+                            <textboxQuestion
+                                id="tpaSearchQuestionField"
+                                v-model="zipCode"
+                                inputId="tpaSearchQuestionField"
+                                :cmsWidgetName="widget.tpaSearchQuestion"
+                                :includeSearchIcon="true"
+                                :displayQuestionText="false"
+                                isRequired
+                                :validationRules="rules.zipCode"
+                                @clickEvent="searchClick" />
                         </div>
                     </div>
-                    <siteFooter
-                        ref="siteFooter"
-                        :cmsWidgetName="widget.siteFooter"
-                        :isForwardActionDisabled="!meta.valid"
-                        @ForwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
                 </div>
             </Form>
+            <loader
+                v-if="initialLoading"
+                ref="providersLoader"
+                loaderPosition="center"
+                loaderColor="blue"
+                :width="4"
+                :height="4"
+                class="loader" />
+            <div v-else>
+                <googleMap
+                    id="map"
+                    class="mb-4"
+                    :addresses="providerAddresses"
+                    :zipCode="mapZipCode"></googleMap>
+                <Form
+                    id="providerSelectionForm"
+                    v-slot="{ meta }"
+                    @submit="onSubmit"
+                    @invalidSubmit="onInvalidSubmit">
+                    <div class="container-fluid pb-2">
+                        <div class="mx-5">
+                            <dropdownQuestion
+                                id="searchRadiusFilter"
+                                v-model="filter"
+                                :cmsWidgetName="widget.filterByQuestion"
+                                inputId="filterByQuestionField"
+                                :options="filterOptions"
+                                disableAutoFill
+                                :validationRules="rules.filter" />
+
+                            <loader
+                                v-if="reloadProviders"
+                                ref="providersLoader"
+                                loaderPosition="center"
+                                loaderColor="blue"
+                                :width="4"
+                                :height="4"
+                                class="my-4" />
+                            <div v-else>
+                                <div class="my-4">
+                                    <buttonQuestion
+                                        id="selectProviderQuestion"
+                                        v-model="selectedProviderNumber"
+                                        buttonTypeString="shopListButton"
+                                        :buttonTypeObject="shopListButton"
+                                        class="radioQuestion"
+                                        :answers="providerButtonData"
+                                        groupName="chooseShop"
+                                        textPosition="text-start"
+                                        isRequired
+                                        :validationRules="rules.provider"
+                                        :additionalButtonData="additionalButtonData" />
+                                    <alert
+                                        v-if="providers?.length === 0 ?? true"
+                                        id="alertNoNetworkProviders"
+                                        :cmsWidgetName="widget.noNetworkShopsAlert"
+                                        alertClass="alert-warning"
+                                        :isDismissible="false"
+                                        :manualHeadline="noNetworkShopsAlertHeaderText" />
+                                </div>
+                                <div
+                                    class="text-center">
+                                    <textLink
+                                        id="preferredShopNotListedLink"
+                                        linkType="navigation"
+                                        href="#!"
+                                        :text="shopNotListedModalLink"
+                                        @clickEvent="doNotSeeMyShopLinkClick" />
+                                </div>
+                            </div>
+                        </div>
+                        <siteFooter
+                            ref="siteFooter"
+                            :cmsWidgetName="widget.siteFooter"
+                            :isForwardActionDisabled="!meta.valid"
+                            @ForwardClicked="forwardButtonAction"
+                            @backClicked="backButtonAction" />
+                    </div>
+                </Form>
+            </div>
         </div>
     </div>
-</div>
 </template>
 <script>
 // Components
@@ -141,6 +141,7 @@ import { useMainStore } from '@/store';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import globalRules from '@/constants/global-rules.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
+import { shallowRef } from 'vue';
 
 export default {
     name: 'tpa-search',
@@ -181,7 +182,7 @@ export default {
             filter: '',
             providers: [],
             selectedProviderNumber: '',
-            initialLoading: true,
+            initialLoading: false,
             reloadProviders: false,
             additionalButtonData: {
                 displayAvailabilityIndicators: false
@@ -200,7 +201,7 @@ export default {
                 filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
                 provider: globalRules.OPTION_REQUIRED
             },
-            shopListButton
+            shopListButton: shallowRef(shopListButton)
         };
     },
     computed: {
@@ -256,22 +257,28 @@ export default {
         },
         providerButtonData() {
             return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? [];
+        },
+        selectedProviderIsSafeliteShop() {
+            return this.providers.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false;
         }
     },
     watch: {
         async filter() {
-            // TODO right now this results in getProviders being called once more than it needs to be
             if (!this.initialLoading) {
                 this.reloadProviders = true;
-                this.providers = await this.getProviderButtonData();
+                await this.getProviderButtonData().then((providers) => {
+                    this.providers = providers;
+                });
                 this.mapZipCode = this.zipCode;
                 this.reloadProviders = false;
+            } else {
+                this.initialLoading = false;
             }
         },
-        providers(newProviders) {
-            this.selectedProviderNumber = newProviders?.length === 1 ?? false
-                ? newProviders[0].providerNumber
-                : '';
+        async providers(newProviders) {
+            if (newProviders?.length === 1 ?? false) {
+                this.selectedProviderNumber = newProviders[0]?.providerNumber ?? '';
+            }
         }
     },
     methods:
@@ -304,32 +311,26 @@ export default {
                     : addressLine2;
             },
             async setInitialFilterAndProviders() {
+                this.initialLoading = true;
                 const radiusOptions = [25, 50, 100];
                 const { zipCode } = useMainStore().order.customer.address;
 
-                console.log('getTpaProviders calls');
                 const tpaProvidersRadius25 = useMainStore().getTpaProviders(zipCode, radiusOptions[0]);
                 const tpaProvidersRadius50 = useMainStore().getTpaProviders(zipCode, radiusOptions[1]);
                 const tpaProvidersRadius100 = useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
-                console.log('after not awaited getTpaProviders calls');
 
                 let radius = '25 miles';
                 let providers = await tpaProvidersRadius25;
-                console.log('after 25 awaited');
                 if ((providers?.data?.shopProviders ?? []).length === 0) {
                     radius = '50 miles';
                     providers = await tpaProvidersRadius50;
-                    console.log('after 50 awaited');
                     if ((providers?.data?.shopProviders ?? []).length === 0) {
                         radius = '100 miles';
                         providers = await tpaProvidersRadius100;
-                        console.log('after 100 awaited');
                     }
                 }
-                console.log('after if');
                 this.filter = radius;
                 this.providers = providers?.data?.shopProviders ?? [];
-                this.initialLoading = false;
             },
             async getProviderButtonData() {
                 const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
@@ -351,10 +352,10 @@ export default {
                 this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
             },
             forwardButtonAction() {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD,
-                    this.$route
-                );
+                const scenario = this.selectedProviderIsSafeliteShop
+                    ? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
+                    : this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
+                this.$router.navigate(scenario, this.$route);
             },
             getCustomValueFromString(str) {
                 switch (str) {
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 69c61090..3a03cf51 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -65,6 +65,8 @@ const navigationScenarios = Object.freeze({
 
     // TPA Search
     CLICKED_DO_NOT_SEE_MY_SHOP_LINK: 'CLICKED_DO_NOT_SEE_MY_SHOP_LINK',
+    CLICKED_FORWARD_WITH_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_SAFELITE_SHOP',
+    CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP',
 
     // Provider Preference
     CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 124ff62e..7f064f9b 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -664,7 +664,11 @@ const routingTable = () => [
                 destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
             },
             {
-                scenario: navigationScenarios.CLICKED_FORWARD,
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP,
+                destinationIssPageValue: issPageValues.SERVICE_LOCATION
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
                 destinationIssPageValue: issPageValues.TPA_SUBMIT
             },
             {