From 57c5442b149fe85f8612f76b2616b5fbf4442495 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Apr 2024 10:45:43 -0400
Subject: [PATCH] WIP Update page markup.

---
 .../coverage-statement/coverage-statement.vue |  16 +-
 src/layouts/tpa-search/tpa-search.vue         | 283 ++++++++++--------
 src/layouts/welcome-page/welcome-page.vue     |  24 +-
 3 files changed, 176 insertions(+), 147 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 3e8b176a..c2aca83d 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -8,11 +8,11 @@
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
           <loadingModal
-ref="loadingModal"
-:textSlides="loadingText" />
+            ref="loadingModal"
+            :textSlides="loadingText" />
           <siteHeader
-ref="siteHeader"
-cmsWidgetName="SiteHeaderWidget" />
+            ref="siteHeader"
+            cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center pt-5">
@@ -59,8 +59,8 @@ cmsWidgetName="SiteHeaderWidget" />
             class="fw-bold text-black mt-5 mb-2"
             v-html="nextStepsHeader"></div>
           <div
-class="body-text"
-v-html="nextStepsBody"></div>
+            class="body-text"
+            v-html="nextStepsBody"></div>
           <buttonQuestion
             v-if="isQuoteDisplayed"
             v-model="selectedProvider"
@@ -87,8 +87,8 @@ v-html="nextStepsBody"></div>
       </div>
     </div>
     <recalModal
-ref="RecalModal"
-cmsWidgetName="RecalModal" />
+        ref="RecalModal"
+        cmsWidgetName="RecalModal" />
     <contentGroupModal
       ref="DeductibleModal"
       cmsWidgetName="DeductibleModal"
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 661d68d7..06291290 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -1,114 +1,120 @@
 <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 fs-5 mt-5 mb-0 text-black w-100">
