From 16201ba19dc7d507d5038e3343269d0b10caa4a1 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Fri, 27 Oct 2023 10:53:04 -0400
Subject: [PATCH] tpa search almost done

---
 src/constants/cms-widget-fields.js            |  39 +++
 src/constants/global-rules.js                 |   2 +
 .../textbox-question/textbox-question.vue     |  15 +-
 src/helpers/global-rule-definer.js            |   9 +
 .../shop-list-button/shop-list-button.spec.js |   1 +
 .../shop-list-button/shop-list-button.vue     |   2 +
 src/layouts/bailout-page/bailout-page.spec.js |   0
 src/layouts/bailout-page/bailout-page.vue     |  21 +-
 .../shop-question/shop-question.vue           |   2 +-
 src/layouts/tpa-search/tpa-search.spec.js     |   1 +
 src/layouts/tpa-search/tpa-search.vue         | 261 ++++++++++++++++--
 src/mixins/base-mixin.js                      |   1 +
 src/router/index.js                           |   7 +
 .../router-constants/navigation-scenarios.js  |   3 +
 src/router/router-constants/routing-table.js  |   4 +
 src/store/index.js                            |  22 +-
 16 files changed, 360 insertions(+), 30 deletions(-)
 create mode 100644 src/constants/cms-widget-fields.js
 create mode 100644 src/iss-components/shop-list-button/shop-list-button.spec.js
 rename src/{layouts/service-location/shop-question => iss-components}/shop-list-button/shop-list-button.vue (98%)
 create mode 100644 src/layouts/bailout-page/bailout-page.spec.js
 create mode 100644 src/layouts/tpa-search/tpa-search.spec.js

diff --git a/src/constants/cms-widget-fields.js b/src/constants/cms-widget-fields.js
new file mode 100644
index 00000000..e1aa86c1
--- /dev/null
+++ b/src/constants/cms-widget-fields.js
@@ -0,0 +1,39 @@
+const widgetFields = Object.freeze({
+    HEADER_WIDGET: {
+        NAME: 'Name',
+        ANSWERS: 'Answers'
+    },
+    INPUT_QUESTION_WIDGET: {
+        NAME: 'Name',
+        QUESTION_TEXT: 'QuestionText',
+        BUTTON_TEXT: 'ButtonText',
+        ANSWERS: 'Answers'
+    },
+    TEXT_BLOCK_WIDGET: {
+        NAME: 'Name',
+        TEXT: 'Text'
+    },
+    CONTENT_GROUP_WIDGET: {
+        NAME: 'Name',
+        HEADER_TEXT: 'HeaderText',
+        SUBHEADER_TEXT: 'SubheaderText',
+        BODY_TEXT: 'BodyText',
+        BODY_TEXT_2: 'BodyText2',
+        FOOTER_TEXT: 'FooterText',
+        IMAGE: 'Image'
+    },
+    ALERT_WIDGET: {
+        NAME: 'Name',
+        HEADLINE_TEXT: 'HeadlineText',
+        BODY_TEXT: 'BodyText'
+    },
+    FOOTER_WIDGET: {
+        NAME: 'Name',
+        BACK_BUTTON_TEXT: 'BackButtonText',
+        FORWARD_BUTTON_TEXT: 'ForwardButtonText',
+        FOOTER_IMAGE: 'FooterImage',
+        ALT_TEXT: 'AltText'
+    }
+});
+
+export default widgetFields;
diff --git a/src/constants/global-rules.js b/src/constants/global-rules.js
index d8c6f406..da36b822 100644
--- a/src/constants/global-rules.js
+++ b/src/constants/global-rules.js
@@ -13,6 +13,8 @@ const globalRules = Object.freeze({
     EMAIL_ADDRESS_FORMAT: 'email-address-format',
     PHONE_NUMBER_REQUIRED: 'phone-number-required',
     PHONE_NUMBER_FORMAT: 'phone-number-format',
+    ZIP_CODE_REQUIRED: 'zip-code-required',
+    ZIP_CODE_SEARCH_FORMAT: 'zip-code-search-format',
     OPTION_REQUIRED: 'option-required'
 });
 
diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index b619460e..e4d01ff3 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -48,7 +48,8 @@
             <button
                 v-if="includeSearchIcon"
                 type="submit"
