From 15dbe4c59245c18f9ccb2698c857d7ebaaf04415 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 11 Oct 2023 09:42:36 -0400
Subject: [PATCH 1/5] CSR-1591 radio button width adjustments, misc css tweaks.

---
 .../button-question/button-question.vue       |  19 +--
 .../questions-page-layout.vue                 |   2 +-
 .../customer-details/customer-details.vue     |   2 +-
 src/layouts/estimate/estimate.vue             |   2 +-
 src/layouts/payment-method/payment-method.vue |   2 +-
 src/layouts/quote/quote.vue                   |   2 +-
 src/layouts/review/review.vue                 |   2 +-
 src/layouts/schedule/schedule.vue             |   2 +-
 .../service-location/service-location.vue     |  18 ++-
 src/layouts/vehicle-damage/vehicle-damage.vue | 139 +++++++++---------
 src/layouts/vehicle-parts/vehicle-parts.vue   |   2 +-
 src/layouts/vehicle/vehicle.vue               |   2 +-
 src/layouts/vin-lookup/vin-lookup.vue         |   2 +-
 src/styles/common-styles.scss                 |   1 +
 14 files changed, 103 insertions(+), 94 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 441ed6e0b..d2505e912 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -223,6 +223,10 @@ export default {
                 classes = "package-wrapper";
             }
 
