From a6625e0b976c5da93235c597a6b10d173e5fa745 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 30 Apr 2024 13:52:45 -0400
Subject: [PATCH 1/4] format only

---
 src/layouts/payment-page/payment-page.vue | 435 ++++++++++++++--------
 1 file changed, 289 insertions(+), 146 deletions(-)

diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 77267f73..683bbb64 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -37,7 +37,9 @@
                         </iframe>
                     </div>
 
-                    <div v-if="isCreditCard || isAfterPay" class="px-2">
+                    <div
+                        v-if="isCreditCard || isAfterPay"
+                        class="px-2">
                         <hr :class="{'my-0': isCreditCard}">
                         <cartDropdown
                             :readOnly="true"
@@ -70,10 +72,22 @@
         :target="isPaypal ? '_top' : 'card-frame'"
         method="POST"
         :action="checkoutUrl">
-        <input type="hidden" name="paymentType" :value="paymentType" />
-        <input type="hidden" name="sgSessionId" :value="authToken" />
-        <input type="hidden" name="sgAuthToken" :value="authToken" />
-        <input type="hidden" name="sgSignaturePublic" :value="authSignature" />
+        <input
+            type="hidden"
+            name="paymentType"
+            :value="paymentType" />
+        <input
+            type="hidden"
+            name="sgSessionId"
+            :value="authToken" />
+        <input
+            type="hidden"
+            name="sgAuthToken"
+            :value="authToken" />
+        <input
+            type="hidden"
+            name="sgSignaturePublic"
+            :value="authSignature" />
         <input
             type="hidden"
             name="sgSignatureStartDate"
@@ -86,13 +100,34 @@
             type="hidden"
             name="sge_commerce_indicator_isinternet"
             value="true" />
-        <input type="hidden" name="sghopsource" value="Safelite.com" />
-        <input type="hidden" name="sgHtmlStyle" value="ResourceSafeliteHtml" />
-        <input type="hidden" name="sgErrorMessagesEmbedded" value="true" />
-        <input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
-        <input type="hidden" name="maskCharacter" value="*" />
-        <input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
-        <input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
+        <input
+            type="hidden"
+            name="sghopsource"
+            value="Safelite.com" />
+        <input
+            type="hidden"
+            name="sgHtmlStyle"
+            value="ResourceSafeliteHtml" />
+        <input
+            type="hidden"
+            name="sgErrorMessagesEmbedded"
+            value="true" />
+        <input
+            type="hidden"
+            name="sgNoKeystrokeProcessing"
+            value="false" />
+        <input
+            type="hidden"
+            name="maskCharacter"
+            value="*" />
+        <input
+            type="hidden"
+            name="styleSheetCode"
+            :value="dynamicCSSUrl" />
+        <input
+            type="hidden"
+            name="styleSheetCode2"
+            :value="dynamicHopCSSUrl" />
         <input
             type="hidden"
             name="sgReceiptResponseURL"
@@ -105,33 +140,102 @@
             type="hidden"
             name="sgErrorResponseURL"
             :value="payInAdvanceResponseUrl" />
-        <input type="hidden" name="sgheaderline1" :value="getHeaderLine1" />
-        <input type="hidden" name="sgHeader1subtitle" value="" />
-        <input type="hidden" name="sgheaderline2" :value="getHeaderLine2" />
-        <input type="hidden" name="sgheaderline3" value="" />
-        <input type="hidden" name="sgheaderline4" value="" />
+        <input
+            type="hidden"
+            name="sgheaderline1"
+            :value="getHeaderLine1" />
+        <input
+            type="hidden"
+            name="sgHeader1subtitle"
+            value="" />
+        <input
+            type="hidden"
+            name="sgheaderline2"
+            :value="getHeaderLine2" />
+        <input
+            type="hidden"
+            name="sgheaderline3"
+            value="" />
+        <input
+            type="hidden"
+            name="sgheaderline4"
+            value="" />
         <input
             type="hidden"
             name="sgheaderline5"
             value="*Required information" />
