From ed9f85c18a6e7d2433673f8e191fab6691530631 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 3 Jul 2024 14:02:37 -0400
Subject: [PATCH] WIP desktop updates of service packages on quote page.

---
 .../button-question/button-question.vue             |  4 ++--
 src/layouts/quote/quote.vue                         | 12 +++++++++---
 .../service-package-radio/service-package-radio.vue | 13 ++++++++++++-
 src/styles/common-styles.scss                       | 12 ++++++++++++
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 24a8b8f41..2bb4bec7f 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -213,7 +213,7 @@ export default {
                     classes = "ui-checkbox d-flex";
                     break;
                 case "servicePackageRadio":
-                    classes = "package-main";
+                    classes = "package-main d-md-flex justify-content-center";
                     break;
             }
             return classes;
@@ -226,7 +226,7 @@ export default {
             if (this.buttonTypeString == "radio") {
                 classes += " radio-button-container";
             } else if (this.buttonTypeString == "servicePackageRadio") {
-                classes = "package-wrapper";
+                classes = "package-wrapper col-md-4";
             }
 
             if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index bad345022..14cdcecc4 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-fluid page-container-grouped-styles quote">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -20,7 +20,10 @@
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
                         v-model="isInsuranceSelected"
                         groupName="CashOrInsuranceQuestion" />
-
+                    </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-lg-4">
                     <servicePackageQuestion
                         ref="servicePackage"
                         cashCmsWidgetName="CashServicePackageQuestionWidget"
@@ -34,7 +37,10 @@
                         v-on="{ 'buttonEvent.openModal': openModalAction }"
                         validationRules="option-required"
                         isRequired />
-
+                    </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <afterpayModalBanner
                         v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
                         cmsWidgetName="AfterpayModalWidget"
diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index b355bbb32..af2b85956 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -151,6 +151,9 @@ export default {
 .package-main {
     .package-wrapper {
         margin: 0.5rem 0;
+        @include media-breakpoint-up(md) {
+            margin: .5rem;
+        }
 
         label {
             display: block;
@@ -173,7 +176,9 @@ export default {
                     0px 4px 24px -8px rgba(0, 0, 0, 0.2);
                 border-radius: 0.5rem;
                 overflow: hidden;
-                min-height: 60px;
+                @include media-breakpoint-up(md) {
+                    max-height: 500px;
+                }
 
                 &.has-subheader {
                     min-height: 80px;
@@ -265,6 +270,9 @@ export default {
             width: 100%;
             max-height: 0;
             transition: all 0.5s ease;
+            @include media-breakpoint-up(md) {
+                max-height: 500px;
+            }
 
             p {
                 font-weight: 500;
@@ -337,6 +345,9 @@ export default {
 
             .hide-when-closed {
                 display: none;
+                @include media-breakpoint-up(md) {
+                    display: flex;
+                }
             }
         }
     }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 197655db1..0743f8322 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -37,6 +37,18 @@ body {
                 max-width: 100%;
             }
         }
+        &.quote {
+            .col-md-6,
+            .col-lg-4 {
+                max-width: 1200px;
+            }
+            .col-md-6.col-lg-4 {
+                @include media-breakpoint-up(lg) {
+                    width: 100%;
+                    max-width: 910px;
+                }
+            }
+        }
         //END set max-width on columns
     }
     .pointer {