From fc753e42532bfb41e990155466c17582e4a0026b Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Fri, 27 Oct 2023 15:01:23 -0400
Subject: [PATCH] Troubleshooting

---
 .../shop-list-button/shop-list-button.vue     |   6 +-
 .../shop-question/shop-question.vue           |   1 +
 src/layouts/tpa-search/tpa-search.vue         | 263 +++++++++++-------
 src/store/index.js                            |  53 ++--
 4 files changed, 195 insertions(+), 128 deletions(-)

diff --git a/src/iss-components/shop-list-button/shop-list-button.vue b/src/iss-components/shop-list-button/shop-list-button.vue
index f3b6c922..8367372d 100644
--- a/src/iss-components/shop-list-button/shop-list-button.vue
+++ b/src/iss-components/shop-list-button/shop-list-button.vue
@@ -67,13 +67,11 @@ export default {
     mixins: [inputButtonWrapperMixin],
     data() {
         return {
-            availabilityRating: null
+            availabilityRating: null,
+            displayAvailabilityIndicator: this.additionalButtonData?.displayAvailabilityIndicators ?? false
         };
     },
     computed: {
-        displayAvailabilityIndicators() {
-            return true;
-        },
         isLoaderDisplayed() {
             return this.availabilityRating == null;
         },
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 8951ed1e..d5fc9da5 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -124,6 +124,7 @@ export default {
             const formattedEndDate = endDate.toISOString().split('T')[0];
 
             return {
+                displayAvailabilityIndicators: true,
                 availabilityRatingCallback: getAvailabilityRating,
                 startDate: formattedStartDate,
                 endDate: formattedEndDate,
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index d3a533bb..0495bc71 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -1,98 +1,103 @@
 <template>
-    <siteHeader
-        ref="siteHeader"
-        :cmsWidgetName="widget.siteHeader" />
-    <Form
-        ref="searchProvidersForm"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid pb-2">
-            <div class="mx-5">
-                <p
-                    ref="tpaSearchQuestionLabel"
-                    class="text-center mt-5 mb-0 text-black w-100 search-question">
-                    {{ tpaSearchQuestionLabel }}
-                </p>
-                <!-- TODO make this label for appropriate text box -->
-                <p
-                    ref="searchInstructions"
-                    class="text-center small darker-gray w-100 mb-4">
-                    {{ searchInstructionsText }}
-                </p>
-                <div class="mb-5">
-                    <textboxQuestion
-                        ref="tpaSearchQuestionField"
-                        v-model="zipCode"
-                        inputId="tpaSearchQuestionField"
-                        :cmsWidgetName="widget.tpaSearchQuestion"
-                        :displayQuestionText="false"
-                        :includeSearchIcon="true"
-                        isRequired
-                        :validationRules="rules.zipCode"
-                        @clickEvent="searchClick" />
+    <div>
+        <siteHeader
+            ref="siteHeader"
+            :cmsWidgetName="widget.siteHeader" />
+        <Form
+            ref="searchProvidersForm"
+            @submit="onSubmit"
+            @invalidSubmit="onInvalidSubmit">
+            <div class="container-fluid pb-2">
+                <div class="mx-5">
+                    <label
+                        ref="tpaSearchQuestionLabel"
+                        for="tpaSearchQuestionField"
+                        class="text-center mt-5 mb-0 text-black w-100 search-question">
+                        {{ tpaSearchQuestionLabel }}
+                    </label>
+                    <!-- TODO make this label for appropriate text box -->
+                    <label
+                        ref="searchInstructions"
+                        for="tpaSearchQuestionField"
+                        class="text-center small darker-gray w-100 mb-4">
+                        {{ searchInstructionsText }}
+                    </label>
+                    <div class="mb-5">
+                        <textboxQuestion
+                            ref="tpaSearchQuestionField"
+                            v-model="zipCode"
+                            inputId="tpaSearchQuestionField"
+                            :cmsWidgetName="widget.tpaSearchQuestion"
+                            :includeSearchIcon="true"
+                            :displayQuestionText="false"
+                            isRequired
+                            :validationRules="rules.zipCode"
+                            @clickEvent="searchClick" />
+                    </div>
                 </div>
             </div>
-        </div>
-    </Form>
-    <Form
-        ref="providerSelectionForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid pb-2">
-            <p class="mb-4">
-                Placeholder for Map
-            </p>
+        </Form>
+        <Form
+            ref="providerSelectionForm"
+            v-slot="{ meta }"
+            @submit="onSubmit"
+            @invalidSubmit="onInvalidSubmit">
+            <div class="container-fluid pb-2">
+                <p class="mb-4">
+                    Placeholder for Map
+                </p>
 
-            <div class="mx-5">
-                <dropdownQuestion
-                    id="filter"
-                    ref="filter"
-                    v-model="filter"
-                    :cmsWidgetName="widget.filterByQuestion"
-                    inputId="filterByQuestionField"
-                    :options="filterOptions"
-                    disableAutoFill
-                    :validationRules="rules.filter" />
+                <div class="mx-5">
+                    <dropdownQuestion
+                        id="filter"
+                        ref="filter"
+                        v-model="filter"
+                        :cmsWidgetName="widget.filterByQuestion"
+                        inputId="filterByQuestionField"
+                        :options="filterOptions"
+                        disableAutoFill
+                        :validationRules="rules.filter" />
 
-                <div class="my-4">
-                    <buttonQuestion
-                        ref="providerQuestion"
-                        v-model="selectedProviderNumber"
-                        buttonTypeString="shopListButton"
-                        :buttonTypeObject="shopListButton"
-                        class="radioQuestion"
-                        :answers="providers"
-                        groupName="chooseShop"
-                        textPosition="text-start"
-                        isRequired
-                        :validationRules="rules.provider"
-                        :additionalButtonData="additionalButtonData" />
-                    <alert
-                        v-if="providers.length === 0"
-                        ref="alertNoNetworkProviders"
-                        :cmsWidgetName="widget.noNetworkShopsAlert"
-                        alertClass="alert-warning"
-                        :isDismissible="false"
-                        :manualHeadline="noNetworkShopsAlertHeaderText" />
-                </div>
-
-                <div
-                    class="text-center">
-                    <textLink
-                        linkType="navigation"
-                        :text="shopNotListedModalLink"
-                        @clickEvent="doNotSeeMyShopLinkClick" />
+                    <div class="my-4">
+                        <buttonQuestion
+                            ref="providerQuestion"
+                            v-model="selectedProviderNumber"
+                            buttonTypeString="shopListButton"
+                            :buttonTypeObject="shopListButton"
+                            class="radioQuestion"
+                            :answers="providers"
+                            groupName="chooseShop"
+                            textPosition="text-start"
+                            isRequired
+                            :validationRules="rules.provider"
+                            :additionalButtonData="additionalButtonData" />
+                        <alert
+                            v-if="providers.length === 0"
+                            ref="alertNoNetworkProviders"
+                            :cmsWidgetName="widget.noNetworkShopsAlert"
+                            alertClass="alert-warning"
+                            :isDismissible="false"
+                            :manualHeadline="noNetworkShopsAlertHeaderText" />
+                    </div>
+
+                    <div
+                        class="text-center">
+                        <textLink
+                            linkType="navigation"
+                            href="#!"
+                            :text="shopNotListedModalLink"
+                            @clickEvent="doNotSeeMyShopLinkClick" />
+                    </div>
                 </div>
+                <siteFooter
+                    ref="siteFooter"
+                    cmsWidgetName="SiteFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction"
+                    @backClicked="backButtonAction" />
             </div>
-            <siteFooter
-                ref="siteFooter"
-                cmsWidgetName="SiteFooterWidget"
-                :isForwardActionDisabled="!meta.valid"
-                @ForwardClicked="forwardButtonAction"
-                @backClicked="backButtonAction" />
-        </div>
-    </Form>
+        </Form>
+    </div>
 </template>
 <script>
 // Components
@@ -134,31 +139,80 @@ export default {
             {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
-            }];
+            }
+        ];
         const resultMap = await settleAllPromises(promiseResultMap);
+
+        console.log(JSON.stringify(resultMap.cmsContent));
+        // const tpaProviders = await useMainStore().getTpaProviders(zipCode, radiusOptions[0]).then(async providers => {
+        //     if (providers?.length === 0 ?? true) {
+        //         return useMainStore().getTpaProviders(zipCode, radiusOptions[1]).then(result => {
+        //             if (providers?.length === 0 ?? true) {
+        //                 return useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
+        //             }
+        //         })
+        //     }
+        // });
+
+        // get providers by zipCode and radius[0]
+        // if no providers, get providers by zipCode and radius[1]
+        // if no providers, get providers by zipCode and radius[2]
+
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            // vm.setFilter(radius);
+            // vm.setProviders(providers);
         });
     },