-        <input type="hidden" name="billTo_firstName" :value="firstName" />
-        <input type="hidden" name="billTo_firstNameShow" value="true" />
-        <input type="hidden" name="sghopmiddleInitialShow" value="false" />
-        <input type="hidden" name="billTo_lastName" :value="lastName" />
-        <input type="hidden" name="billTo_lastNameShow" value="true" />
-        <input type="hidden" name="billTo_street1" value="" />
-        <input type="hidden" name="billTo_street2" value="" />
-        <input type="hidden" name="billTo_city" value="" />
-        <input type="hidden" name="billTo_state" value="" />
-        <input type="hidden" name="billTo_postalCode" value="" />
-        <input type="hidden" name="billTo_postalCodeShow" value="true" />
-        <input type="hidden" name="billTo_postalCodeEnable" value="true" />
-        <input type="hidden" name="sgLabelPostalCode" value="Billing ZIP" />
-        <input type="hidden" name="sgtotalamount" :value="displayAmount" />
-        <input type="hidden" name="totalAmountDecimal" :value="totalAmount" />
-        <input type="hidden" name="lineItems" :value="payInAdvanceLineItems" />
-        <input type="hidden" name="sgdiscountstrikethruamount" value="" />
-        <input type="hidden" name="callerDisplayText" value="" />
+        <input
+            type="hidden"
+            name="billTo_firstName"
+            :value="firstName" />
+        <input
+            type="hidden"
+            name="billTo_firstNameShow"
+            value="true" />
+        <input
+            type="hidden"
+            name="sghopmiddleInitialShow"
+            value="false" />
+        <input
+            type="hidden"
+            name="billTo_lastName"
+            :value="lastName" />
+        <input
+            type="hidden"
+            name="billTo_lastNameShow"
+            value="true" />
+        <input
+            type="hidden"
+            name="billTo_street1"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_street2"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_city"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_state"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_postalCode"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_postalCodeShow"
+            value="true" />
+        <input
+            type="hidden"
+            name="billTo_postalCodeEnable"
+            value="true" />
+        <input
+            type="hidden"
+            name="sgLabelPostalCode"
+            value="Billing ZIP" />
+        <input
+            type="hidden"
+            name="sgtotalamount"
+            :value="displayAmount" />
+        <input
+            type="hidden"
+            name="totalAmountDecimal"
+            :value="totalAmount" />
+        <input
+            type="hidden"
+            name="lineItems"
+            :value="payInAdvanceLineItems" />
+        <input
+            type="hidden"
+            name="sgdiscountstrikethruamount"
+            value="" />
+        <input
+            type="hidden"
+            name="callerDisplayText"
+            value="" />
         <input
             type="hidden"
             name="sgtermsofusedisplaytext"
@@ -164,14 +268,38 @@
             type="hidden"
             name="sgErrorMessageTimeOut"
             value="For your security, this transaction has been timed out." />
-        <input type="hidden" name="sgLabelCardNumber" value="" />
-        <input type="hidden" name="sgLabelAddressLine1" :value="address1" />
-        <input type="hidden" name="sgLabelAddressLine2" :value="address2" />
-        <input type="hidden" name="sgLabelCity" :value="city" />
-        <input type="hidden" name="sgLabelState" :value="state" />
-        <input type="hidden" name="sgCtu" :value="ctu" />
-        <input type="hidden" name="sgWorkOrder" :value="workOrderNumber" />
-        <input type="hidden" name="sgEmailAddress" :value="emailAddress" />
+        <input
+            type="hidden"
+            name="sgLabelCardNumber"
+            value="" />
+        <input
+            type="hidden"
+            name="sgLabelAddressLine1"
+            :value="address1" />
+        <input
+            type="hidden"
+            name="sgLabelAddressLine2"
+            :value="address2" />
+        <input
+            type="hidden"
+            name="sgLabelCity"
+            :value="city" />
+        <input
+            type="hidden"
+            name="sgLabelState"
+            :value="state" />
+        <input
+            type="hidden"
+            name="sgCtu"
+            :value="ctu" />
+        <input
+            type="hidden"
+            name="sgWorkOrder"
+            :value="workOrderNumber" />
+        <input
+            type="hidden"
+            name="sgEmailAddress"
+            :value="emailAddress" />
         <input
             type="hidden"
             name="paypalInvoiceNumber"
@@ -192,12 +320,30 @@
             type="hidden"
             name="sgCCTimeoutURL"
             :value="payInAdvanceCancelUrl" />
-        <input type="hidden" name="sgTransactionType" value="authorization" />
-        <input type="hidden" name="amount" :value="totalAmount" />
-        <input type="hidden" name="ctu" :value="ctu" />
-        <input type="hidden" name="orderNumber" :value="workOrderNumber" />
-        <input type="hidden" name="billTo_email" :value="emailAddress" />
-        <input type="hidden" name="useDecisionManager" value="True" />
+        <input
+            type="hidden"
+            name="sgTransactionType"
+            value="authorization" />
+        <input
+            type="hidden"
+            name="amount"
+            :value="totalAmount" />
+        <input
+            type="hidden"
+            name="ctu"
+            :value="ctu" />
+        <input
+            type="hidden"
+            name="orderNumber"
+            :value="workOrderNumber" />
+        <input
+            type="hidden"
+            name="billTo_email"
+            :value="emailAddress" />
+        <input
+            type="hidden"
+            name="useDecisionManager"
+            value="True" />
         <input
             type="hidden"
             name="correlationId"
