Merge pull request #2230 from Safelite/CASH-41-fix-width-on-alerts-for-packages

CASH-41 fix width of alerts and banners on quote page.

src/digital-components/button-question/button-question.vue

@@ -226,7 +226,7 @@ export default {
             if (this.buttonTypeString == "radio") {
                 classes += " radio-button-container";
             } else if (this.buttonTypeString == "servicePackageRadio") {
-                classes = "package-wrapper col-md-4";
+                classes = "package-wrapper col";
             }
 
             if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {

src/layouts/quote/quote.vue

@@ -20,7 +20,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-12 col-xl-8 mb-5">
+                <div class="col-md-12 mb-5" :class="getColCount()">
                     <servicePackageQuestion
                         ref="servicePackage"
                         cashCmsWidgetName="CashServicePackageQuestionWidget"
@@ -32,6 +32,7 @@
                         :shouldHideRecalibration="shouldHideRecalibration"
                         @vapsItemsSelected="vapsItemsSelectedAction"
                         @servicePackageDiscountSelected="servicePackageDiscountSelectedAction"
+                        @currentNumberOfPackages="currentNumberOfPackagesAction"
                         :servicePackage="servicePackage"
                         :activePromos="lineItems.promos"
                         v-on="{ 'buttonEvent.openModal': openModalAction }"
@@ -40,7 +41,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-12 col-xl-8 p-md-0">
+                <div class="col-md-12" :class="getColCount()">
                     <!-- If Cash AND vehicle does not require recal OR if Cash AND State requires showing recal, then show Afterpay banner -->
                     <afterpayModalBanner
                         v-if="showAfterpayBanner"
@@ -443,6 +444,7 @@ export default {
             showSaveProgressPopup: null,
             showSaveProgressModal: null,
             isSaveProgressComplete: null,
+            packageNumber: null,
         };
     },
     mounted() {
@@ -492,6 +494,16 @@ export default {
         },
     },
     methods: {
+        getColCount() {
+            if(this.packageNumber > 2) {
+                return "col-xl-8";
+            } else {
+                return "col-xl-6";
+            }
+        },
+        currentNumberOfPackagesAction(packageNumber) {
+            this.packageNumber = packageNumber;
+        },
         openModalAction(modalName) {
             this.$refs[modalName].openModal();
         },

src/layouts/quote/service-package-question/service-package-question.vue

@@ -150,6 +150,7 @@ export default {
                         : "Special: Save $" + this.getServicePackageDiscountPrice(),
                 },
             }));
+            this.$emit("currentNumberOfPackages", modifiedAnswers.length);
             return modifiedAnswers;
         },
         isServicePackageDiscountOnOrder() {

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue

@@ -141,6 +141,9 @@ export default {
 .package-main {
     .package-wrapper {
         margin: 1rem 0;
+        &:first-child {
+            margin: 1rem 0 0 0;
+        }
         &:last-child {
             margin: 1rem 0 0 0;
         }
@@ -148,6 +151,12 @@ export default {
             margin: 1rem 0.5rem 0 0.5rem;
             display: flex;
             flex-direction: column;
+            &:first-child {
+            margin: 1rem .5rem 0 0;
+            }
+            &:last-child {
+                margin: 1rem 0 0 .5rem;
+            }
         }
 
         label {