From 877a1919af7b7bd49ed28401a24b8e58ac799f04 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 23 May 2024 16:10:39 -0400
Subject: [PATCH] Fix minor style issues on ISS.

---
 .../policy-holder-details.vue                 | 22 ++++----
 .../tpa-confirmation/tpa-confirmation.vue     | 37 ++++++--------
 src/layouts/tpa-submit/tpa-submit.vue         | 51 +++++++++----------
 3 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index 5e9fff1e..2758f64f 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -6,7 +6,7 @@
         @invalidSubmit="onInvalidSubmit">
         <div class="container-fluid fade-on-route-transition">
             <div class="row justify-content-center">
-                <div class="col-md-6 px-0 px-md-2">
+                <div class="col-md-6 px-0 px-md-2 mb-5">
                     <siteHeader cmsWidgetName="SiteHeaderWidget" />
                 </div>
             </div>
@@ -74,7 +74,7 @@ export default {
         addressQuestions,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
+        Form
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -85,8 +85,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
-            },
+                promise: cmsContentPromise
+            }
         ];
 
         // use resultMap to populate layout content.
@@ -106,8 +106,8 @@ export default {
             vehiclesFound: [],
             rules: {
                 firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
-                lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
-            },
+                lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED
+            }
         };
     },
     computed: {
@@ -116,7 +116,7 @@ export default {
         },
         vehiclesCount() {
             return this.vehiclesFound.length;
-        },
+        }
     },
     methods: {
         async forwardButtonAction() {
@@ -150,13 +150,13 @@ export default {
                         this.mainStore.order.customer.address.streetAddress2,
                     city: this.mainStore.order.customer.address.city,
                     state: this.mainStore.order.customer.address.state,
-                    zipCode: this.mainStore.order.customer.address.zipCode,
+                    zipCode: this.mainStore.order.customer.address.zipCode
                 },
                 firstName: this.mainStore.order.customer.firstName,
-                lastName: this.mainStore.order.customer.lastName,
+                lastName: this.mainStore.order.customer.lastName
             };
-        },
-    },
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index b619b83f..22ee1195 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -19,7 +19,7 @@
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
-                    <div class="text-center text-color--black pb-2 fs-5">
+                    <div class="d-flex justify-content-center align-items-center text-color--black pb-2 fs-5">
                         <img :src="tpaConfirmationImage" />
                         <span
                             class="ms-2"
@@ -56,6 +56,7 @@
                             class="mb-4 small" />
                         <deductibleBox
                             ref="deductibleBox"
+                            class="px-3"
                             :value="deductibleBoxValue" />
                     </div>
                     <siteFooter
@@ -82,7 +83,7 @@ import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vu
 // Supporting files
 import {
     fetchCmsContentForPage,
-    processIfStatements,
+    processIfStatements
 } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
@@ -91,7 +92,7 @@ import { useMainStore } from '@/store';
 import {
     toTitleCase,
     toDisplayPhoneNumber,
-    formatAmountInDollars,
+    formatAmountInDollars
 } from '@/helpers/text-helper.js';
 import bailoutMessage from '@/constants/bailoutMessage';
 
@@ -106,7 +107,7 @@ export default {
         textBlock,
         deductibleBox,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
+        Form
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -117,12 +118,12 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
+                promise: cmsContentPromise
             },
             {
                 resultKey: 'accountInfo',
-                promise: accountInfoPromise,
-            },
+                promise: accountInfoPromise
+            }
         ];
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -195,14 +196,10 @@ export default {
             return useMainStore().order.currentDeductible;
         },
         preferredShopName() {
-            return toTitleCase(
-                useMainStore().order.serviceLocation.provider.companyName
-            );
+            return toTitleCase(useMainStore().order.serviceLocation.provider.companyName);
         },
         preferredShopPhoneNumber() {
-            return this.toDisplayPhoneNumber(
-                useMainStore().order.serviceLocation.provider.phoneNumber
-            );
+            return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
         },
         isVerified() {
             return useMainStore().order.payment.insuranceCoverage.isVerified;
@@ -214,16 +211,12 @@ export default {
             return this.mainStore.issConfig.successReturnURL;
         },
         carrierPhoneNumber() {
-            return this.toDisplayPhoneNumber(
-                useMainStore().order.carrierPhoneNumber
-            );
-        },
+            return this.toDisplayPhoneNumber(useMainStore().order.carrierPhoneNumber);
+        }
     },
     mounted() {
         if (this.carrierUrl) {
-            this.$refs.siteFooter.updateButtonText(
-                `Go back to ${this.carrierName}`
-            );
+            this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
         }
     },
     methods: {
@@ -249,8 +242,8 @@ export default {
         },
         toDisplayPhoneNumber,
         formatAmountInDollars,
-        processIfStatements,
-    },
+        processIfStatements
+    }
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 373dfe07..1ffceb70 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -56,7 +56,9 @@
                             <div
                                 v-for="(section, index) in sections"
                                 :key="section.title">