@@ -206,17 +352,38 @@
             type="hidden"
             name="sgErrorMessageCard_CVN"
             value="Please enter a valid CVV" />
-        <input type="hidden" name="ship_to_address_line1" :value="address1" />
-        <input type="hidden" name="ship_to_address_line2" :value="address2" />
-        <input type="hidden" name="ship_to_address_city" :value="city" />
-        <input type="hidden" name="ship_to_address_state" :value="state" />
-        <input type="hidden" name="ship_to_address_country" value="US" />
+        <input
+            type="hidden"
+            name="ship_to_address_line1"
+            :value="address1" />
+        <input
+            type="hidden"
+            name="ship_to_address_line2"
+            :value="address2" />
+        <input
+            type="hidden"
+            name="ship_to_address_city"
+            :value="city" />
+        <input
+            type="hidden"
+            name="ship_to_address_state"
+            :value="state" />
+        <input
+            type="hidden"
+            name="ship_to_address_country"
+            value="US" />
         <input
             type="hidden"
             name="ship_to_address_postal_code"
             :value="zipCode" />
-        <input type="hidden" name="ship_to_phone" :value="phoneNumber" />
-        <input type="hidden" name="calling_application" value="ISSNextGen" />
+        <input
+            type="hidden"
+            name="ship_to_phone"
+            :value="phoneNumber" />
+        <input
+            type="hidden"
+            name="calling_application"
+            value="ISSNextGen" />
     </form>
 </template>
 <script>
@@ -237,7 +404,7 @@ import externalUrls from '@/router/router-constants/externalUrl-values.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import {
     hopPaymentMethods,
-    paymentMethods,
+    paymentMethods
 } from '@/constants/payment-method-constants.js';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
 import queryStrings from '@/constants/query-strings';
@@ -252,7 +419,7 @@ export default {
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        alert,
+        alert
     },
     directives: {
         resize: {
@@ -263,8 +430,8 @@ export default {
             },
             unmounted(el) {
                 el.iFrameResizer.removeListeners();
-            },
-        },
+            }
+        }
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -278,12 +445,12 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
+                promise: cmsContentPromise
             },
             {
                 resultKey: 'paymentSignature',
-                promise: paymentSignaturePromise,
-            },
+                promise: paymentSignaturePromise
+            }
         ];
 
         // use resultMap to populate layout content.
