Final styling

src/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue

@@ -5,7 +5,7 @@
         <baseInputButton
             v-bind="$props"
             v-model="selectedValue"
-            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-4 no-hover">
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 label-margin-bottom no-hover">
             <div
                 :aria-label="buttonLabel"
                 class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
@@ -121,19 +121,10 @@ export default {
   input[type="checkbox"] {
       position: static; //override bootstrap
 
-    //   &:focus-visible + .list-button-content {
-    //       box-shadow: 0 0 0 2.5px $blue;
-    //   }
-    //   &:focus + .list-button-content {
-    //       box-shadow: 0 0 0 2.5px $blue;
-    //   }
       &:checked + .list-button-content {
-          background: $blue-100;
+          background: #e7f1f6;
-          box-shadow: 0 0 0 1px $blue;
+          border: 1px solid #0070d1;
       }
-    //   &:checked:focus + .list-button-content {
-    //       box-shadow: 0 0 0 2.5px $blue;
-    //   }
   }
 }
 .list-button-content {
@@ -242,4 +233,7 @@ export default {
       text-align: left;
   }
 }
+div.col:not(:last-child) >.label-margin-bottom{
+    margin-bottom: 16px;
+}
 </style>

src/layouts/tpa-search/tpa-search.vue

@@ -99,7 +99,9 @@
                                     :text="shopNotListedModalLink"
                                     @clickEvent="doNotSeeMyShopLinkClick" />
                             </div>
+                            <hr>
                             <siteFooter
+                                class="mt-6"
                                 ref="siteFooter"
                                 :cmsWidgetName="widget.siteFooter"
                                 :isForwardActionDisabled="!meta.valid"
@@ -145,6 +147,7 @@ import { shallowRef } from 'vue';
 import { toTitleCase, toDisplayPhoneNumber } from '@/helpers/text-helper.js';
 import bailoutMessage from '@/constants/bailoutMessage';
 import settleAllPromises from '@/helpers/layout-helper';
+import issPageValues from '@/router/router-constants/issPage-values';
 
 
 export default {
@@ -165,8 +168,9 @@ export default {
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
         const zipCode = useMainStore().order.customer.address.zipCode;
+        const pageData = useMainStore().pageData(to.query.issPage);
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const providersPromise = useMainStore().getTpaAndSafeliteProviders(zipCode);
+        const providersPromise = useMainStore().getTpaAndSafeliteProviders(zipCode, pageData?.tpaSearchValue ?? '');
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
@@ -180,17 +184,21 @@ export default {
         const resultMap = await settleAllPromises(promiseResultMap);
         next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.tpaSearchValue = ""; // TODO: use page data to set the value
             vm.mapZipCode = zipCode;
-            vm.providers = resultMap.providers; 
+            vm.providers = resultMap.providers;
+            if (pageData) {
+                vm.tpaSearchValue = pageData?.tpaSearchValue ?? vm.mapZipCode;
+                vm.radiusFilter = pageData?.radiusFilter ?? 25;
+            }
         });
     },
     data() {
         return {
             dataLoaded: false,
+            pageData: null,
             tpaSearchValue: null,
             mapZipCode: null,
-            radiusFilter: useMainStore().order.serviceLocation.tpaSearchRadius ?? 25, // TODO: use page data to set the value
+            radiusFilter: null,
             providers: [],
             selectedProviderNumber: useMainStore().order.serviceLocation.provider.providerNumber,
             reloadingProviders: false,
@@ -252,7 +260,7 @@ export default {
             return this.getCmsContent(
                 this.widget.noNetworkShopsAlert,
                 widgetFields.ALERT_WIDGET.HEADLINE_TEXT
-            )?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles);
+            )?.replaceAll('{custom:radiusInMiles}', this.radiusFilter + " miles");
         },
         radiusFilteredAndCappedProviders() {
             return this.providers.filter((provider) => provider.distanceInMiles <= this.radiusFilter).slice(0, 5);
@@ -289,7 +297,6 @@ export default {
             const provider = this.providers?.find((p) => p.providerNumber === newNumber);
             if (provider && this.dataLoaded) {
                 useMainStore().updateServiceLocation({
-                    tpaSearchRadius: this.radiusFilter,
                     zipCode: this.zipCode,
                     provider: {
                         providerNumber: provider?.providerNumber,
@@ -375,6 +382,10 @@ export default {
                 ? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
                 : this.navigationScenarios
                     .CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
+            // Do not save the zip code as the tpa search value, prevents an outdated zipcode from being used
+            //   as the default search value if customer goes back and changes zip earlier in the flow
+            const tpaSearchValueToSave = this.tpaSearchValue === this.mapZipCode ? '' : this.tpaSearchValue;
+            this.savePageDataToStore(issPageValues.TPA_SEARCH, {tpaSearchValue: tpaSearchValueToSave, radiusFilter: this.radiusFilter});
             this.$router.navigate(scenario, this.$route);
         },
         getShopButtonDataFromProvider(provider) {
@@ -411,7 +422,20 @@ export default {
     height: 435px;
 }
 
+#providerSelectionForm {
+    #alertNoNetworkProviders {
+       :deep(.alert) {
+        margin-bottom: 0px;
+       }
+    }
+}
+
+hr {
+    margin: 22px 0;
+}
+
 .need-help-link-container {
+    margin-top:30px;
     margin-bottom: 35px;
 }