-                            {{ 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="tpaSearchQuestionFieldInput"
-                                :cmsWidgetName="widget.tpaSearchQuestion"
-                                :includeSearchIcon="true"
-                                :displayQuestionText="false"
-                                isRequired
-                                :isDisabled="reloadingProviders"
-                                :validationRules="rules.zipCode"
-                                @clickEvent="searchClick" />
-                        </div>
-                    </div>
-                </div>
-            </Form>
-            <googleMap
-                id="map"
-                class="mb-4"
-                :addresses="providerAddresses"
-                :zipCode="mapZipCode" />
-            <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="searchRadiusFilterInput"
-                            :options="filterOptions"
-                            disableAutoFill
-                            :isDisabled="reloadingProviders"
-                            :validationRules="rules.filter" />
-                        <loader
-                            v-if="reloadingProviders"
-                            id="providersLoader"
-                            loaderPosition="center"
-                            loaderColor="blue"
-                            :width="2"
-                            :height="2"
-                            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="javascript:void(0)"
-                                    :text="shopNotListedModalLink"
-                                    @clickEvent="doNotSeeMyShopLinkClick" />
-                            </div>
-                        </div>
-                    </div>
-                    <siteFooter
-                        ref="siteFooter"
-                        :cmsWidgetName="widget.siteFooter"
-                        :isForwardActionDisabled="!meta.valid"
-                        @ForwardClicked="forwardButtonAction"
-                        @backClicked="navigateBack" />
-                </div>
-            </Form>
-        </div>
+  <div class="container-fluid fade-on-route-transition">
+    <div class="row justify-content-center">
+      <div class="col-md-6 px-0 px-md-2">
+        <siteHeader
+ref="siteHeader"
+:cmsWidgetName="widget.siteHeader" />
+</div>
     </div>
+  </div>
+  <div class="container-fluid fade-on-route-transition">
+    <div class="row justify-content-center">
+      <div class="col-md-6 col-xl-4">
+        <Form
+          id="searchProvidersForm"
+          @submit="onSubmit"
+          @invalidSubmit="onInvalidSubmit">
+          <label
+            id="tpaSearchQuestionLabel"
+            for="tpaSearchQuestionField"
+            class="text-center fs-5 mt-5 mb-0 text-black w-100">
+            {{ 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="tpaSearchQuestionFieldInput"
+              :cmsWidgetName="widget.tpaSearchQuestion"
+              :includeSearchIcon="true"
+              :displayQuestionText="false"
+              isRequired
+              :isDisabled="reloadingProviders"
+              :validationRules="rules.zipCode"
+              @clickEvent="searchClick" />
+          </div>
+        </Form>
+      </div>
+    </div>
+  </div>
+  <div class="container-fluid fade-on-route-transition">
+    <div class="row justify-content-center">
+      <div class="col-md-6 col-xl-4">
+        <googleMap
+          id="map"
+          class="mb-4"
+          :addresses="providerAddresses"
+          :zipCode="mapZipCode" />
+        <Form
+          id="providerSelectionForm"
+          v-slot="{ meta }"
+          @submit="onSubmit"
+          @invalidSubmit="onInvalidSubmit">
+          <dropdownQuestion
+            id="searchRadiusFilter"
+            v-model="filter"
+            :cmsWidgetName="widget.filterByQuestion"
+            inputId="searchRadiusFilterInput"
+            :options="filterOptions"
+            disableAutoFill
+            :isDisabled="reloadingProviders"
+            :validationRules="rules.filter" />
+          <loader
+            v-if="reloadingProviders"
+            id="providersLoader"
+            loaderPosition="center"
+            loaderColor="blue"
+            :width="2"
+            :height="2"
+            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="javascript:void(0)"
+                :text="shopNotListedModalLink"
+                @clickEvent="doNotSeeMyShopLinkClick" />
+            </div>
+            <siteFooter
+              ref="siteFooter"
+              :cmsWidgetName="widget.siteFooter"
+              :isForwardActionDisabled="!meta.valid"
+              @ForwardClicked="forwardButtonAction"
+              @backClicked="navigateBack" />
+          </div>
+        </Form>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 // Components
@@ -198,7 +204,8 @@ export default {
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        const { zipCode, filter, providers, providerNumber } = await getInitialSearchData();
+        const { zipCode, filter, providers, providerNumber } =
+      await getInitialSearchData();
         const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
         next(async (vm) => {
@@ -237,10 +244,11 @@ export default {
     },
     computed: {
         filterOptions() {
-            const filterByAnswers = this.getCmsContent(
-                this.widget.filterByQuestion,
-                widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
-            ) ?? [];
+            const filterByAnswers =
+        this.getCmsContent(
+            this.widget.filterByQuestion,
+            widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
+        ) ?? [];
             const filterByAnswersObj = {};
             [...filterByAnswers].forEach((answer) => {
                 filterByAnswersObj[answer.Name] = answer.Name;
@@ -275,13 +283,21 @@ export default {
             )?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles);
         },
         providerAddresses() {
-            return this.providers?.map((provider) => this.getProviderAddress(provider)) ?? [];
+            return (
+                this.providers?.map((provider) => this.getProviderAddress(provider))
+        ?? []
+            );
         },
         providerButtonData() {
-            return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? [];
+            return (
+                this.providers?.map((provider) =>
+                    this.getShopButtonDataFromProvider(provider)) ?? []
+            );
         },
         selectedProviderIsSafeliteShop() {
-            return this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false;
+            return (
+                this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false
+            );
         }
     },
     watch: {
@@ -295,9 +311,10 @@ export default {
         },
         providers(newProviders) {
             if (this.dataLoaded) {
-                this.selectedProviderNumber = newProviders?.length === 1 ?? false
-                    ? newProviders[0]?.providerNumber ?? ''
-                    : '';
+                this.selectedProviderNumber =
+          newProviders?.length === 1 ?? false
+              ? newProviders[0]?.providerNumber ?? ''
+              : '';
             }
         },
         selectedProviderNumber(newNumber) {
@@ -355,12 +372,16 @@ export default {
             }
 
             const addressLine1 = toTitleCase(provider?.address?.streetAddress);
-            const joinString = addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
+            const joinString =
+        addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
             return [addressLine1, addressLine2].join(joinString);
         },
         async getProviderButtonData() {
             this.reloadingProviders = true;
-            const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
+            const getTpaProvidersResult = await useMainStore().getTpaProviders(
+                this.zipCode,
+                this.radiusInMiles
+            );
             this.reloadingProviders = false;
             return getTpaProvidersResult?.data?.shopProviders ?? [];
         },
@@ -394,16 +415,18 @@ export default {
         },
         getShopButtonDataFromProvider(provider) {
             const cellNumber = toDisplayPhoneNumber(provider?.phoneNumber);
-            const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles))
-                ? +provider.distanceInMiles.toFixed(1)
-                : null;
+            const distance =
+        provider?.distanceInMiles !== null
+        && !Number.isNaN(parseFloat(provider?.distanceInMiles))
+            ? +provider.distanceInMiles.toFixed(1)
+            : null;
 
             return {
                 buttonLabel: provider?.companyName ?? '',
-                buttonLabelSubCopy: distance === null
-                    ? ''
-                    : `${distance} mi`,
-                buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${cellNumber ?? ''}`,
+                buttonLabelSubCopy: distance === null ? '' : `${distance} mi`,
+                buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${
+                    cellNumber ?? ''
+                }`,
                 value: provider?.providerNumber ?? ''
             };
         }
@@ -413,6 +436,6 @@ export default {
 
 <style lang="scss" scoped>
 .darker-gray {
-    color: map-get($colors, "darker-gray");
+  color: map-get($colors, 'darker-gray');
 }
 </style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index b86dd5e7..64173a91 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -23,7 +23,8 @@ class="mt-4" />
             isRequired
             disableAutoFill
             :isDisabled="isPolicyHolderDisabled"
-            :validationRules="rules.policyNumber" />
+            :validationRules="rules.policyNumber"
+            class="mb-3" />
           <textboxQuestion
             ref="policyZip"
             v-model="welcomePageModel.policyZipCode"
@@ -32,7 +33,8 @@ class="mt-4" />
             isRequired
             mask="#####"
             :isDisabled="isPolicyZipDisabled"
-            :validationRules="rules.policyZip" />
+            :validationRules="rules.policyZip"
+            class="mb-3" />
           <textboxQuestion
             ref="dateOfLoss"
             v-model="welcomePageModel.dateOfLoss"
@@ -44,11 +46,12 @@ class="mt-4" />
             disableAutoFill
             :max="new Date().toJSON().slice(0, 10)"
             :min="'1972-12-01'"
-            :validationRules="rules.lossDate" />
+            :validationRules="rules.lossDate"
+            class="mb-3" />
           <textBlock
             cmsWidgetName="DamageDateEstimateWidget"
             typeStyle="small"
-            class="mt-2" />
+            class="mb-3" />
           <dropdownQuestion
             id="welcomeDropdown"
             ref="damageCause"
@@ -58,7 +61,8 @@ class="mt-4" />
             :options="DamageCauseOptions"
             disableAutoFill
             :validationRules="rules.damageOption"
-            placeHolderText="Select an option" />
+            placeHolderText="Select an option"
+            class="mb-3" />
           <textboxQuestion
             ref="phoneNumber"
             v-model="welcomePageModel.phoneNumber"
@@ -67,7 +71,8 @@ class="mt-4" />
             :validationRules="rules.phoneNumber"
             isRequired
             :mask="phoneMask"
-            disableAutoFill />
+            disableAutoFill
+            class="mb-3" />
           <textboxQuestion
             ref="email"
             v-model="welcomePageModel.email"
@@ -75,12 +80,13 @@ class="mt-4" />
             cmsWidgetName="EmailAddressQuestion"
             :validationRules="rules.email"
             isRequired
-            disableAutoFill />
+            disableAutoFill
+            class="mb-3" />
           <textboxQuestion
             v-if="displayDamageCityQuestion"
             ref="damageCity"
             v-model="welcomePageModel.damageCity"
-            class="mt-4"
+            class="mb-3"
             inputId="damageCityField"
             cmsWidgetName="DamageCityQuestion"
             isRequired
@@ -91,7 +97,7 @@ class="mt-4" />
             id="welcomeDropdown"
             ref="state"
             v-model="welcomePageModel.damageState"
-            class="mt-4"
+            class="mb-3"
             cmsWidgetName="DamageStateQuestion"
             inputId="8fdf9dc2e13e430eb57529499dceb3eb"
             :options="getStates"