@@ -333,7 +500,7 @@ export default {
             totalAmount: this.getAmountDue(),
             displayAmount: this.getDisplayAmountDue(),
             payInAdvanceLineItems: '',
-            shouldBlockInteraction: false,
+            shouldBlockInteraction: false
         };
     },
     computed: {
@@ -385,7 +552,7 @@ export default {
         },
         displayPayInAdvanceAfterPayAlert() {
             return this.displayPayInAdvanceAlert(paymentMethods.AFTERPAY);
-        },
+        }
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -396,25 +563,22 @@ export default {
             // Service Location
             const { serviceLocation } = useMainStore().order;
             const mobileReqs = !!(
-                serviceLocation.address &&
-                serviceLocation.city &&
-                serviceLocation.state &&
-                serviceLocation.zipCode
+                serviceLocation.address
+                && serviceLocation.city
+                && serviceLocation.state
+                && serviceLocation.zipCode
             );
 
             const providerLocation = serviceLocation.provider.address;
             const dropOffInshopReqs = !!(
-                providerLocation.streetAddress &&
-                providerLocation.city &&
-                providerLocation.state &&
-                providerLocation.zipCode
+                providerLocation.streetAddress
+                && providerLocation.city
+                && providerLocation.state
+                && providerLocation.zipCode
             );
 
-            const isMobile =
-                serviceLocation.appointmentType ===
-                    AppointmentTypeStrings.MOBILE ||
-                serviceLocation.appointmentType ===
-                    AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
+            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
+                || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
 
             const serviceLocationReqs =
                 (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
@@ -426,34 +590,34 @@ export default {
             // Schedule
             const { schedule } = useMainStore().order;
             const scheduleReqs = !!(
-                schedule.date &&
-                schedule.startTime &&
-                schedule.endTime &&
-                schedule.jobMaxMinutes &&
-                schedule.jobMinMinutes
+                schedule.date
+                && schedule.startTime
+                && schedule.endTime
+                && schedule.jobMaxMinutes
+                && schedule.jobMinMinutes
             );
 
             // Contact Info
             const { contactInfo } = useMainStore().order;
             const contactInfoReqs = !!(
-                contactInfo.firstName &&
-                contactInfo.lastName &&
-                contactInfo.servicePhone &&
-                contactInfo.emailAddress
+                contactInfo.firstName
+                && contactInfo.lastName
+                && contactInfo.servicePhone
+                && contactInfo.emailAddress
             );
 
             const paymentMethodReqs =
-                useMainStore().order.payment.isPayInAdvance !== null &&
-                (useMainStore().order.payment.isPayInAdvance ||
-                    !!useMainStore().order.payment.payInAdvanceType);
+                useMainStore().order.payment.isPayInAdvance !== null
+                && (useMainStore().order.payment.isPayInAdvance
+                    || !!useMainStore().order.payment.payInAdvanceType);
 
             return (
-                packageReqs &&
-                serviceLocationReqs &&
-                isInsuranceSet &&
-                scheduleReqs &&
-                contactInfoReqs &&
-                paymentMethodReqs
+                packageReqs
+                && serviceLocationReqs
+                && isInsuranceSet
+                && scheduleReqs
+                && contactInfoReqs
+                && paymentMethodReqs
             );
         },
         getWorkOrderNumber() {
@@ -475,8 +639,8 @@ export default {
         },
         getAddress1() {
             return (
-                useMainStore().order.serviceLocation.address ??
-                useMainStore().order.serviceLocation.provider.address
+                useMainStore().order.serviceLocation.address
+                ?? useMainStore().order.serviceLocation.provider.address
                     .streetAddress
             );
         },
@@ -485,20 +649,20 @@ export default {
         },
         getCity() {
             return (
-                useMainStore().order.serviceLocation.city ??
-                useMainStore().order.serviceLocation.provider.address.city
+                useMainStore().order.serviceLocation.city
+                ?? useMainStore().order.serviceLocation.provider.address.city
             );
         },
         getState() {
             return (
-                useMainStore().order.serviceLocation.state ??
-                useMainStore().order.serviceLocation.provider.address.state
+                useMainStore().order.serviceLocation.state
+                ?? useMainStore().order.serviceLocation.provider.address.state
             );
         },
         getZipCode() {
             return (
-                useMainStore().order.serviceLocation.zipCode ??
-                useMainStore().order.serviceLocation.provider.address.zipCode
+                useMainStore().order.serviceLocation.zipCode
+                ?? useMainStore().order.serviceLocation.provider.address.zipCode
             );
         },
         getPaymentType() {
@@ -518,30 +682,20 @@ export default {
             const lineItems =
                 glassParts === null
                     ? [
-                          this.getPayInAdvanceFormattedLineItem('Labor', 0, 1),
-                          this.getPayInAdvanceFormattedLineItem(
-                              'Repair supplies',
-                              0,
-                              1
-                          ),
-                      ]
+                        this.getPayInAdvanceFormattedLineItem('Labor', 0, 1),
+                        this.getPayInAdvanceFormattedLineItem('Repair supplies', 0, 1)
+                    ]
                     : [
-                          this.getPayInAdvanceFormattedLineItem(
-                              'Parts and labor',
-                              0,
-                              1
-                          ),
-                      ];
+                        this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1)
+                    ];
 
             cartItems.forEach((item) => {
                 if (item.name !== null && item.category !== 'promos') {
-                    lineItems.push(
-                        this.getPayInAdvanceFormattedLineItem(
-                            item.name,
-                            (item.salesTax + item.subTotal).toFixed(2),
-                            1
-                        )
-                    );
+                    lineItems.push(this.getPayInAdvanceFormattedLineItem(
+                        item.name,
+                        (item.salesTax + item.subTotal).toFixed(2),
+                        1
+                    ));
                 }
             });
 
@@ -553,18 +707,10 @@ export default {
         getMockPiaLineItems() {
             let lineItems = [];
             lineItems = [
-                this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1),
+                this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1)
             ];
-            lineItems.push(
-                this.getPayInAdvanceFormattedLineItem(
-                    'New wiper blades',
-                    75.22,
-                    1
-                )
-            );
-            lineItems.push(
-                this.getPayInAdvanceFormattedLineItem('Recycling', 37.6, 1)
-            );
+            lineItems.push(this.getPayInAdvanceFormattedLineItem('New wiper blades', 75.22, 1));
+            lineItems.push(this.getPayInAdvanceFormattedLineItem('Recycling', 37.6, 1));
 
             this.payInAdvanceLineItems = lineItems.join('||');
         },
@@ -572,9 +718,7 @@ export default {
             return baseMixin.methods.getAmountDue(useMainStore().lineItems);
         },
         getDisplayAmountDue() {
-            return baseMixin.methods.getDisplayAmountDue(
-                useMainStore().lineItems
-            );
+            return baseMixin.methods.getDisplayAmountDue(useMainStore().lineItems);
         },
         fetchSignatureInfo(signatureInfo) {
             this.authToken = signatureInfo.token;
@@ -592,8 +736,8 @@ export default {
                     iframe.onload = () => {
                         if (iframe.contentWindow) {
                             if (
-                                this.paymentType ===
-                                hopPaymentMethods.CREDIT_CARD
+                                this.paymentType
+                                === hopPaymentMethods.CREDIT_CARD
                             ) {
                                 iframe.contentWindow.postMessage(
                                     'CreditCardChosen',
@@ -624,8 +768,7 @@ export default {
         },
         setIFrameListener() {
             window.addEventListener('message', (event) =>
-                this.handleIFrameContentWindowMessage(event)
-            );
+                this.handleIFrameContentWindowMessage(event));
         },
         setUIBlock(val) {
             this.shouldBlockInteraction = val;
@@ -637,8 +780,8 @@ export default {
         },
         displayPayInAdvanceAlert(payMethod) {
             return (
-                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] ===
-                payMethod
+                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
+                === payMethod
             );
         },
         paymentFailedPayLater() {
@@ -656,8 +799,8 @@ export default {
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.$route
             );
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>

From dee908f60c2401e866541f0625dcbe3e0340183b Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 30 Apr 2024 13:57:44 -0400
Subject: [PATCH 2/4] Adjust spacing to more closely match FMG NextGen.

---
 .../cart-dropdown/cart-dropdown.vue              | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 1831ba68..5aba7f8d 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -31,7 +31,7 @@
                     <div
                         v-if="showDeductibleCartItem"
                         id="cart-deductible"
-                        class="d-flex justify-content-between align-items-center">
+                        class="d-flex justify-content-between align-items-center py-2">
                         <span id="deductible-label">{{ deductibleLabel }}</span>
                         <span id="deductible-value">{{ getDisplayed(deductible) }}</span>
                     </div>
@@ -50,7 +50,7 @@
                     class="px-5">
                     <div
                         id="service-package-name"
-                        class="py-1 d-flex justify-content-between align-items-center">
+                        class="py-2 d-flex justify-content-between align-items-center">
                         <textBlock
                             :cmsWidgetName="servicePackageLabelWidget"
                             class="force-no-top-margin" />
@@ -62,7 +62,7 @@
                         <div
                             v-for="(item, i) in servicePackageCartItems"
                             :key="i">
-                            <div class="py-1 d-flex justify-content-between align-items-center">
+                            <div class="py-2 d-flex justify-content-between align-items-center">
                                 <span>{{ item?.name ?? '' }}</span>
                                 <textLink
                                     v-if="!readOnly"
@@ -84,7 +84,7 @@
                     <div
                         v-for="(item, i) in nonServicePackageCartItems"
                         :key="i"
-                        class="px-5 py-1 non-packaged-cart-item">
+                        class="px-5 py-2 non-packaged-cart-item">
                         <div class="d-flex justify-content-between align-items-center">
                             <span
                                 v-if="item.cartItemType === cartItemType.RECYCLE_FEE"
@@ -119,20 +119,20 @@
                         class="subtotal-and-tax">
                         <div
                             id="cart-subtotal"
-                            class="col d-flex justify-content-between">
+                            class="py-2 col d-flex justify-content-between">
                             <span id="subtotal-label">{{ subtotalLabel }}</span>
                             <span id="subtotal-value">{{ getDisplayed(subTotal) }}</span>
                         </div>
                         <div
                             id="cart-sales-tax"
-                            class="pt-1 col d-flex justify-content-between">
+                            class="py-2 col d-flex justify-content-between">
                             <span id="sales-tax-label">{{ salesTaxLabel }}</span>
                             <span id="sales-tax-value">{{ formatAmountInDollars(salesTax) }}</span>
                         </div>
                         <div
                             v-if="showAsPaid"
                             id="cart-amount-paid"
-                            class="pt-1 col d-flex justify-content-between">
+                            class="py-2 col d-flex justify-content-between">
                             <span id="amount-paid-label">{{ amountPaidLabel }}</span>
                             <span if="amount-paid-value">{{ getDisplayed(amountPaid) }}</span>
                         </div>
@@ -556,7 +556,7 @@ export default {
     .bottom-amount-due {
         color: $white;
         background-color: $green;
-        padding: 0.25rem 1.5rem;
+        padding: 0.5rem 1.5rem;
     }
 }
 

From cc25e3e98186ad70d46c8dc6972465730d36fd32 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 30 Apr 2024 14:03:34 -0400
Subject: [PATCH 3/4] Fix for ui block and global town image conflicting class

---
 src/layouts/payment-page/payment-page.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 683bbb64..726bc1f9 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -804,6 +804,12 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.container-fluid {
+    &.fade-on-route-transition {
+        height: unset;
+    }
+}
+
 .payment p {
     margin-bottom: 0.75rem;
 }

From 00539a6ac6ef3e58a5a70a1e841a277652bb8d7f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 30 Apr 2024 15:43:04 -0400
Subject: [PATCH 4/4] Code format.

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 262 +++++++-----------
 1 file changed, 103 insertions(+), 159 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 75094683..f4eb66fd 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -143,7 +143,7 @@ export default {
         replaceOptionsQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        alert,
+        alert
     },
     mixins: [BaseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -151,20 +151,18 @@ export default {
 
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const damageOptionsPromise = store.getDamageOptions(
-            store.order.vehicle.carId
-        );
+        const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
 
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
+                promise: cmsContentPromise
             },
             {
                 resultKey: 'damageOptions',
-                promise: damageOptionsPromise,
-            },
+                promise: damageOptionsPromise
+            }
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -172,23 +170,17 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.damageLocation.initializeComponent(
-                resultMap.damageOptions
-            );
+            vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
             vm.$refs.sideDoorOptions.initializeComponent(
                 resultMap.damageOptions.driverSideOptions
                     .availableReplacementOptions,
                 resultMap.damageOptions.passengerSideOptions
                     .availableReplacementOptions
             );
-            vm.$refs.windshieldOptions.initializeComponent(
-                resultMap.damageOptions.windshieldOptions
-                    .availableReplacementOptions
-            );
-            vm.$refs.backGlassOptions.initializeComponent(
-                resultMap.damageOptions.backGlassOptions
-                    .availableReplacementOptions
-            );
+            vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions
+                .availableReplacementOptions);
+            vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions
+                .availableReplacementOptions);
         });
     },
     setup() {
@@ -204,7 +196,7 @@ export default {
                 selectedDriverSideReplaceOptions:
                     this.getDriverSideReplaceOptionsFromStore(),
                 selectedPassengerSideReplaceOptions:
-                    this.getPassengerSideReplaceOptionsFromStore(),
+                    this.getPassengerSideReplaceOptionsFromStore()
             },
             selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
             selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
@@ -213,83 +205,66 @@ export default {
     },
     computed: {
         isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some(
-                (selectedDamages) =>
-                    selectedDamages.toUpperCase() ===
-                    damageLocationsCms.WINDSHIELD
-            );
+            return this.selectedDamageLocations.some((selectedDamages) =>
+                selectedDamages.toUpperCase()
+                    === damageLocationsCms.WINDSHIELD);
         },
         isSideDoorDamageLocation() {
-            return this.selectedDamageLocations.some(
-                (selectedDamages) =>
-                    selectedDamages.toUpperCase() ===
-                    damageLocationsCms.SIDEDOOR
-            );
+            return this.selectedDamageLocations.some((selectedDamages) =>
+                selectedDamages.toUpperCase()
+                    === damageLocationsCms.SIDEDOOR);
         },
         isRearWindowDamageLocation() {
-            return this.selectedDamageLocations.some(
-                (selectedDamages) =>
-                    selectedDamages.toUpperCase() ===
-                    damageLocationsCms.REARWINDOW
-            );
+            return this.selectedDamageLocations.some((selectedDamages) =>
+                selectedDamages.toUpperCase()
+                    === damageLocationsCms.REARWINDOW);
         },
         isWindshieldRepair() {
             return (
-                this.isWindshieldDamageLocation &&
-                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-                    damageLocationsSelected.REPAIR
+                this.isWindshieldDamageLocation
+                && this.selectedWindshieldOptions.selectedWindshieldDamageType
+                    === damageLocationsSelected.REPAIR
             );
         },
         isDriverSideReplace() {
             if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some(
-                (selectedDriverSide) =>
-                    selectedDriverSide.toUpperCase() ===
-                    damageLocationsCms.DRIVERSIDE
-            );
+            return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) =>
+                selectedDriverSide.toUpperCase()
+                    === damageLocationsCms.DRIVERSIDE);
         },
         isPassengerSideReplace() {
             if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some(
-                (selectedPassengerSide) =>
-                    selectedPassengerSide.toUpperCase() ===
-                    damageLocationsCms.PASSENGERSIDE
-            );
+            return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) =>
+                selectedPassengerSide.toUpperCase()
+                    === damageLocationsCms.PASSENGERSIDE);
         },
         hasRepairReplaceConflict() {
             return (
-                this.isWindshieldDamageLocation &&
-                this.selectedDamageLocations.length > 1 &&
-                this.isWindshieldRepair
+                this.isWindshieldDamageLocation
+                && this.selectedDamageLocations.length > 1
+                && this.isWindshieldRepair
             );
         },
         hasSplitSingleConflict() {
             if (
-                !this.selectedDamageLocations?.includes('Windshield') ||
-                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-                    damageLocationsSelected.REPAIR ||
-                !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
-            )
-                return false;
+                !this.selectedDamageLocations?.includes('Windshield')
+                || this.selectedWindshieldOptions.selectedWindshieldDamageType
+                    === damageLocationsSelected.REPAIR
+                || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
+            ) return false;
 
             return (
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedSingleWindshield) =>
-                        selectedSingleWindshield.toUpperCase() ===
-                        damageLocationsSelected.SINGLE.toUpperCase()
-                ) &&
-                (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedDriverWindshield) =>
-                        selectedDriverWindshield.toUpperCase() ===
-                        damageLocationsSelected.DRIVER.toUpperCase()
-                ) ||
-                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                        (selectedPassengerWindshield) =>
-                            selectedPassengerWindshield.toUpperCase() ===
-                            damageLocationsSelected.PASSENGER.toUpperCase()
-                    ))
+                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) =>
+                    selectedSingleWindshield.toUpperCase()
+                        === damageLocationsSelected.SINGLE.toUpperCase())
+                && (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) =>
+                    selectedDriverWindshield.toUpperCase()
+                        === damageLocationsSelected.DRIVER.toUpperCase())
+                    || this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) =>
+                        selectedPassengerWindshield.toUpperCase()
+                            === damageLocationsSelected.PASSENGER.toUpperCase()))
             );
         },
         shouldDisplayVehicleChangeAlert() {
@@ -309,32 +284,26 @@ export default {
             const glassSelections = [];
 
             if (
-                this.mainStore.order.damage.glassToReplace?.some(
-                    (glass) =>
-                        glass.glassLocation ===
-                        damageLocationsSelected.WINDSHIELD
-                ) ||
-                this.mainStore.order.damage.isRepair
+                this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                    glass.glassLocation
+                        === damageLocationsSelected.WINDSHIELD)
+                || this.mainStore.order.damage.isRepair
             ) {
                 glassSelections.push(damageLocationsSelected.WINDSHIELD);
             }
             if (
-                this.mainStore.order.damage.glassToReplace?.some(
-                    (glass) =>
-                        glass.glassLocation ===
-                            damageLocationsSelected.DRIVER ||
-                        glass.glassLocation ===
-                            damageLocationsSelected.PASSENGER
-                )
+                this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                    glass.glassLocation
+                            === damageLocationsSelected.DRIVER
+                        || glass.glassLocation
+                            === damageLocationsSelected.PASSENGER)
             ) {
                 glassSelections.push(damageLocationsSelected.SIDEDOOR);
             }
 
             if (
-                this.mainStore.order.damage.glassToReplace?.some(
-                    (glass) =>
-                        glass.glassLocation === damageLocationsSelected.REAR
-                )
+                this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                    glass.glassLocation === damageLocationsSelected.REAR)
             ) {
                 glassSelections.push(damageLocationsSelected.REARWINDOW);
             }