-                                <hr v-if="index !== 0" class="my-3" />
+                                <hr
+v-if="index !== 0"
+class="my-3" />
                                 <reviewBlock
                                     :id="'review-block-' + index"
                                     :customHeaderText="section.title"
@@ -83,6 +85,7 @@
                             class="mb-4 px-4 small text-color--darker-gray" />
                         <deductibleBox
                             ref="deductibleBox"
+                            class="px-3"
                             :value="deductibleBoxValue" />
                     </div>
                     <siteFooter
@@ -115,7 +118,7 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import {
     fetchCmsContentForPage,
     processIfStatements,
-    getStringWithCustomValues,
+    getStringWithCustomValues
 } from '@/helpers/cms-content-helper.js';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -125,11 +128,11 @@ import {
     toTitleCase,
     toDisplayPhoneNumber,
     formatAddress,
-    formatAmountInDollars,
+    formatAmountInDollars
 } from '@/helpers/text-helper.js';
 import {
     getDamageDisplayContent,
-    getLocationAnswer,
+    getLocationAnswer
 } from '@/helpers/damage-review-content-generator.js';
 import damageLocationsSelected from '@/constants/damage-locations-selected.js';
 
@@ -147,7 +150,7 @@ export default {
         siteFooter,
         contactDetailsDrawer,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
+        Form
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -170,16 +173,16 @@ export default {
                     vehicle: 'VehicleSubTitle',
                     damage: 'DamageSubTitle',
                     shop: 'PreferredShopSubTitle',
-                    contactInfo: 'ContactDetailsSubTitle',
+                    contactInfo: 'ContactDetailsSubTitle'
                 },
                 damageLocations: 'DamageLocationsWidget',
                 orderDetails: 'OrderDetailsContent',
-                footer: 'SiteFooterWidget',
+                footer: 'SiteFooterWidget'
             },
             companyName,
             customValueMap: {
-                glassShop: companyName,
-            },
+                glassShop: companyName
+            }
         };
     },
     computed: {
@@ -250,27 +253,21 @@ export default {
             return [line];
         },
         locationAnswers() {
-            return this.getInputQuestionWidgetAnswersNullSafe(
-                this.widget.damageLocations
-            );
+            return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
         },
         driverSideDamageAnswers() {
             const answerContent = getLocationAnswer(
                 damageLocationsSelected.DRIVER,
                 this.locationAnswers
             );
-            return this.getInputQuestionWidgetAnswersNullSafe(
-                answerContent?.SubWidgetName
-            );
+            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
         },
         passengerSideDamageAnswers() {
             const answerContent = getLocationAnswer(
                 damageLocationsSelected.PASSENGER,
                 this.locationAnswers
             );
-            return this.getInputQuestionWidgetAnswersNullSafe(
-                answerContent?.SubWidgetName
-            );
+            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
         },
         getDamageLines() {
             const { glassToReplace, isRepair } = useMainStore().order.damage;
@@ -297,7 +294,7 @@ export default {
             return [
                 toTitleCase(this.companyName ?? ''),
                 displayAddress,
-                displayPhoneNumber,
+                displayPhoneNumber
             ];
         },
         getContactInfoLines() {
@@ -306,9 +303,9 @@ export default {
             return [
                 `${firstName} ${lastName}`,
                 emailAddress ?? '',
-                toDisplayPhoneNumber(servicePhone),
+                toDisplayPhoneNumber(servicePhone)
             ];
-        },
+        }
     },
     methods: {
         setSections() {
@@ -332,16 +329,14 @@ export default {
                     this.widget.subheader.shop,
                     this.getPreferredShopLines,
                     () =>
-                        this.navigate(
-                            this.navigationScenarios.EDIT_PREFERRED_SHOP
-                        )
+                        this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
                 ),
                 // eslint-disable-next-line max-len
                 this.getSection(
                     this.widget.subheader.contactInfo,
                     this.getContactInfoLines,
                     this.openContactDetailsModal
-                ),
+                )
             ];
         },
         getSection(widgetName, lines, onClick) {
@@ -351,7 +346,7 @@ export default {
                     widgetFields.TEXT_BLOCK_WIDGET.TEXT
                 ),
                 lines,
-                onClickEdit: onClick,
+                onClickEdit: onClick
             };
         },
         forwardButtonAction() {
@@ -374,8 +369,8 @@ export default {
         },
         openContactDetailsModal() {
             this.$refs.contactDetailsDrawer.openModal();
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>