From 4eab2c661878fed6cf47d9c5d521b00d752c85b2 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 4 Oct 2023 09:20:05 -0400
Subject: [PATCH] WIP

---
 .../button-question/button-question.vue              | 11 +++++++++++
 .../questions-page-layout/questions-page-layout.vue  |  2 +-
 src/layouts/address-lookup/address-lookup.vue        |  2 +-
 src/layouts/address-vehicles/address-vehicles.vue    |  2 +-
 src/layouts/customer-details/customer-details.vue    |  6 +++---
 src/layouts/estimate/estimate.vue                    |  2 +-
 .../license-plate-lookup/license-plate-lookup.vue    |  2 +-
 src/layouts/quote/quote.vue                          |  2 +-
 src/layouts/review/review.vue                        |  8 ++++----
 src/layouts/schedule/schedule.vue                    |  2 +-
 src/layouts/service-location/service-location.vue    | 12 +++++++++---
 src/layouts/vehicle-damage/vehicle-damage.vue        |  4 ++--
 src/layouts/vehicle-parts/vehicle-parts.vue          |  2 +-
 src/layouts/vehicle/vehicle.vue                      |  4 ++--
 src/layouts/vin-lookup/vin-lookup.vue                |  2 +-
 src/mixins/base-mixin.js                             |  8 ++++++++
 src/styles/common-styles.scss                        |  8 ++++----
 src/styles/ux-variables.scss                         |  7 +++++++
 18 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index ffbb8fd79..8c7bbe933 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -304,6 +304,17 @@ export default {
 </script>
 
 <style lang="scss">
+.vehicle-damage {
+    @include media-breakpoint-up(md) {
+        .col-12 {
+            width: 66.66666667%
+        }
+        .col {
+            width: 33.3333333%;
+            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 29b92f2b8..595068b2a 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
@@ -1,7 +1,7 @@
 <template>
     <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 08833dc2c..4292d0543 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -5,7 +5,7 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index eb6a6eccd..5e97bf328 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 34a585c1e..f17c22812 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 4fc6a1bc1..8ca0ac651 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index ac167cae9..13097eacd 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index e2836ed9e..64e5bc63a 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index f30f6f6ac..cfd7416b9 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -1,13 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <!-- When customer-details is added: v-slot="{ meta }" -->
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index fccef82e1..9fae16a82 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index b17d7bb26..fdf3ff9dd 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,14 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
 
                     <serviceZipModalQuestion
@@ -60,7 +60,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center appointment-type">
-                <div class="col-md-8">
+                <div class="col-md-6">
                     <appointmentTypeQuestion
                         v-model="selectedAppointmentType"
                         v-show="isAppointmentTypeDisplayed"
@@ -498,6 +498,12 @@ export default {
 <style lang="scss">
 .appointment-type {
     @include media-breakpoint-up(md) {
+        .col {
+            flex: 0 0 auto;
+            width: 49.33333333%;
+        }
+    }
+    @include media-breakpoint-up(xl) {
         .col {
             flex: 0 0 auto;
             width: 33.33333333%;
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index e6d4c01f8..60ca0e5dc 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid page-container-grouped-styles vehicle-damage">
+        <div class="container page-container-grouped-styles vehicle-damage">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
@@ -53,7 +53,7 @@
                         v-model="sideDoorOptionsData"
                         v-show="!hasRepairReplaceConflict"
                         :selectedDamageLocations="selectedDamageLocations" />
-
+                        
                     <replaceOptionsQuestion
                         ref="backGlassOptions"
                         cmsWidgetName="RearReplaceOptionsQuestion"
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 855394ce3..3c7b90188 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -2,7 +2,7 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
-            <div class="container-fluid page-container-grouped-styles">
+            <div class="container page-container-grouped-styles">
                 <div class="row justify-content-center">
                     <div class="col-md-6">
                         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 429f6cdfa..15758b9da 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,12 +1,12 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
+        <div class="container">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 1f79182a6..f5c537a81 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index b984bc565..b1678fa25 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -91,6 +91,7 @@ export default {
                     lineItem.partType != partTypeStrings.RAIN_DEFENSE
                 );
             });
+            console.log("step one", lineItemsToPrice);
             let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
             return totalPrice;
         },
@@ -112,7 +113,14 @@ export default {
                         lineItem.childParts
                     );
                 }
+                console.log(
+                    "step two, lineItem name: ",
+                    lineItem.partNumber,
+                    " / totalPrice: ",
+                    totalPrice
+                );
             });
+            console.log("step three", totalPrice);
             return totalPrice;
         },
         getTotalLineItemPrice(lineItem) {
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index bb04e2298..ffcd4a380 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -4,10 +4,10 @@ body {
     font-size: 16px;
     background-color: #fff;
     color: #4d5151;
-    .container-fluid {
-        max-width: 1400px;
-        padding: 0 1.5rem;
-        position: relative;
+    .container {
+        // padding: 0 1.5rem;
+        // position: relative;
+        //height: 100vh;
         .prevent-squish {
             overflow-x: unset;
         }
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 75f042fd1..437abd843 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -188,3 +188,10 @@ $modal-backdrop-opacity: 0;
 
 //Disable default !important behavior
 $enable-important-utilities: false;
+
+//Bootstrap Grid Breakpoints - Use these breakpoints only
+$grid-breakpoints: (
+  xs: 0,
+  md: 768px,
+  xl: 1200px,
+);