WIP initial commit quote deskop change with correct Figma

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 d-md-flex justify-content-center";
+                    classes = "package-main";
                     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 col-md-4";
+                classes = "package-wrapper";
             }
 
             if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
@@ -255,7 +255,7 @@ export default {
                 buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
                 buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
                 buttonImageId: answer.buttonImageId ?? answer.ImageId,
-                additionalButtonData: answer.additionalButtonData,
+                additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
                 groupName: this.formatString(this.groupName),
                 value:
                     answer.value ??

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 quote">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -20,10 +20,7 @@
                         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"
@@ -37,10 +34,7 @@
                         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"
@@ -49,6 +43,7 @@
                         :lineItems="lineItems" />
 
                     <recalDisclaimer
+                        class="my-5"
                         cmsWidgetName="RecalDisclaimerWidget"
                         v-if="isRecalibrationOnOrder"
                         v-on="{ textLinkClicked: openModalAction }"

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

@@ -12,9 +12,7 @@
             ]"
             for="testradio">
             <div class="package-specs">
-                <div
+                <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
-                    v-if="this.additionalButtonData.servicePackageDiscount"
-                    class="row justify-content-between">
                     <div class="col md-6">
                         <p class="m-0">
                             <span v-html="this.buttonLabel"></span>
@@ -138,20 +136,24 @@ 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: 1rem 0;
-        @include media-breakpoint-up(md) {
         margin: 0.5rem 0;
-        }
-        position: relative;
-        @include media-breakpoint-up(md) {
-            margin: 1rem 0.5rem;
-        }
 
         label {
             display: block;
-            height: 100%;
         }
 
         input[type="radio"] {
@@ -172,21 +174,13 @@ export default {
                 border-radius: 0.5rem;
                 overflow: hidden;
                 min-height: 60px;
-                @include media-breakpoint-up(md) {
-                    max-height: 500px;
-                    height: 100%;
-                }
 
                 &.has-subheader {
                     min-height: 80px;
                 }
                 &.has-text {
                     border-radius: 0 0 0.5rem 0.5rem;
-                    border: 1px solid #469d2a;
+                    border: 1px solid #469d2a !important;
-                    @include media-breakpoint-up(md) {
-                        border-radius: 0.5rem;
-                        padding-top: 3.75rem;
-                    }
                 }
 
                 &:before {
@@ -271,9 +265,6 @@ export default {
             width: 100%;
             max-height: 0;
             transition: all 0.5s ease;
-            @include media-breakpoint-up(md) {
-                max-height: 500px;
-            }
 
             p {
                 font-weight: 500;
@@ -346,34 +337,6 @@ export default {
 
             .hide-when-closed {
                 display: none;
-                @include media-breakpoint-up(md) {
-                    display: flex;
-                    flex-direction: column;
-                }
-            }
-        }
-        .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;
-            height: 2.875rem;
-            @include media-breakpoint-up(md) {
-                position: absolute;
-                z-index: 1;
-                ~ label {
-                    .package-label {
-                        &:after {
-                            top: 68px;
-                        }
-                    }
-                }
             }
         }
     }

src/styles/common-styles.scss

@@ -37,19 +37,6 @@ body {
                 max-width: 100%;
             }
         }
-        // Quote page desktop
-        &.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 {