-                aria-label="Search button" />
+                aria-label="Search button"
+                @click="clickedSearch" />
             <button
                 v-if="includeSelectIcon"
                 type="submit"
@@ -109,7 +110,7 @@ export default {
         max: String,
         disableAutoFill: Boolean
     },
-    emits: ['focus', 'update:modelValue', 'textboxQuestionEvent.inputIdAssigned'],
+    emits: ['focus', 'update:modelValue', 'textboxQuestionEvent.inputIdAssigned', 'click-event'],
     setup(props) {
         const propsClone = { ...props };
         const { modelValue } = propsClone;
@@ -217,6 +218,11 @@ export default {
             const blendedString = arrOriginalString.join('');
 
             this.$emit('update:modelValue', blendedString);
+        },
+        clickedSearch() {
+            if (this.meta.valid) {
+                this.$emit('click-event');
+            }
         }
     }
 };
@@ -267,7 +273,7 @@ input[type='date']::-webkit-calendar-picker-indicator {
         position: relative;
         &.has-search-icon {
             input[type='text'] {
-                border-radius: 50rem;
+                border-radius: 0.5rem;
             }
             button[type='submit'] {
                 position: absolute;
@@ -277,7 +283,8 @@ input[type='date']::-webkit-calendar-picker-indicator {
                 background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
                 background-repeat: no-repeat;
                 background-position: center;
-                border-radius: 0 50rem 50rem 0;
+                // TODO ask Brian for his thoughts on this
+                border-radius: 0 0.5rem 0.5rem 0;
                 background-color: $blue-100;
                 width: 2.75rem;
                 height: 100%;
diff --git a/src/helpers/global-rule-definer.js b/src/helpers/global-rule-definer.js
index 650fb97e..daee0de3 100644
--- a/src/helpers/global-rule-definer.js
+++ b/src/helpers/global-rule-definer.js
@@ -47,6 +47,14 @@ function defineGlobalPhoneNumberRules() {
     );
 }
 
+/**
+ * @summary Define global rules related to zip codes
+ */
+function defineGlobalZipCodeRules() {
+    defineRule(globalRules.ZIP_CODE_REQUIRED, required(errorMessages.ZIP_REQUIRED));
+    defineRule(globalRules.ZIP_CODE_SEARCH_FORMAT, regex(/^\d{5}$/, errorMessages.ZIP_FORMAT));
+}
+
 /**
  * @function defineGlobalRules
  * @summary Define all global rules
@@ -55,6 +63,7 @@ export default function defineGlobalRules() {
     defineGlobalNameRules();
     defineGlobalEmailRules();
     defineGlobalPhoneNumberRules();
+    defineGlobalZipCodeRules();
 
     defineRule(globalRules.OPTION_REQUIRED, required(errorMessages.OPTION_REQUIRED));
 }
diff --git a/src/iss-components/shop-list-button/shop-list-button.spec.js b/src/iss-components/shop-list-button/shop-list-button.spec.js
new file mode 100644
index 00000000..0ffdd02f
--- /dev/null
+++ b/src/iss-components/shop-list-button/shop-list-button.spec.js
@@ -0,0 +1 @@
+// TODO
\ No newline at end of file
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/iss-components/shop-list-button/shop-list-button.vue
similarity index 98%
rename from src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
rename to src/iss-components/shop-list-button/shop-list-button.vue
index c34d67c9..2ae01d85 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/iss-components/shop-list-button/shop-list-button.vue
@@ -151,10 +151,12 @@ export default {
               margin: 0 0.25rem 0 0;
 
               &.green {
+                  // eslint-disable-next-line max-len
                   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
               }
 
               &.orange {
+                  // eslint-disable-next-line max-len
                   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 0C9.81368 0 12.5 2.68632 12.5 6C12.5 9.31368 9.81368 12 6.5 12C3.18632 12 0.5 9.31368 0.5 6C0.5 2.68632 3.18632 0 6.5 0ZM6.5 0.84C3.6548 0.84 1.34 3.1548 1.34 6C1.34 8.8452 3.6548 11.16 6.5 11.16C9.3452 11.16 11.66 8.8452 11.66 6C11.66 3.1548 9.3452 0.84 6.5 0.84ZM7.90018 4.00596C8.06422 3.84204 8.33002 3.84192 8.49406 4.00596C8.6581 4.17 8.6581 4.43592 8.49406 4.59996L7.0939 6L8.49406 7.40004C8.6581 7.56408 8.6581 7.83 8.49406 7.99404C8.4121 8.076 8.30458 8.11704 8.19706 8.11704C8.08966 8.11704 7.98214 8.076 7.90018 7.99404L6.50002 6.594L5.09986 7.99404C5.01778 8.076 4.91038 8.11704 4.80286 8.11704C4.69546 8.11704 4.58794 8.076 4.50598 7.99404C4.34182 7.83 4.34182 7.56408 4.50598 7.40004L5.90614 6L4.50598 4.59996C4.34182 4.43592 4.34182 4.17 4.50598 4.00596C4.66978 3.84192 4.93582 3.84204 5.09986 4.00596L6.50002 5.406L7.90018 4.00596Z' fill='%23E86421'/%3E%3C/svg%3E%0A");
               }
           }
diff --git a/src/layouts/bailout-page/bailout-page.spec.js b/src/layouts/bailout-page/bailout-page.spec.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/layouts/bailout-page/bailout-page.vue b/src/layouts/bailout-page/bailout-page.vue
index c98033ff..5bfe399b 100644
--- a/src/layouts/bailout-page/bailout-page.vue
+++ b/src/layouts/bailout-page/bailout-page.vue
@@ -5,10 +5,11 @@
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <siteHeader
+                cmsWidgetName="SiteHeaderWidget" />
             <div class="main-content-container">
                 <siteSubHeader
-                    v-if="!isNoTpa"
+                    v-if="isTpaEnabled"
                     cmsWidgetName="SiteSubHeaderWidget"
                     class="sub-header-content"
                     justification="left" />
@@ -65,6 +66,7 @@
 </template>
 <script>
 // Components
+import { Form } from 'vee-validate';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
@@ -72,7 +74,6 @@ import textboxQuestion from '@/digital-components/textbox-question/textbox-quest
 // Supporting files
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { Form } from 'vee-validate';
 import globalRules from '@/constants/global-rules';
 import settleAllPromises from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
@@ -90,6 +91,7 @@ export default {
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
         // Call APIs
+        console.log('bailout b4 route enter');
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         // Settle promises and get results
         const promiseResultMap = [
@@ -100,16 +102,22 @@ export default {
         ];
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
-
+        console.log('about to enter next');
+        console.log(JSON.stringify(resultMap.cmsContent));
         next((vm) => {
+            console.log('in next');
             vm.setCmsContent(resultMap.cmsContent);
+            console.log('end of next');
         });
+        console.log('end of before route enter');
     },
     setup() {
+        console.log('bailout setup');
         const mainStore = useMainStore();
         return { mainStore };
     },
     data() {
+        console.log('bailout data');
         return {
             bailoutPageModel: this.getBailoutPageModelFromStore(),
             rules: {
@@ -121,8 +129,9 @@ export default {
         };
     },
     computed: {
-        isNoTpa() {
-            return !this.mainStore.issConfig.enableTPAFlow;
+        isTpaEnabled() {
+            console.log(this.mainStore.issConfig.enableTPAFlow);
+            return this.mainStore.issConfig.enableTPAFlow;
         }
     },
     methods: {
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 77f6d6b0..b141b946 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -56,7 +56,7 @@ import errorMessages from '@/constants/error-messages';
 import { useMainStore } from '@/store/index.js';
 import { nextTick } from 'vue';
 import { getAvailabilityRating } from '@/helpers/service-location-helper';
-import shopListButton from './shop-list-button/shop-list-button.vue';
+import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue';
 
 defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
 
diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js
new file mode 100644
index 00000000..384dfdc7
--- /dev/null
+++ b/src/layouts/tpa-search/tpa-search.spec.js
@@ -0,0 +1 @@
+// TODO finish
\ No newline at end of file
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index fe0a7ad2..d3a533bb 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -1,63 +1,275 @@
 <template>
+    <siteHeader
+        ref="siteHeader"
+        :cmsWidgetName="widget.siteHeader" />
     <Form
-        ref="theForm"
+        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>
+            </div>
+        </div>
+    </Form>
+    <Form
+        ref="providerSelectionForm"
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2 search">
-                    <p>Placeholder for TPA-Search</p>
-                    <siteFooter
-                    ref="siteFooter"
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+        <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="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>
             </div>
+            <siteFooter
+                ref="siteFooter"
+                cmsWidgetName="SiteFooterWidget"
+                :isForwardActionDisabled="!meta.valid"
+                @ForwardClicked="forwardButtonAction"
+                @backClicked="backButtonAction" />
         </div>
     </Form>
 </template>
 <script>
 // Components
+import { Form } from 'vee-validate';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
+import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
+import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue'
+import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue'
+import textLink from '@/ux-components/text-link/text-link.vue';
+import alert from '@/ux-components/alert/alert.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+
 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
-import { Form } from 'vee-validate';
+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';
 
 export default {
     name: 'tpa-search',
     components: {
         siteHeader,
+        textboxQuestion,
+        dropdownQuestion,
+        buttonQuestion,
+        textLink,
+        alert,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
             }];
-            // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    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 initialFilter = '25 miles';
+        return { initialFilter };
+    },
     data() {
+        const defaultRadius = 25;
+        const { zipCode } = useMainStore().order.customer.address;
+        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
+                : '',
+            widget: {
+                siteHeader: 'SiteHeaderWidget',
+                tpaSearchQuestion: 'TPASearchQuestion',
+                searchInstructions: 'SearchInstructions',
+                filterByQuestion: 'FilterByQuestion',
+                noNetworkShopsAlert: 'NoNetworkShopsAlertWidget',
+                shopNotListedLink: 'ShopNotListedLink',
+                siteFooter: 'SiteFooterWidget'
+            },
+            rules: {
+                zipCode: `${globalRules.ZIP_CODE_REQUIRED}|${globalRules.ZIP_CODE_SEARCH_FORMAT}`,
+                filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
+                provider: globalRules.OPTION_REQUIRED
+            },
+            shopListButton
+        };
+    },
+    computed: {
+        filterOptions() {
+            const filterByAnswers = this.getCmsContent(
+                this.widget.filterByQuestion,
+                widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
+            ) ?? [];
+            const filterByAnswersObj = {};
+            [...filterByAnswers].forEach((answer) => {
+                filterByAnswersObj[answer.Name] = answer.Name;
+            });
+            return filterByAnswersObj;
+        },
+        tpaSearchQuestionLabel() {
+            return this.getCmsContent(
+                this.widget.tpaSearchQuestion,
+                widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
+            );
+        },
+        searchInstructionsText() {
+            return this.getCmsContent(
+                this.widget.searchInstructions,
+                widgetFields.TEXT_BLOCK_WIDGET.TEXT
+            );
+        },
+        shopNotListedModalLink() {
+            return this.getCmsContent(
+                this.widget.shopNotListedLink,
+                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
+            };
+        },
+        radiusInMiles() {
+            switch (this.filter) {
+                case '25 miles':
+                    return 25;
+                case '50 miles':
+                    return 50;
+                case '100 miles':
+                    return 100;
+                default:
+                    return 0;
+            }
+        },
+        noNetworkShopsAlertHeaderText() {
+            return this.getCmsContent(
+                this.widget.noNetworkShopsAlert,
+                widgetFields.ALERT_WIDGET.HEADLINE_TEXT
+            )?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles);
+        }
+    },
+    watch: {
+        filter() {
+            console.log('filter changed');
+            this.providers = this.getProviders();
+        },
+        providers() {
+            console.log('providers changed');
+            if (this.providers?.length === 1 ?? false) {
+                console.log('one provider');
+                this.selectedProviderNumber = this.providers[0].value;
+            }
+        }
     },
     methods:
         {
+            getProviders() {
+                return useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles)?.data ?? [];
+            },
+            doNotSeeMyShopLinkClick() {
+                // TODO text on the bailout page should be based on have not seen my shop
+                // TODO pass data along with navigation
+                console.log('to the bailout page');
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_DO_NOT_SEE_MY_SHOP_LINK,
+                    this.$route
+                );
+            },
+            searchClick() {
+                console.log('valid search');
+                this.providers = this.getProviders();
+            },
             backButtonAction() {
                 this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
             },
@@ -69,13 +281,26 @@ export default {
                     this.navigationScenarios.CLICKED_FORWARD,
                     this.$route
                 );
+            },
+            getCustomValueFromString(str) {
+                switch (str) {
+                    case 'radiusInMiles':
+                        return this.radiusInMiles;
+                    default:
+                        return null;
+                }
             }
         }
 };
 </script>
 
 <style lang="scss" scoped>
-.search p{
-    margin-bottom:0.75rem;
+
+.search-question {
+    font-size: $h5-font-size;
+}
+
+.darker-gray {
+    color: map-get($colors, "darker-gray");
 }
 </style>
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index ff9655ab..bd2d0807 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -14,6 +14,7 @@ export default {
     },
     methods: {
         setCmsContent(cmsContent) {
+            console.log(' setting cms content');
             this.$root.cmsContentByWidget = cmsContent;
         },
         getCmsContent(widgetName, fieldName) {
diff --git a/src/router/index.js b/src/router/index.js
index ca1609f9..1b5de854 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -52,6 +52,7 @@ const routes = [
                 // Process ISS cookie.
                 updateOrCreateISSCookie();
 
+                // TODO check prerequisite stuff in here
                 if (router.hasRoute(issPageToUse)) {
                     // Since our route is already in scope, we can grab the component and call the arePagePrerequisitesValid function.
                     let component = router.getRoutes().filter((x) => x.name === issPageToUse)[0].components;
@@ -216,6 +217,7 @@ function navigate(
     optionalParams = {},
     optionalPageData = {}
 ) {
+    console.log('entering navigate');
     /*eslint-disable-line*/
     if (!scenario) {
         window.console.error('No scenario provided. Please review the routing table.');
@@ -230,12 +232,15 @@ function navigate(
         return;
     }
 
+    console.log('entering navigate');
     if (scenario === navigationScenarios.CLICKED_BACK_PREVIOUS) {
         // Update page to the prevous page in the router.
         // If we need to worry about typing this in from outside of the app,
         // we'll need to pre check history.length or if there is a previous page stored in state.
         router.go(-1);
     } else if (matchingScenarioMap.destinationIssPageValue) {
+        console.log(matchingScenarioMap);
+        console.log('else if 1');
         // Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object
         const existingPageDataForPage = useMainStore().pageData(matchingScenarioMap.destinationIssPageValue);
         baseMixin.methods.savePageDataToStore(
@@ -255,6 +260,8 @@ function navigate(
             params: optionalParams
         });
     } else if (matchingScenarioMap.destinationUrl) {
+        console.log(matchingScenarioMap.destinationUrl);
+        console.log('else if 2');
         navigateToUrl(matchingScenarioMap.destinationUrl, optionalQuery);
     }
 }
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 1c6c1a13..69c61090 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -63,6 +63,9 @@ const navigationScenarios = Object.freeze({
     CLICKED_BACK_WITH_REPAIR: 'CLICKED_BACK_WITH_REPAIR',
     CLICKED_FORWARD_WITH_INVALID_STATE: 'CLICKED_FORWARD_WITH_INVALID_STATE',
 
+    // TPA Search
+    CLICKED_DO_NOT_SEE_MY_SHOP_LINK: 'CLICKED_DO_NOT_SEE_MY_SHOP_LINK',
+
     // Provider Preference
     CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',
     CLICKED_FORWARD_WITH_TPA_ENABLED: 'CLICKED_FORWARD_WITH_TPA_ENABLED',
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 9ee532d5..eebf8437 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -666,6 +666,10 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.CLICKED_FORWARD,
                 destinationIssPageValue: issPageValues.TPA_SUBMIT
+            },
+            {
+                scenario: navigationScenarios.CLICKED_DO_NOT_SEE_MY_SHOP_LINK,
+                destinationIssPageValue: issPageValues.BAILOUT_PAGE
             }
         ]
     },
diff --git a/src/store/index.js b/src/store/index.js
index 60699f03..e5e7868c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -799,6 +799,26 @@ 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'
+                    }
+                ]
+            };
+        },
+
         async getSupportingItems() {
             const glassPartsArray = this.order.lineItems.glassParts ?? [];
             const { carId } = this.order.vehicle;
@@ -980,7 +1000,7 @@ export const useMainStore = defineStore({
                                 streetAddress2: customer.address?.streetAddress2,
                                 city: customer.address?.city,
                                 state: customer.address?.state,
-                                zipCode: customer.address?.zipCode
+                                zipCode: customer.address?.zipCode?.toString()
                             },
                             emailAddress: contactInfo.emailAddress,
                             firstName: contactInfo.firstName || customer.firstName,