+            if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
+                classes += " bryan-class";
+            }
+
             return classes;
         },
         buttonsInfo() {
@@ -304,18 +308,9 @@ export default {
 </script>
 
 <style lang="scss">
-.vehicle-damage {
-    .button-question {
-        @include media-breakpoint-up(md) {
-            .col-12 {
-                width: 66.66666667%;
-            }
-            .col {
-                width: 33.3333333%;
-                flex: 0 0 auto;
-            }
-        }
-    }
+.bryan-class {
+    width: 33.33333333%;
+    flex: 0 0 auto;
 }
 .button-question-overflow {
     height: calc(100vh - 274px);
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index 6f037ea44..638094e05 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -26,7 +26,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
                             ref="questionChain"
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 6e539b133..9568b2a13 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -7,7 +7,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
                     <textboxQuestion
                         class="mb-4"
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 3a30d5d9a..4fc6a1bc1 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div v-if="!skipVin">
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 63d84e225..28fe0fd31 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 788680e46..e2836ed9e 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 79dc57598..a5f6eca7c 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 4adf9eb50..fccef82e1 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
                     <template v-if="ChangeShopLink.length">
                         <textBlock
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 4cc9ab10c..08a88d9ab 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -60,7 +60,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center appointment-type">
-                <div class="col-md-6 col-xxl-4">
+                <div class="col-md-6">
                     <appointmentTypeQuestion
                         v-model="selectedAppointmentType"
                         v-show="isAppointmentTypeDisplayed"
@@ -74,7 +74,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <mobileLocationModalQuestions
                         customComponentId="mobileLocationQuestions"
                         v-if="selectedAppointmentType === 'Mobile'"
@@ -532,6 +532,20 @@ export default {
 </script>
 
 <style lang="scss">
+.appointment-type-question {
+    .button-question {
+        .col {
+            padding: 0 .5rem;
+            @include media-breakpoint-up(md) {
+                padding: 0 .75rem;
+            }
+            @include media-breakpoint-up(xl) {
+                width: 33.3333333%;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}
 .question-text {
     & > span {
         text-align: center;
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index e66ea251a..a1ac01f7c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -9,68 +9,71 @@
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <alert
-                        ref="vehicleChangeAlert"
-                        v-if="shouldDisplayVehicleChangeAlert"
-                        class="mt-5 mb-0"
-                        cmsWidgetName="VehicleChangeAlert"
-                        alertClass="alert-warning"
-                        :isDismissible="false" />
+                    ref="vehicleChangeAlert"
+                    v-if="shouldDisplayVehicleChangeAlert"
+                    class="mt-5 mb-0"
+                    cmsWidgetName="VehicleChangeAlert"
+                    alertClass="alert-warning"
+                    :isDismissible="false" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6">
                     <damageLocationQuestion
-                        ref="damageLocation"
-                        cmsWidgetName="DamageLocationQuestion"
-                        v-model="selectedDamageLocations"
-                        groupName="DamageLocationQuestion" />
-
+                    ref="damageLocation"
+                    cmsWidgetName="DamageLocationQuestion"
+                    v-model="selectedDamageLocations"
+                    groupName="DamageLocationQuestion" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <windshieldOptions
-                        class="windshield-options"
-                        ref="windshieldOptions"
-                        v-model="selectedWindshieldOptions"
-                        :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                        :hasSplitSingleConflict="hasSplitSingleConflict"
-                        :selectedDamageLocations="selectedDamageLocations" />
+                    class="windshield-options"
+                    ref="windshieldOptions"
+                    v-model="selectedWindshieldOptions"
+                    :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                    :hasSplitSingleConflict="hasSplitSingleConflict"
+                    :selectedDamageLocations="selectedDamageLocations" />
 
                     <alert
-                        v-if="hasRepairReplaceConflict"
-                        class="my-5"
-                        cmsWidgetName="HasReplacementConflict"
-                        alertClass="alert-danger"
-                        :isDismissible="false" />
+                    v-if="hasRepairReplaceConflict"
+                    class="my-5"
+                    cmsWidgetName="HasReplacementConflict"
+                    alertClass="alert-danger"
+                    :isDismissible="false" />
 
                     <sideDoorOptions
-                        ref="sideDoorOptions"
-                        cmsWidgetName="SideDoorSideQuestion"
-                        groupName="SideDoorSideQuestion"
-                        v-model="sideDoorOptionsData"
-                        v-show="!hasRepairReplaceConflict"
-                        :selectedDamageLocations="selectedDamageLocations" />
+                    ref="sideDoorOptions"
+                    cmsWidgetName="SideDoorSideQuestion"
+                    groupName="SideDoorSideQuestion"
+                    v-model="sideDoorOptionsData"
+                    v-show="!hasRepairReplaceConflict"
+                    :selectedDamageLocations="selectedDamageLocations" />
 
                     <replaceOptionsQuestion
-                        ref="backGlassOptions"
-                        cmsWidgetName="RearReplaceOptionsQuestion"
-                        :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-                        v-model="selectedRearReplaceOptions"
-                        groupName="BackGlassReplaceOptionsQuestion"
-                        validationRules="replace-options-required" />
+                    ref="backGlassOptions"
+                    cmsWidgetName="RearReplaceOptionsQuestion"
+                    :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+                    v-model="selectedRearReplaceOptions"
+                    groupName="BackGlassReplaceOptionsQuestion"
+                    validationRules="replace-options-required" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
                     <navbar
-                        cmsWidgetName="FunnelFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        :isBackButtonHidden="shouldHideBackButton"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
+                    cmsWidgetName="FunnelFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    :isBackButtonHidden="shouldHideBackButton"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
@@ -241,7 +244,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.SINGLE
                     );
@@ -256,7 +259,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.DRIVER
                     );
@@ -271,7 +274,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.PASSENGER
                     );
@@ -341,7 +344,7 @@ export default {
                     isWindshieldRepair: this.isWindshieldRepair,
                     selectedGlassToReplace: this.selectedGlassToReplace(),
                     selectedWindshieldChipCount:
-                        this.selectedWindshieldOptions.selectedWindshieldChipCount,
+                    this.selectedWindshieldOptions.selectedWindshieldChipCount,
                 },
                 false
             );
@@ -366,9 +369,9 @@ export default {
             const payment = this.$store.getters.payment;
 
             const vehicleChangedDuringPolicyLookupInHeritage =
-                payment.isInsurance &&
-                payment.insuranceCoverage.coverageStatus &&
-                payment.insuranceCoverage.coverageStatus !== "";
+            payment.isInsurance &&
+            payment.insuranceCoverage.coverageStatus &&
+            payment.insuranceCoverage.coverageStatus !== "";
             if (vehicleChangedDuringPolicyLookupInHeritage) {
                 if (store.getters.damage.isRepair) {
                     this.$router.navigateWithSaving(
@@ -378,7 +381,7 @@ export default {
                 } else {
                     this.$router.navigateWithSaving(
                         this.navigationScenarios
-                            .CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE,
+                        .CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE,
                         this.$route
                     );
                 }
@@ -438,7 +441,7 @@ export default {
             }
 
             return selectedGlassToReplace;
-        },
+        }
     },
     computed: {
         isWindshieldDamageLocation() {
@@ -460,7 +463,7 @@ export default {
             return (
                 this.isWindshieldDamageLocation &&
                 this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-                    damageLocationsSelected.REPAIR
+                damageLocationsSelected.REPAIR
             );
         },
         isDriverSideReplace() {
@@ -488,10 +491,10 @@ export default {
             if (
                 !this.selectedDamageLocations?.includes("Windshield") ||
                 this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-                    damageLocationsSelected.REPAIR ||
+                damageLocationsSelected.REPAIR ||
                 !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
             )
-                return false;
+            return false;
 
             return (
                 this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
@@ -510,14 +513,14 @@ export default {
                         );
                     }
                 ) ||
-                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                        (selectedPassengerWindshield) => {
-                            return (
-                                selectedPassengerWindshield.toUpperCase() ===
-                                damageLocationsSelected.PASSENGER.toUpperCase()
-                            );
-                        }
-                    ))
+                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                    (selectedPassengerWindshield) => {
+                        return (
+                            selectedPassengerWindshield.toUpperCase() ===
+                            damageLocationsSelected.PASSENGER.toUpperCase()
+                        );
+                    }
+                ))
             );
         },
         shouldDisplayVehicleChangeAlert() {
@@ -547,14 +550,10 @@ export default {
 </script>
 
 <style lang="scss">
-.vehicle-damage {
-    .windshield-options {
-        @include media-breakpoint-up(md) {
-            .col {
-                flex: 0 0 auto;
-                width: 33.33333333%;
-            }
-        }
+.replace-options-question {
+    .bryan-class {
+        width: 100%;
+        flex: 0 auto;
     }
 }
 </style>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 785992148..08432bab9 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -31,7 +31,7 @@
                     </div>
                 </div>
                 <div class="row justify-content-md-center">
-                    <div class="col-md-6 col-xl-4 col-xxl-3">
+                    <div class="col-md-6 col-xl-4">
                         <div v-for="(item, i) in PartsOrQuestions" :key="i">
                             <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
                             <hr v-if="i > 0" />
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index da31110eb..e064250bd 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -7,7 +7,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 06195c4c3..1f79182a6 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index f6d19dc4f..6bb1bd64c 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -5,6 +5,7 @@ body {
     background-color: #fff;
     color: #4d5151;
     .container-fluid {
+        padding: 0 1.5rem;
         .prevent-squish {
             overflow-x: unset;
         }

From 90a9932d91a1d112de593a2c1cbc57e1ce5fc67d Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 11 Oct 2023 09:45:44 -0400
Subject: [PATCH 2/5] Rename test class to more appropriate name.

---
 src/digital-components/button-question/button-question.vue | 4 ++--
 src/layouts/vehicle-damage/vehicle-damage.vue              | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index d2505e912..cec014712 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -224,7 +224,7 @@ export default {
             }
 
             if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
-                classes += " bryan-class";
+                classes += " two-list-card-width";
             }
 
             return classes;
@@ -308,7 +308,7 @@ export default {
 </script>
 
 <style lang="scss">
-.bryan-class {
+.two-list-card-width {
     width: 33.33333333%;
     flex: 0 0 auto;
 }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index a1ac01f7c..51e9fa948 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -551,7 +551,7 @@ export default {
 
 <style lang="scss">
 .replace-options-question {
-    .bryan-class {
+    .two-list-card-width {
         width: 100%;
         flex: 0 auto;
     }

From 12903401130beec59bb2a5bf4bdea6634fc4cd30 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 11 Oct 2023 09:49:26 -0400
Subject: [PATCH 3/5] format code.

---
 .../service-location/service-location.vue     |   4 +-
 src/layouts/vehicle-damage/vehicle-damage.vue | 120 +++++++++---------
 2 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 08a88d9ab..674c47409 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -535,9 +535,9 @@ export default {
 .appointment-type-question {
     .button-question {
         .col {
-            padding: 0 .5rem;
+            padding: 0 0.5rem;
             @include media-breakpoint-up(md) {
-                padding: 0 .75rem;
+                padding: 0 0.75rem;
             }
             @include media-breakpoint-up(xl) {
                 width: 33.3333333%;
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 51e9fa948..353ad63df 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -9,71 +9,71 @@
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
-                    cmsWidgetName="VehicleBannerWidget"
-                    :displayGenericVehicleImage="false" />
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <alert
-                    ref="vehicleChangeAlert"
-                    v-if="shouldDisplayVehicleChangeAlert"
-                    class="mt-5 mb-0"
-                    cmsWidgetName="VehicleChangeAlert"
-                    alertClass="alert-warning"
-                    :isDismissible="false" />
+                        ref="vehicleChangeAlert"
+                        v-if="shouldDisplayVehicleChangeAlert"
+                        class="mt-5 mb-0"
+                        cmsWidgetName="VehicleChangeAlert"
+                        alertClass="alert-warning"
+                        :isDismissible="false" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
                 <div class="col-md-6">
                     <damageLocationQuestion
-                    ref="damageLocation"
-                    cmsWidgetName="DamageLocationQuestion"
-                    v-model="selectedDamageLocations"
-                    groupName="DamageLocationQuestion" />
+                        ref="damageLocation"
+                        cmsWidgetName="DamageLocationQuestion"
+                        v-model="selectedDamageLocations"
+                        groupName="DamageLocationQuestion" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
                     <windshieldOptions
-                    class="windshield-options"
-                    ref="windshieldOptions"
-                    v-model="selectedWindshieldOptions"
-                    :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                    :hasSplitSingleConflict="hasSplitSingleConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
+                        class="windshield-options"
+                        ref="windshieldOptions"
+                        v-model="selectedWindshieldOptions"
+                        :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                        :hasSplitSingleConflict="hasSplitSingleConflict"
+                        :selectedDamageLocations="selectedDamageLocations" />
 
                     <alert
-                    v-if="hasRepairReplaceConflict"
-                    class="my-5"
-                    cmsWidgetName="HasReplacementConflict"
-                    alertClass="alert-danger"
-                    :isDismissible="false" />
+                        v-if="hasRepairReplaceConflict"
+                        class="my-5"
+                        cmsWidgetName="HasReplacementConflict"
+                        alertClass="alert-danger"
+                        :isDismissible="false" />
 
                     <sideDoorOptions
-                    ref="sideDoorOptions"
-                    cmsWidgetName="SideDoorSideQuestion"
-                    groupName="SideDoorSideQuestion"
-                    v-model="sideDoorOptionsData"
-                    v-show="!hasRepairReplaceConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
+                        ref="sideDoorOptions"
+                        cmsWidgetName="SideDoorSideQuestion"
+                        groupName="SideDoorSideQuestion"
+                        v-model="sideDoorOptionsData"
+                        v-show="!hasRepairReplaceConflict"
+                        :selectedDamageLocations="selectedDamageLocations" />
 
                     <replaceOptionsQuestion
-                    ref="backGlassOptions"
-                    cmsWidgetName="RearReplaceOptionsQuestion"
-                    :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-                    v-model="selectedRearReplaceOptions"
-                    groupName="BackGlassReplaceOptionsQuestion"
-                    validationRules="replace-options-required" />
+                        ref="backGlassOptions"
+                        cmsWidgetName="RearReplaceOptionsQuestion"
+                        :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+                        v-model="selectedRearReplaceOptions"
+                        groupName="BackGlassReplaceOptionsQuestion"
+                        validationRules="replace-options-required" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
                     <navbar
-                    cmsWidgetName="FunnelFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    :isBackButtonHidden="shouldHideBackButton"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        :isBackButtonHidden="shouldHideBackButton"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
@@ -244,7 +244,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                    damageLocationsSelected.REPLACE;
+                        damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.SINGLE
                     );
@@ -259,7 +259,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                    damageLocationsSelected.REPLACE;
+                        damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.DRIVER
                     );
@@ -274,7 +274,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                    damageLocationsSelected.REPLACE;
+                        damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.PASSENGER
                     );
@@ -344,7 +344,7 @@ export default {
                     isWindshieldRepair: this.isWindshieldRepair,
                     selectedGlassToReplace: this.selectedGlassToReplace(),
                     selectedWindshieldChipCount:
-                    this.selectedWindshieldOptions.selectedWindshieldChipCount,
+                        this.selectedWindshieldOptions.selectedWindshieldChipCount,
                 },
                 false
             );
@@ -369,9 +369,9 @@ export default {
             const payment = this.$store.getters.payment;
 
             const vehicleChangedDuringPolicyLookupInHeritage =
-            payment.isInsurance &&
-            payment.insuranceCoverage.coverageStatus &&
-            payment.insuranceCoverage.coverageStatus !== "";
+                payment.isInsurance &&
+                payment.insuranceCoverage.coverageStatus &&
+                payment.insuranceCoverage.coverageStatus !== "";
             if (vehicleChangedDuringPolicyLookupInHeritage) {
                 if (store.getters.damage.isRepair) {
                     this.$router.navigateWithSaving(
@@ -381,7 +381,7 @@ export default {
                 } else {
                     this.$router.navigateWithSaving(
                         this.navigationScenarios
-                        .CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE,
+                            .CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE,
                         this.$route
                     );
                 }
@@ -441,7 +441,7 @@ export default {
             }
 
             return selectedGlassToReplace;
-        }
+        },
     },
     computed: {
         isWindshieldDamageLocation() {
@@ -463,7 +463,7 @@ export default {
             return (
                 this.isWindshieldDamageLocation &&
                 this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-                damageLocationsSelected.REPAIR
+                    damageLocationsSelected.REPAIR
             );
         },
         isDriverSideReplace() {
@@ -491,10 +491,10 @@ export default {
             if (
                 !this.selectedDamageLocations?.includes("Windshield") ||
                 this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-                damageLocationsSelected.REPAIR ||
+                    damageLocationsSelected.REPAIR ||
                 !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
             )
-            return false;
+                return false;
 
             return (
                 this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
@@ -513,14 +513,14 @@ export default {
                         );
                     }
                 ) ||
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedPassengerWindshield) => {
-                        return (
-                            selectedPassengerWindshield.toUpperCase() ===
-                            damageLocationsSelected.PASSENGER.toUpperCase()
-                        );
-                    }
-                ))
+                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                        (selectedPassengerWindshield) => {
+                            return (
+                                selectedPassengerWindshield.toUpperCase() ===
+                                damageLocationsSelected.PASSENGER.toUpperCase()
+                            );
+                        }
+                    ))
             );
         },
         shouldDisplayVehicleChangeAlert() {

From e6fc6635c4c290cafc33a8c63da6a67a4a04f870 Mon Sep 17 00:00:00 2001
From: CarlNation <32103961+CarlNation@users.noreply.github.com>
Date: Wed, 11 Oct 2023 10:02:54 -0400
Subject: [PATCH 4/5] CSR-1392

do not pass null items to getTotalPrice logic
---
 src/fmg-components/cart/cart.vue | 4 ++--
 src/mixins/base-mixin.js         | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 3b454071c..67558c323 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -7,7 +7,7 @@
                 @click="toggleClass()">
                 <div class="col d-flex justify-content-between">
                     <span class="label">Amount Due</span
-                    ><span class="label amount-due">${{ amountDue }}</span>
+                    ><span class="label amount-due">{{ amountDue }}</span>
                 </div>
             </div>
             <div class="price-table">
@@ -123,7 +123,7 @@ export default {
             return price;
         },
         getAmountDue() {
-            return baseMixin.methods.getAmountDue(this.storeLineItems);
+            return baseMixin.methods.getDisplayAmountDue(this.storeLineItems);
         },
         removeItem(item) {
             this.$emit("cart-remove", item);
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 74b44c983..1755ee294 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -128,9 +128,11 @@ export default {
             const itemsClone = { ...lineItems };
             delete itemsClone.serverData;
             for (var propertyName in itemsClone) {
-                amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
-                    itemsClone[propertyName]
-                );
+                if (itemsClone[propertyName]){
+                    amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
+                        itemsClone[propertyName]
+                    );
+                }
             }
             return amountDue;
         },

From f74d4d5a3bd6c1cce25c7dc96c32f2ac5634140e Mon Sep 17 00:00:00 2001
From: CarlNation <32103961+CarlNation@users.noreply.github.com>
Date: Wed, 11 Oct 2023 10:10:42 -0400
Subject: [PATCH 5/5] CSR-1392

prettier
---
 src/mixins/base-mixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 1755ee294..df03693ee 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -128,7 +128,7 @@ export default {
             const itemsClone = { ...lineItems };
             delete itemsClone.serverData;
             for (var propertyName in itemsClone) {
-                if (itemsClone[propertyName]){
+                if (itemsClone[propertyName]) {
                     amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
                         itemsClone[propertyName]
                     );