@@ -345,11 +314,10 @@ export default {
             const windShieldOptions = {
                 selectedWindshieldDamageType: '',
                 selectedWindshieldChipCount: null,
-                selectedWindshieldReplaceOptions: [],
+                selectedWindshieldReplaceOptions: []
             };
 
-            if (this.mainStore.order.damage.isRepair === undefined)
-                return windshieldOptions;
+            if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
 
             if (this.mainStore.order.damage.isRepair) {
                 windShieldOptions.selectedWindshieldDamageType =
@@ -358,49 +326,37 @@ export default {
                     this.mainStore.order.damage.numberOfChips;
             } else {
                 if (
-                    this.mainStore.order.damage.glassToReplace?.some(
-                        (glass) =>
-                            glass.glassLocation ===
-                                damageLocationsSelected.WINDSHIELD &&
-                            glass.glassName === damageLocationsSelected.SINGLE
-                    )
+                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                        glass.glassLocation
+                                === damageLocationsSelected.WINDSHIELD
+                            && glass.glassName === damageLocationsSelected.SINGLE)
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
                         damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(
-                        damageLocationsSelected.SINGLE
-                    );
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
                 }
 
                 if (
-                    this.mainStore.order.damage.glassToReplace?.some(
-                        (glass) =>
-                            glass.glassLocation ===
-                                damageLocationsSelected.WINDSHIELD &&
-                            glass.glassName === damageLocationsSelected.DRIVER
-                    )
+                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                        glass.glassLocation
+                                === damageLocationsSelected.WINDSHIELD
+                            && glass.glassName === damageLocationsSelected.DRIVER)
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
                         damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(
-                        damageLocationsSelected.DRIVER
-                    );
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
                 }
 
                 if (
-                    this.mainStore.order.damage.glassToReplace?.some(
-                        (glass) =>
-                            glass.glassLocation ===
-                                damageLocationsSelected.WINDSHIELD &&
-                            glass.glassName ===
-                                damageLocationsSelected.PASSENGER
-                    )
+                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                        glass.glassLocation
+                                === damageLocationsSelected.WINDSHIELD
+                            && glass.glassName
+                                === damageLocationsSelected.PASSENGER)
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
                         damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(
-                        damageLocationsSelected.PASSENGER
-                    );
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
                 }
             }
 
