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

2025-08-15 11:33:47 -04:00 · 2025-08-15 11:33:47 -04:00 · 8cd0811c71
commit 8cd0811c71
parent f5f57e364c ab46dce800
13 changed files with 94 additions and 63 deletions
--- a/src/constants/progress-bar-mapper.js
+++ b/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: {
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/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;
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@ -9,8 +9,7 @@
        tabindex="-1"
        aria-labelledby="ModalComponentLabel"
        @keypress.enter="onEnter"
-        aria-hidden="true"
-        @click.self="closeModal">
+        aria-hidden="true">
        <!--Close modal when clicking other than close button-->
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
--- a/src/experiment-components/service-package-radio-for-afterpay.vue
+++ b/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;
--- a/src/experiment-components/service-package-radio.vue
+++ b/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 {
--- a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
+++ b/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">
-            <p class="small fw-normal sub-text">
-                <span v-html="boldedSubHeaderText"></span>
+        <div
+            v-if="subText"
+            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>
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
+++ b/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">
--- a/src/layouts/estimate/estimate.vue
+++ b/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 page-container-grouped-styles estimate">
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+        <div class="container-fluid page-container-grouped-styles">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <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>
-                        <div v-html="this.VinLookupQuestionBodyText2"></div>
-                        <div
-                            class="select-an-option"
-                            v-html="this.VinLookupQuestionFooterText"></div>
+                        <p class="header-copy mb-2 text-md-center" v-html="HeaderText"></p>
+
+                        <p
+                            class="header-sub-copy mb-5 text-md-center"
+                            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>
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@ -129,10 +129,7 @@ export default {
    }

    .callout {
-        font-family:
-            UrbanistSemibold Arial,
-            Helvetica,
-            sans-serif;
+        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
    }

    > div:first-of-type {
--- a/src/layouts/quote/quote.vue
+++ b/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;
--- 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
@ -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;
--- a/src/layouts/schedule/schedule.vue
+++ b/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>
--- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
+++ b/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>