Merge pull request #1070 from Safelite/feature/INSR-7769

INSR-7769: Service-Packages Heritage parity

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

@@ -127,6 +127,7 @@ export default {
         isOverflowScrollable: Boolean,
         isWide: Boolean,
         isCashOrInsurance: Boolean,
+        isHorizontalLayout: Boolean,
         modelValue: [Array, Number, String],
         value: [Number, String],
         validationRules: String,
@@ -211,7 +212,10 @@ export default {
                     classes = 'ui-radio d-flex';
                     break;
                 case 'servicePackageRadio':
-                    classes = 'package-main';
+                    classes = 'package-main d-flex flex-column';
+                    if (this.isHorizontalLayout) {
+                        classes += ' flex-md-row gap-3';
+                    }
                     break;
                 case 'providerPrefRadio':
                     classes = 'option-main';
@@ -231,6 +235,9 @@ export default {
                     break;
                 case 'servicePackageRadio':
                     classes = 'package-wrapper';
+                    if (this.isHorizontalLayout) {
+                        classes += ' flex-grow-0 flex-shrink-0';
+                    }
                     break;
                 case 'providerPrefRadio':
                     classes = 'option-wrapper';
@@ -325,6 +332,12 @@ export default {
 
 <style lang="scss" scoped>
 .button-question {
+    :deep(.package-wrapper) {
+        @media (min-width: 768px) {
+            flex: 0 0 calc(33.333% - 0.67rem);
+            max-width: calc(33.333% - 0.67rem);
+        }
+    }
     color: $black;
 
     .radio-button-container {
@@ -345,6 +358,11 @@ export default {
             &.button-question-text-left {
                 text-align: left;
             }
+            &.service-package-question-text {
+                font-weight: 500;
+                text-align: center;
+                margin-bottom: 0.5rem;
+            }
         }
     }
 

src/iss-components/site-sub-header/site-sub-header.vue

@@ -117,7 +117,7 @@ export default {
         alternateFormatting() {
             // override for service-packages unique style
             if (this.issContainingPage?.toLowerCase() === 'service-packages') {
-                return 'service-packages-subtext my-4';
+                return 'service-packages-subtext';
             }
             return this.darkGraySubText ? 'dark-gray' : 'light-gray';
         }
@@ -169,8 +169,8 @@ p {
         color: $darker-gray;
     }
     &.service-packages-subtext {
-        font-weight: 500;
+        font-weight: 400;
-        line-height: 24px;
+        line-height: 26px;
         span {
             font-size: 1rem;
         }

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

@@ -2,12 +2,16 @@
     <buttonQuestion
         ref="buttonQuestion"
         v-model="selectedPackageName"
+        class="service-package-question"
         :answers="servicePackageAnswers"
         :groupName="groupName"
+        :questionText="questionText"
+        :questionTextClasses="['service-package-question-text']"
         buttonTypeString="servicePackageRadio"
         :buttonTypeObject="servicePackageRadio"
         :validationRules="validationRules"
-        :isRequired="isRequired" />
+        :isRequired="isRequired"
+        :isHorizontalLayout="true" />
 </template>
 
 <script>
@@ -17,9 +21,7 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
 import servicePackageRadio from '@/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue';
 import partTypeStrings from '@/constants/part-type-strings';
 import { useMainStore } from '@/store';
-import allGlassPartsAndItemsHavePrices from '@/layouts/service-packages/service-package-helper/service-package-helper';
 import { getPriceOfLineItem } from '@/helpers/price-calculator';
-import { getHighestFullySatisfiedTier } from '@/helpers/service-package-helper.js';
 
 const glassLocations = damageLocationsSelected;
 
@@ -50,7 +52,8 @@ export default {
     data() {
         return {
             servicePackageRadio,
-            selectedPackageName: ''
+            selectedPackageName: '',
+            questionText: 'Select an option:'
         };
     },
     computed: {
@@ -58,7 +61,6 @@ export default {
             if (this.availableLineItems?.lineItems) {
                 return this.availableLineItems.lineItems;
             }
-
             return this.availableLineItems ?? [];
         },
         servicePackageAnswers() {
@@ -142,9 +144,6 @@ export default {
         }
     },
     watch: {
-        availableLineItems() {
-            this.selectDefaultPackage();
-        },
         selectedPackageName(newValue) {
             const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
             this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
@@ -213,17 +212,6 @@ export default {
             });
             return vapsPrice;
         },
-        selectDefaultPackage() {
-            const { glassToReplace, isRepair } = store.order.damage;
-            const { vaps } = store.order.lineItems;
-            const defaultTier = getHighestFullySatisfiedTier(
-                glassToReplace ?? [],
-                this.availableLineItems,
-                isRepair,
-                vaps ?? []
-            );
-            this.selectedPackageName = defaultTier;
-        },
         getVapsLineItemsForSelectedPackage(packageName) {
             const vapsLineItemsForSelectedPackage = [];
             if (packageName === packageNames.TIER_TWO) {
@@ -280,3 +268,24 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+.service-package-question-text {
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: 0;
+}
+
+@include media-breakpoint-up(md) {
+    :deep(.package-main) {
+        padding: 0 1.5rem 0 1.5rem;
+        .package-wrapper:nth-child(2) {
+            margin-left: 0.5rem;
+        }
+        .package-wrapper:nth-child(3) {
+            margin-right: 0;
+            margin-left: 0.5rem;
+         }
+    }
+}
+</style>

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

@@ -7,18 +7,24 @@
             :class="[buttonLabelSubCopy ? 'has-subheader' : '']"
             for="testradio">
             <div class="package-specs">
-                <div>
+                <div class="button-label">
-                    <p class="m-0">
+                    <div class="label-wrapper">
-                        <span v-html="buttonLabel"></span>
+                        <p class="m-0">
+                            <span
+                                class="mt-1"
+                                v-html="buttonLabel"></span>
+                        </p>
+                        <p
+                            v-if="buttonLabelSubCopy"
+                            class="sub-label m-0"
+                            v-html="buttonLabelSubCopy">
+                        </p>
+                    </div>
+                    <div class="pricing-info-mobile">
                         <span
-                            class="pricing-info"
+                            class="price"
                             v-html="buttonAuxiliaryCopy"></span>
-                    </p>
+                    </div>
-                    <p
-                        v-if="buttonLabelSubCopy"
-                        class="sub-label m-0"
-                        v-html="buttonLabelSubCopy">
-                    </p>
                 </div>
                 <div class="hide-when-closed">
                     <ul>
@@ -53,10 +59,16 @@
                     <!--ms-n6-->
                     <div
                         v-if="buttonFooterCopy"
-                        class="package-footer fw-bold caption mt-4 ml-n4 mr-3"
+                        class="package-footer fw-bold caption mt-4 mr-3"
-                        v-html="buttonFooterCopy"></div>
+                        v-html="buttonFooterCopy">
+                    </div>
                 </div>
             </div>
+            <div class="pricing-info-desktop">
+                <span
+                    class="price"
+                    v-html="buttonAuxiliaryCopy"></span>
+            </div>
         </div>
     </baseInputButton>
 </template>
@@ -111,6 +123,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// TO DO: look into why the font renders differently than Heritage, even with the same specs
     .ml-n4 {
         margin-left: -$spacer * 2;
     }
@@ -121,8 +134,30 @@ export default {
         .package-wrapper {
             margin: 0.5rem 0;
 
+            .button-label {
+                display: flex;
+                &:before {
+                    content: "";
+                    position: relative;
+                    top: 5px;
+                    margin-right: 1rem;
+                    border-radius: 50%;
+                    border: 0.666667px solid #767676;
+                    width: 16px;
+                    height: 16px;
+                    min-width: 16px;
+                }
+            }
+
             label {
                 display: block;
+                height: 100%;
+            }
+
+            .package-label {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
             }
 
             input[type="radio"] {
@@ -132,14 +167,15 @@ export default {
 
                 + .package-label {
                     display: flex;
+                    flex-direction: column;
                     align-items: flex-start;
                     position: relative;
                     cursor: pointer;
                     width: 100%;
-                    padding: 1rem;
+                    padding: 10px;
-                    border: 1px solid $gray-300;
+                    border: 0.666667px solid #dddddd;
-                    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
+                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-                    border-radius: 0.5rem;
+                    border-radius: 0.25rem;
                     overflow: hidden;
                     min-height: 60px;
                     max-height: 100px;
@@ -151,23 +187,11 @@ export default {
                         min-height: 86px;
                     }
 
-                    &:before {
-                        content: "";
-                        position: relative;
-                        top: 5px;
-                        margin-right: 1rem;
-                        border-radius: 50%;
-                        border: 1px solid $gray-500;
-                        width: 16px;
-                        height: 16px;
-                        min-width: 16px;
-                    }
-
                     &:after {
                         content: "";
                         position: absolute;
-                        left: 19px;
+                        left: 13px;
-                        top: 24px;
+                        top: 18px;
                         border-radius: 50%;
                         width: 10px;
                         height: 10px;
@@ -176,9 +200,9 @@ export default {
                 }
 
                 &:hover {
-                    + .package-label {
+                    + .button-label {
                         &:before {
-                            border: 1px solid #8e9292;
+                            border: 0.666667px solid #767676;
                             box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
                         }
                     }
@@ -200,42 +224,37 @@ export default {
                     }
 
                     + .package-label {
-                        background-color: $blue-100;
+                        background-color: $background-color-selected;
-                        border: 1px solid $blue;
+                        border: 0.666667px solid $heritage-blue-secondary;
                         max-height: 500px;
                     }
 
-                    + .package-label {
+                    + .button-label {
                         &:before {
-                            box-shadow: 0px 0px 0px 1px $blue;
+                            box-shadow: 0px 0px 0px 1px $heritage-blue-primary;
+                            border: none;
                         }
                     }
 
                     + .package-label {
                         &:after {
-                            background: $blue;
+                            background: $heritage-blue-primary;
                         }
                     }
                 }
 
-                &:focus {
-                    + .package-label {
-                        &:before {
-                            border: 2px solid $blue;
-                        }
-                    }
-                }
             }
 
             .package-footer {
-                color: $red;
+                color: #af2117;
-                font-weight: $font-weight-bold; // 600 in fmg
+                font-weight: $font-weight-bold;
-                margin-top: 0.5rem; // not in fmg
+                margin-top: 20px;
+                font-size: 0.875rem;
+                line-height: 24px;
             }
 
             .package-specs {
-                display: flex;
+                flex: 0;
-                flex-direction: column;
                 width: 100%;
                 max-height: 0;
                 transition: all 1s ease;
@@ -243,32 +262,28 @@ export default {
                     max-height: 500px;
                 }
                 p {
-                    font-weight: $font-weight-bold; // 600 in fmg
+                    color: #4d4e53;
-                    display: flex;
+                    font-weight: 600;
                     justify-content: space-between;
 
-                    span {
-                        &.pricing-info {
-                            color: $green;
-                            font-size: 0.875rem;
-                        }
-                    }
-
                     &.sub-label {
                         color: $green;
                         text-transform: uppercase;
                         font-size: 0.75rem;
+                        font-weight: $font-weight-bold;
                     }
                 }
 
                 ul {
-                    margin: 1rem 0 0 -.6rem; // .9375rem in fmg
+                    margin: 0.5rem 0 0 1.25rem;
                     padding: 0;
+                    color: $darker-gray;
 
                     li {
-                        margin-bottom: 0.5rem;
+                        margin-bottom: 0.25rem;
                         font-size: 0.875rem;
                         line-height: 1.5rem;
+                        color: $darker-gray;
 
                         a {
                             line-height: 1.5rem;
@@ -291,8 +306,41 @@ export default {
                 .hide-when-closed {
                     display: none;
                     @include media-breakpoint-up(md) {
-                        display: flex;
+                        display: block;
-                        flex-direction: column;
+                    }
+                }
+            }
+
+            .pricing-info-desktop {
+                display: flex;
+                flex: 1;
+                align-items: flex-end;
+                @include media-breakpoint-down(md) {
+                    display: none;
+                }
+                span {
+                    &.price {
+                        color: #075f35;
+                        font-size: 0.875rem;
+                        font-weight: $font-weight-bold;
+                        padding: 0.35rem 0 1rem 0;
+                    }
+                }
+            }
+
+            .pricing-info-mobile {
+                display: flex;
+                flex: 1;
+                justify-content: flex-end;
+                margin-top: 0.25rem;
+                @include media-breakpoint-up(md) {
+                    display: none;
+                }
+                span {
+                    &.price {
+                        color: #075f35;
+                        font-size: 0.875rem;
+                        font-weight: $font-weight-bold;
                     }
                 }
             }

src/layouts/service-packages/service-packages.vue

@@ -9,11 +9,10 @@
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
             <div class="iss-heritage-container-width">
-                <div class="service-packages-container iss-heritage-content-container-width">
+                <div class="service-packages-container">
                     <siteSubHeader
-                        class="mt-4"
+                        class="subheader mt-5"
-                        subHeaderClasses="mt-5"
+                        justification="center"
-                        justification="left"
                         cmsWidgetName="SiteSubHeaderWidget"
                         issContainingPage="service-packages" />
                     <servicePackageQuestion
@@ -25,15 +24,24 @@
                         isRequired
                         @vapsItemsSelected="vapsItemsSelectedAction"
                         @link-event="openModalAction" />
-                    <p
+                    <div class="d-flex justify-content-center mt-8 mb-4">
-                        class="caption disclaimer"
+                        <buttonMain
-                        v-html="PriceDisclaimerText"></p>
+                            ref="buttonMain"
+                            class="continue-button"
+                            variant="navigation"
+                            :buttonText="'Continue'"
+                            @clickEvent="forwardButtonAction" />
+                    </div>
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
+                        class="back-link"
                         :isForwardActionDisabled="!meta.valid"
-                        @backClicked="navigateBack"
+                        :isForwardButtonHidden="true"
-                        @ForwardClicked="forwardButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
+                <p
+                    class="caption disclaimer"
+                    v-html="PriceDisclaimerText"></p>
             </div>
             <loadingModal
                 ref="loadingModal"
@@ -72,6 +80,7 @@ import globalRules from '@/constants/global-rules';
 import servicePackageQuestion from '@/layouts/service-packages/service-package-question/service-package-question.vue';
 import issPageValues from '@/router/router-constants/issPage-values';
 import bailoutMessage from '@/constants/bailoutMessage';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
 
 const store = useMainStore();
 
@@ -84,7 +93,8 @@ export default {
         Form,
         servicePackageQuestion,
         loadingModal,
-        contentGroupModal
+        contentGroupModal,
+        buttonMain
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -209,30 +219,50 @@ export default {
 <style lang="scss" scoped>
 .iss-heritage-container-width {
     .service-packages-container {
+        @include media-breakpoint-up(md) {
+            width: 100%;
+            .continue-button {
+                width: 50%
+            }
+        }
+        @include media-breakpoint-down(md) {
+            .continue-button {
+                width: 90%
+            }
+        }
         position: relative;
         min-height: 1px;
         padding-left: .9375rem;
         padding-right: .9375rem;
+        display: block;
+        margin: 0 auto;
+        :deep(.subheader-primary) {
+            display: block;
+        }
+        :deep(.subheader-secondary) {
+            display: block;
+            text-align: center;
+            margin-top: 0.75rem;
+            padding: 0px;
+            p {
+                margin-bottom: 18px;
+            }
+        }
     }
 }
-
-.subheader-secondary {
-    margin-top: 0.5rem;
-    padding: 0px;
-}
-
 .disclaimer {
-    margin: 0.5rem 0 1.5rem 0;
+    margin: 0.5rem 1rem 1.5rem 1.5rem;
-
+    :deep(.external-text) {
-    a {
+        text-decoration: none;
-        color: #4d5151;
-        font-weight: 400;
     }
 }
 .service-packages {
     :deep(strong) {
-        font-weight: $font-weight-bold;
+        font-weight: 400;
     }
 }
 
+.back-link {
+    margin-left: 1rem;
+}
 </style>