@@ -409,20 +365,16 @@ export default {
         getDoorSidesFromStore() {
             const doorSides = [];
             if (
-                this.mainStore.order.damage.glassToReplace?.some(
-                    (glass) =>
-                        glass.glassLocation === damageLocationsSelected.DRIVER
-                )
+                this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                    glass.glassLocation === damageLocationsSelected.DRIVER)
             ) {
                 doorSides.push(damageLocationsSelected.DRIVERSIDE);
             }
 
             if (
-                this.mainStore.order.damage.glassToReplace?.some(
-                    (glass) =>
-                        glass.glassLocation ===
-                        damageLocationsSelected.PASSENGER
-                )
+                this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                    glass.glassLocation
+                        === damageLocationsSelected.PASSENGER)
             ) {
                 doorSides.push(damageLocationsSelected.PASSENGERSIDE);
             }
@@ -453,10 +405,8 @@ export default {
         },
         getRearReplaceOptionsFromStore() {
             const rearReplaceOptions =
-                this.mainStore.order.damage.glassToReplace?.filter(
-                    (glass) =>
-                        glass.glassLocation === damageLocationsSelected.REAR
-                )[0]?.glassName;
+                this.mainStore.order.damage.glassToReplace?.filter((glass) =>
+                    glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
 
             return rearReplaceOptions;
         },
@@ -512,48 +462,42 @@ export default {
         selectedGlassToReplace() {
             const selectedGlassToReplace = [];
             if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
-                    (wsItem) => {
-                        selectedGlassToReplace.push({
-                            glassLocation: damageLocationsSelected.WINDSHIELD,
-                            glassName: wsItem,
-                        });
-                    }
-                );
+                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => {
+                    selectedGlassToReplace.push({
+                        glassLocation: damageLocationsSelected.WINDSHIELD,
+                        glassName: wsItem
+                    });
+                });
             }
 
             if (this.isDriverSideReplace) {
-                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(
-                    (driverItem) => {
-                        selectedGlassToReplace.push({
-                            glassLocation: damageLocationsSelected.DRIVER,
-                            glassName: driverItem,
-                        });
-                    }
-                );
+                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
+                    selectedGlassToReplace.push({
+                        glassLocation: damageLocationsSelected.DRIVER,
+                        glassName: driverItem
+                    });
+                });
             }
 
             if (this.isPassengerSideReplace) {
-                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
-                    (passengerItem) => {
-                        selectedGlassToReplace.push({
-                            glassLocation: damageLocationsSelected.PASSENGER,
-                            glassName: passengerItem,
-                        });
-                    }
-                );
+                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => {
+                    selectedGlassToReplace.push({
+                        glassLocation: damageLocationsSelected.PASSENGER,
+                        glassName: passengerItem
+                    });
+                });
             }
 
             if (this.isRearWindowDamageLocation) {
                 selectedGlassToReplace.push({
                     glassLocation: damageLocationsSelected.REAR,
-                    glassName: this.selectedRearReplaceOptions,
+                    glassName: this.selectedRearReplaceOptions
                 });
             }
 
             return selectedGlassToReplace;
-        },
-    },
+        }
+    }
 };
 </script>