From b017bae2cb36980bb55fd0ef02c66c8036472093 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 12 Jul 2024 14:37:56 -0400
Subject: [PATCH] CSR-2140 WIP add styles for horizontal service packages on
 desktop.

---
 .../button-question/button-question.vue       |  4 +-
 src/layouts/quote/quote.vue                   | 10 ++-
 .../service-package-radio.vue                 | 61 ++++++++++++++-----
 3 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index f0442eee1..e1df5cba1 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-md-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..fb5980219 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -20,7 +20,10 @@
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
                         v-model="isInsuranceSelected"
                         groupName="CashOrInsuranceQuestion" />
-
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-12 col-xl-8">
                     <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..203a75416 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
@@ -136,24 +136,22 @@ export default {
 </script>
 
 <style lang="scss">
-.discount-text {
-    line-height: 36px;
-    display: flex;
-    border-top-right-radius: 0.5rem;
-    border-top-left-radius: 0.5rem;
-    background-color: #469d2a;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-    width: 100%;
-    color: white;
-}
 .package-main {
     .package-wrapper {
         margin: 0.5rem 0;
+        @include media-breakpoint-up(md) {
+            margin: 1rem .5rem;
+            display: flex;
+            flex-direction: column;
+            align-self: flex-end;
+        }
 
         label {
             display: block;
+            @include media-breakpoint-up(md) {
+                display: flex;
+                min-height: 300px;   
+            }
         }
 
         input[type="radio"] {
@@ -265,6 +263,10 @@ export default {
             width: 100%;
             max-height: 0;
             transition: all 0.5s ease;
+            @include media-breakpoint-up(md) {
+                max-height: 500px;
+                // margin-bottom: 5rem;
+            }
 
             p {
                 font-weight: 500;
@@ -274,6 +276,15 @@ export default {
                     &.pricing-info {
                         color: $green;
                         font-size: 0.875rem;
+                        @include media-breakpoint-up(md) {
+                            position: absolute;
+                            bottom: .75rem;
+                            left: 0;
+                            width: 100%;
+                            text-align: center;
+                            font-size: 1.125rem;
+                            color: $gray-500;
+                        }
                         span.strikethrough-price {
                             text-decoration: line-through;
                             font-size: 0.75rem;
@@ -299,9 +310,9 @@ export default {
                         text-decoration: line-through;
                         margin-right: 0;
                         font-weight: 500;
-                        font-size: 14px;
+                        font-size: 0.875rem;
                         line-height: 20px;
-                        color: $gray-550;
+                        color: $gray-500;
                         padding-right: 2px;
                     }
                     div.discount-price {
@@ -309,6 +320,13 @@ export default {
                         font-weight: 600;
                         font-size: 26px;
                     }
+                    @include media-breakpoint-up(md) {
+                        position: absolute;
+                        bottom: .75rem;
+                        left: 0;
+                        width: 100%;
+                        text-align: center;
+                    }
                 }
             }
             ul {
@@ -337,8 +355,23 @@ export default {
 
             .hide-when-closed {
                 display: none;
+                @include media-breakpoint-up(md) {
+                    display: flex;
+                    flex-direction: column;
+                }
             }
         }
+        .discount-text {
+            height: 2rem;
+            display: flex;
+            border-top-right-radius: 0.5rem;
+            border-top-left-radius: 0.5rem;
+            background-color: #469d2a;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            color: white;
+        }
     }
 }
 </style>