-    setup() {
+    async setup() {
         // TODO get TPA shops within radius of zipcode for account
         // Set initialFilter to value associated with the minimum distance required to return
         // at least one shop
+
+        // const radiusOptions = [25, 50, 100];
+        // const { zipCode } = useMainStore().order.customer.address;
+
+        // const tpaProvidersRadius25 = useMainStore().getTpaProviders(zipCode, radiusOptions[0]);
+        // const tpaProvidersRadius50 = useMainStore().getTpaProviders(zipCode, radiusOptions[1]);
+        // const tpaProvidersRadius100 = useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
+        // let radius = '25 miles';
+        // const providers = await tpaProvidersRadius25.then((result25) => {
+        //     if ((result25?.data ?? []).length === 0) {
+        //         radius = '50 miles';
+        //         console.log(`radius 50: ${radius}`);
+        //         return tpaProvidersRadius50.then((result50) => {
+        //             console.log(`result 50: ${JSON.stringify(result50)}`);
+        //             if ((result50?.data ?? []).length === 0) {
+        //                 radius = '100 miles';
+        //                 console.log(`radius 100: ${radius}`);
+        //                 return tpaProvidersRadius100;
+        //             }
+        //             return result50;
+        //         });
+        //     }
+        //     return result25;
+        // });
+
+        // console.log(`providers: ${JSON.stringify(providers)}`);
+
+        // const filter = radius;
+        // return { filter, providers, zipCode };
         const initialFilter = '25 miles';
         return { initialFilter };
     },
     data() {
-        const defaultRadius = 25;
+        // const defaultRadius = 25;
         const { zipCode } = useMainStore().order.customer.address;
-        const providers = useMainStore().getTpaProviders(this.zipCode, defaultRadius)?.data ?? [];
+        // const providers = useMainStore().getTpaProviders(this.zipCode, defaultRadius)?.data ?? [];
         return {
             // TODO should we default to this or policy.policyZipCode instead?
             zipCode,
             filter: this.initialFilter,
-            providers,
-            selectedProviderNumber: providers.length === 1
-                ? providers[0].value
-                : '',
+            providers: [],
+            // selectedProviderNumber: providers.length === 1
+            //     ? providers[0].value
+            //     : '',
+            selectedProviderNumber: '',
             widget: {
                 siteHeader: 'SiteHeaderWidget',
                 tpaSearchQuestion: 'TPASearchQuestion',
@@ -206,18 +260,9 @@ export default {
                 widgetFields.TEXT_BLOCK_WIDGET.TEXT
             );
         },
-        // TODO do we need this?
         additionalButtonData() {
-            const startDate = new Date();
-            const endDate = new Date();
-            endDate.setDate(startDate.getDate() + 6);
-
-            const formattedStartDate = startDate.toISOString().split('T')[0];
-            const formattedEndDate = endDate.toISOString().split('T')[0];
-
             return {
-                startDate: formattedStartDate,
-                endDate: formattedEndDate
+                displayAvailabilityIndicators: false
             };
         },
         radiusInMiles() {
@@ -289,6 +334,12 @@ export default {
                     default:
                         return null;
                 }
+            },
+            setFilter(filter) {
+                this.filter = filter;
+            },
+            setProviders(providers) {
+                this.providers = providers;
             }
         }
 };
diff --git a/src/store/index.js b/src/store/index.js
index b652da70..fb5e62ad 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -413,12 +413,12 @@ export const useMainStore = defineStore({
                         order.customer.address.streetAddress = insured?.address;
                         order.customer.address.city = insured?.city;
                         order.customer.address.state = insured?.state;
-                        order.customer.address.zipCode = insured?.zipCode;
+                        order.customer.address.zipCode = insured?.zipCode?.toString();
                         order.customer.firstName = insured?.firstName;
                         order.customer.lastName = insured?.lastName;
 
                         // populate additional fields
-                        order.serviceLocation.zipCode = insured?.zipCode;
+                        order.serviceLocation.zipCode = insured?.zipCode?.toString();
 
                         // populate vehicles
                         order.policy.vehicles = responsePolicy.vehicles ?? [];
@@ -801,22 +801,39 @@ export const useMainStore = defineStore({
 
         // TODO what info is returned here
         getTpaProviders(zipCode, radius) {
-            return {
-                data: [
-                    // {
-                    //     buttonLabel: 'USA Auto Glass',
-                    //     buttonLabelSubCopy: '1.5 mi',
-                    //     buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
-                    //     value: '000123'
-                    // },
-                    {
-                        buttonLabel: 'USA Auto Glass',
-                        buttonLabelSubCopy: '1.5 mi',
-                        buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
-                        value: '000123'
-                    }
-                ]
-            };
+            return new Promise((resolve, reject) => {
+                if (radius === 25) {
+                    resolve({});
+                } else if (radius === 50) {
+                    resolve({
+                        data: [
+                            {
+                                buttonLabel: 'USA Auto Glass',
+                                buttonLabelSubCopy: '1.5 mi',
+                                buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
+                                value: '000123'
+                            }
+                        ]
+                    });
+                } else {
+                    resolve({
+                        data: [
+                            {
+                                buttonLabel: 'USA Auto Glass',
+                                buttonLabelSubCopy: '1.5 mi',
+                                buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
+                                value: '000123'
+                            },
+                            {
+                                buttonLabel: 'USA Auto Glass',
+                                buttonLabelSubCopy: '1.5 mi',
+                                buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
+                                value: '000123'
+                            }
+                        ]
+                    });
+                }
+            });
         },
 
         async getSupportingItems() {