Merge branch 'release/2025.09.04' into feature/CASH-1339

src/constants/progress-bar-mapper.js

@@ -1,11 +1,11 @@
 export const pageProgressMapper = {
     //Combine progress bar slide percent and button steps
     vehicle: {
-        percent: 10,
+        percent: 8,
         step: 1,
     },
     "vehicle-damage": {
-        percent: 14,
+        percent: 11,
         step: 1,
     },
     estimate: {
@@ -49,7 +49,7 @@ export const pageProgressMapper = {
         step: 1,
     },
     quote: {
-        percent: 39, //The first Step 2 must be 39 so the animated bar lines up with the dot
+        percent: 62,
         step: 2,
     },
     "insurance-company": {
@@ -61,7 +61,7 @@ export const pageProgressMapper = {
         step: 2,
     },
     schedule: {
-        percent: 70.5, //The first Step 3 must be 70.5 so the animated bar lines up with the dot
+        percent: 76,
         step: 3,
     },
     "mobile-details": {
@@ -73,7 +73,7 @@ export const pageProgressMapper = {
         step: 3,
     },
     "payment-method": {
-        percent: 97, //The first Step 4 must be 97 so the animated bar lines up with the dot
+        percent: 97,
         step: 4,
     },
     payment: {

src/digital-components/date-picker/date-picker.vue

@@ -1039,6 +1039,7 @@ export default {
     fieldset {
         flex-grow: 1;
         position: relative;
+        width: 100%;
 
         .view-more-dates {
             color: $blue;
@@ -1109,11 +1110,11 @@ export default {
 
         .month-year {
             grid-area: 1 / 1 / 2 / 5;
-            font-family: UrbanistSemiBold;
+            font-family: UrbanistRegular;
             color: $black;
             justify-content: left;
             margin-bottom: 0.5rem;
-            font-weight: 500;
+            font-weight: 600;
         }
         .legend {
             grid-area: 1 / 5 / 2 / 8;

src/digital-components/modal/modal.vue

@@ -9,8 +9,7 @@
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
         @keypress.enter="onEnter"
-        aria-hidden="true"
+        aria-hidden="true">
-        @click.self="closeModal">
         <!--Close modal when clicking other than close button-->
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">

src/experiment-components/service-package-radio-for-afterpay.vue

@@ -219,11 +219,6 @@ export default {
                 &.has-subheader {
                     & > .package-specs {
                         display: inline-flex;
-                        @include media-breakpoint-up(md) {
-                            & > div:first-of-type {
-                                display: flex;
-                            }
-                        }
                     }
                 }
 
@@ -331,7 +326,6 @@ export default {
             }
 
             p {
-                font-weight: 600;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -339,16 +333,11 @@ export default {
 
                 &.sub-label {
                     color: $green;
-
+                    display: inline-flex;
                     padding: 0.25rem 0;
                     text-transform: uppercase;
                     font-size: 0.75rem;
                     margin-left: auto;
-                    @include media-breakpoint-up(md) {
-                        background-color: $green-100;
-                        padding: 0.25rem 0.5rem;
-                        border-radius: 0.75rem;
-                    }
                 }
             }
             span {
@@ -375,6 +364,8 @@ export default {
                     }
                     div.discount-price {
                         color: $green;
+                        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+                        font-weight: 600;
                     }
                     @include media-breakpoint-up(md) {
                         position: absolute;
@@ -458,6 +449,8 @@ export default {
             font-weight: 600;
             line-height: 20px;
             font-size: 1.25rem;
+            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+            font-weight: 600;
 
             span.strikethrough-price {
                 text-decoration: line-through;

src/experiment-components/service-package-radio.vue

@@ -291,6 +291,12 @@ export default {
                     height: 10px;
                     min-width: 10px;
                 }
+
+                &.has-subheader {
+                    & > .package-specs {
+                        display: inline-flex;
+                    }
+                }
             }
 
             &:hover {

src/fmg-components/funnel-sub-header/funnel-sub-header.vue

@@ -11,9 +11,11 @@
                     @click-event="clickEvent" />
             </h5>
         </div>
-        <div v-if="subText" class="d-flex align-self-center overflow-hidden mt-1">
+        <div
-            <p class="small fw-normal sub-text">
+            v-if="subText"
-                <span v-html="boldedSubHeaderText"></span>
+            class="d-flex align-items-center justify-content-center container-fluid overflow-hidden mt-1">
+            <p class="text-center small fw-normal sub-text">
+                <span v-html="subText"></span>
             </p>
         </div>
     </div>

src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue

@@ -4,7 +4,6 @@
             :ref="modalName"
             :headerText="modalHeaderText"
             suppressPageScroll
-            :staticBackdrop="true"
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
             @footer-button-event="saveProgress">

src/layouts/estimate/estimate.vue

@@ -1,16 +1,24 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles">
-        <div class="container page-container-grouped-styles estimate">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
+                    <funnelSubHeader class="pb-2" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
-                        <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
+                        <p class="header-copy mb-2 text-md-center" v-html="HeaderText"></p>
-                        <div v-html="this.VinLookupQuestionBodyText2"></div>
+
-                        <div
+                        <p
-                            class="select-an-option"
+                            class="header-sub-copy mb-5 text-md-center"
-                            v-html="this.VinLookupQuestionFooterText"></div>
+                            v-html="VinLookupQuestionText"></p>
+
+                        <p class="select-option mb-2" v-html="SelectOptionText"></p>
+
                         <buttonQuestion
                             cmsWidgetName="VinLookupMethod"
                             :answers="answersFromCms"
@@ -229,6 +237,12 @@ export default {
         VinLookupQuestionText() {
             return this.getCmsContent("VinLookupQuestion", "BodyText");
         },
+        HeaderText() {
+            return this.getCmsContent("VinLookupQuestion", "HeaderText");
+        },
+        SelectOptionText() {
+            return this.getCmsContent("VinLookupQuestion", "FooterText");
+        },
         VinLookupQuestionBodyText2() {
             return this.getCmsContent("VinLookupQuestion", "BodyText2");
         },
@@ -249,14 +263,23 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+.header-copy {
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
 <style lang="scss">
 .vinlookupquestion p {
     font-size: 1.25rem;
 }
+.header-sub-copy {
+    font-size: 0.875rem;
 
 .select-an-option {
     font-family: UrbanistSemibold;
     font-weight: 600;
     margin-bottom: 1rem;
 }
+.select-option {
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+    font-weight: 600;
+}
 </style>

src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue

@@ -129,10 +129,7 @@ export default {
     }
 
     .callout {
-        font-family:
+        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
-            UrbanistSemibold Arial,
-            Helvetica,
-            sans-serif;
     }
 
     > div:first-of-type {

src/layouts/quote/quote.vue

@@ -903,7 +903,7 @@ export default {
     padding-bottom: 2rem;
     :deep(.nav-bar) {
         position: initial;
-        button {
+        button.btn {
             width: 100%;
             justify-content: center;
         }
@@ -976,6 +976,9 @@ export default {
             }
         }
     }
+    :deep(.cash-or-insurance-question .list-button-horizontal) {
+        box-shadow: none;
+    }
 }
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;

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

@@ -243,11 +243,15 @@ export default {
                         .hide-when-closed {
                             display: block;
                         }
+                        p:first-child {
+                            font-weight: 600;
+                        }
                     }
                 }
                 + .package-label {
                     border: 1px solid $blue;
                     max-height: 500px;
+                    background-color: $blue-100;
                     .special-save-box {
                         background-color: $green-200;
                     }
@@ -291,23 +295,33 @@ export default {
                 align-items: center;
             }
 
+            .pricing-info .insurance-pricing span {
+                font-size: 0.875rem;
+                font-family: Urbanist, Arial, Helvetica, sans-serif;
+                font-weight: 500;
+            }
+
             p {
-                font-weight: 600;
+                font-family: Urbanist, Arial, Helvetica, sans-serif;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 white-space: nowrap;
+                &:first-child {
+                    font-weight: 400;
+                }
                 span {
                     &.pricing-info {
                         color: $green;
                         font-size: 0.875rem;
+                        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+                        font-weight: 600;
                         @include media-breakpoint-up(md) {
                             position: absolute;
                             bottom: 0.75rem;
                             left: 0;
                             width: 100%;
                             margin-left: 1.25rem;
-                            font-weight: 600;
                         }
                         span.strikethrough-price {
                             text-decoration: line-through;

src/layouts/schedule/schedule.vue

@@ -41,7 +41,7 @@
                         alertClass="alert-warning" />
                     <alert
                         ref="alertRecalNoMobile"
-                        class="mt-5 mb-5"
+                        class="mb-5"
                         cmsWidgetName="AlertRecalNoMobileWidget"
                         v-if="displayRecalibrationWarning"
                         @text-link-clicked="openModalAction"
@@ -1777,25 +1777,6 @@ export default {
     font-weight: 600;
 }
 
-.funnel-sub-header h5 {
-    font-weight: 500;
-    font-size: 1rem;
-    font-family: UrbanistSemibold;
-    span {
-        letter-spacing: 0;
-    }
-}
-
-.appointment-type .funnel-sub-header h5 {
-    font-family: UrbanistRegular;
-    font-size: 1.25rem;
-}
-
-.funnel-sub-header.my-5 h5 {
-    font-weight: 400;
-    font-size: 1.25rem;
-}
-
 :deep(.funnel-sub-header:not(.mb-5)) {
     h5.dark-header {
         font-weight: 600;
@@ -1805,7 +1786,7 @@ export default {
 
 .col-12 a {
     font-family: UrbanistSemibold;
-    font-weight: 500;
+    font-weight: 600;
     line-height: 26px;
     text-underline-offset: 4px;
 }
@@ -1813,4 +1794,16 @@ export default {
 .text-block.duration-text-block b {
     font-family: UrbanistSemibold;
 }
+:deep(.alert-warning.widget-name-AlertRecalNoMobileWidget .alert-heading),
+:deep(.alert-success.widget-name-AlertMobileFeeFreeWidget .alert-heading) {
+    color: $black;
+    font-weight: 600;
+    font-size: 1rem;
+
+    * {
+        color: $black;
+        font-weight: 600;
+        font-size: 1rem;
+    }
+}
 </style>

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -138,6 +138,7 @@ div.appointment-type-question div.button-question div.col div.button-content {
     padding-right: 0.5rem;
 }
 div.appointment-type-question div.button-question div.question-text span {
-    font-weight: 500;
+    font-weight: 600;
+    font-family: UrbanistRegular;
 }
 </style>