Merge pull request #2711 from Safelite/CASH-1042-header-and-progress-bar-style-updates

Cash 1042 header and progress bar style updates

src/constants/progress-bar-mapper.js

@@ -1,35 +1,35 @@
 export const pageProgressMapper = {
     //Combine progress bar slide percent and button steps
     vehicle: {
-        percent: 7,
-        step: 1,
-    },
-    "vehicle-damage": {
         percent: 10,
         step: 1,
     },
-    estimate: {
+    "vehicle-damage": {
         percent: 14,
         step: 1,
     },
-    "service-zip": {
+    estimate: {
         percent: 18,
         step: 1,
     },
+    "service-zip": {
+        percent: 22,
+        step: 1,
+    },
     "vin-lookup": {
-        percent: 18,
+        percent: 22,
         step: 1,
     },
     "license-plate-lookup": {
-        percent: 18,
+        percent: 22,
         step: 1,
     },
     "address-lookup": {
-        percent: 18,
+        percent: 22,
         step: 1,
     },
     "address-vehicles": {
-        percent: 25,
+        percent: 26,
         step: 1,
     },
     "part-questions": {
@@ -49,7 +49,7 @@ export const pageProgressMapper = {
         step: 1,
     },
     quote: {
-        percent: 39, //Must be 39
+        percent: 39, //The first Step 2 must be 39 so the animated bar lines up with the dot
         step: 2,
     },
     "insurance-company": {
@@ -61,7 +61,7 @@ export const pageProgressMapper = {
         step: 2,
     },
     schedule: {
-        percent: 70.5, //Must be 70.5
+        percent: 70.5, //The first Step 3 must be 70.5 so the animated bar lines up with the dot
         step: 3,
     },
     "mobile-details": {
@@ -73,7 +73,7 @@ export const pageProgressMapper = {
         step: 3,
     },
     "payment-method": {
-        percent: 92, //Must be 92
+        percent: 92, //The first Step 4 must be 92 so the animated bar lines up with the dot
         step: 3,
     },
     payment: {

src/experiment-components/donation-block.vue

@@ -317,10 +317,18 @@ export default {
         }
     }
     .custom-secondary {
-        &:hover {
+        border-radius: 0.5rem;
+        color: $blue;
+        border: 1px solid $blue;
+        &:hover,
+        &:focus,
+        &:active {
             color: $blue;
             background: transparent;
             border: 1px solid $blue;
+            box-shadow:
+                0 0 0 3px #ffffff,
+                0 0 0 5.5px $blue;
         }
     }
 }

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -19,10 +19,10 @@
                             v-if="showThisQuestionChain(questionsDatum, i)"
                             :answerKey="questionsDatum.answerKey"
                             :validationRules="validationRules" />
+                        <!-- Save your progress slot -->
+                        <slot></slot>
                     </div>
 
-                    <slot></slot>
-
                     <navbar
                         ref="navbar"
                         cmsWidgetName="FunnelFooterWidget"
@@ -88,6 +88,12 @@ export default {
 </script>
 
 <style lang="scss">
+.nav-bar {
+    margin-top: 1rem;
+}
+.save-progress-modal-question {
+    margin: 2rem 0;
+}
 .questions-page {
     .question-text {
         margin-bottom: 1.5rem;

src/fmg-components/nav-bar/nav-bar.vue

@@ -28,7 +28,7 @@
             <div
                 v-if="!isBackButtonHidden"
                 class="col-auto link-col py-1 text-break"
-                :class="[buttonSize ? 'back-centered-below mt-5' : '']">
+                :class="[buttonSize ? 'mt-5' : '']">
                 <textLink
                     linkType="navigation"
                     :text="backLink"
@@ -134,11 +134,6 @@ export default {
         width: 100%;
     }
 
-    .back-centered-below {
-        display: flex;
-        justify-content: center;
-    }
-
     @media only screen and (min-width: 340px) {
         .col,
         .col-auto,
@@ -147,11 +142,6 @@ export default {
             justify-content: flex-end;
         }
 
-        .back-centered-below {
-            display: flex;
-            justify-content: center;
-        }
-
         .btn-primary {
             width: auto;
         }

src/layouts/confirmation/confirmation.vue

@@ -1,15 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles position-relative">
+        <loadingModal notFullScreen ref="loadingModal" />
-            <div>
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                <div class="container-fluid pb-2">
+        <div class="container page-container-grouped-styles">
-                    <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
+                    <div class="header-container">
-                                cmsWidgetName="FunnelHeaderWidget"
+                        <img :src="ScheduleConfirmationImage" />
-                                ref="funnelHeader"
+                        <span v-html="ScheduleConfirmationText"></span>
-                                hideSalesforceWebchatLaunchButton />
-                        </div>
                     </div>
                     <div class="row justify-content-center">
                         <div class="col-md-6 col-xl-4">
@@ -85,7 +83,63 @@
 
                             <hr class="mb-5" />
                         </div>
+
+                        <addToCalendar
+                            mobileWidgetName="AddToCalendar_Mobile"
+                            inShopWidgetName="AddToCalendar_InShop"
+                            dropOffWidgetName="AddToCalendar_DropOff"
+                            overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
+                            allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
+                            sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
+                            :serviceLocationFullAddress="ServiceLocationFullAddress"
+                            :providerFullAddress="ProviderFullAddress"
+                            :appointmentType="AppointmentType"
+                            :scheduleDate="ScheduleDate"
+                            :scheduleStartTime="ScheduleStartTime"
+                            :scheduleEndTime="ScheduleEndTime" />
+
+                        <div class="appointment-text" v-html="AppointmentWordingText"></div>
+
+                        <textBlock
+                            :customText="AppointmentDuration"
+                            justifyText="center"
+                            typeStyle="medium"
+                            class="duration-text-block" />
                     </div>
+
+                    <div class="mt-3" v-if="shouldDisplayFosterLove">
+                        <donationBlock
+                            cmsWidgetName="DonationWidget"
+                            v-model="donationAmount"
+                            :donationValues="donationValues"
+                            :showDonationSuccess="showDonationSuccess"
+                            :showDonationError="showDonationError"
+                            @DonationAddedEvent="addDonationToOrder"
+                            ref="donationBlock" />
+                    </div>
+
+                    <hr class="mt-5 mb-0" />
+
+                    <cart
+                        v-if="ShowCart"
+                        :damage="damageInfo"
+                        :availableVaps="vaps"
+                        :allowItemRemoval="false"
+                        v-model="lineItemsWithoutDonation"
+                        :donationCartItem="donationLineItem"
+                        :showAsPaid="isPia"
+                        servicePackageOptionsCmsName="ServicePackageTitle"
+                        :isInsurance="isInsurance"
+                        :insuranceDeductible="currentDeductible"
+                        :insuranceCompanyName="insuranceCompanyName"
+                        :showInsuranceCoverageAs="showInsuranceCoverageAs"
+                        :shouldHideRecalibration="shouldHideRecalibration"
+                        :isExpandedOnLoad="false"
+                        :isItac="isItac"
+                        :isNoComp="isNoComp"
+                        :isMSRFeeApplicable="isMSRFeeApplicable" />
+
+                    <hr class="mt-4 mb-5" />
                 </div>
             </div>
         </div>
@@ -94,7 +148,6 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import navbar from "@/fmg-components/nav-bar/nav-bar";
 import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
 import cart from "@/fmg-components/cart/cart";
 import textBlock from "@/digital-components/text-block/text-block";
@@ -620,7 +673,8 @@ export default {
 .header-container {
     display: flex;
     align-items: center;
-    padding: 1rem 0;
+    justify-content: flex-start;
+    padding: 1.5rem 0 0.5rem 0;
 
     p {
         display: inline-block;

src/layouts/customer-details/customer-details.vue

@@ -51,7 +51,7 @@
                         @ForwardClicked="forwardButtonAction" />
 
                     <textBlock
-                        class="mb-5 disclaimer-block"
+                        class="mb-5"
                         cmsWidgetName="DisclaimerCopyWidget"
                         typeStyle="caption" />
                 </div>
@@ -215,10 +215,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" scoped>
-.disclaimer-block {
-    position: relative;
-    z-index: 2;
-}
-</style>

src/layouts/mobile-details/mobile-details.vue

@@ -1,15 +1,15 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-            <div class="row justify-content-center">
+        <div class="container position-relative">
-                <div class="col-md-6">
+            <div class="row">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <hr class="my-3" />
+                    <textBlock cmsWidgetName="AppointmentTimeOfService" class="time-header" />
+                    <textBlock cmsWidgetName="AppointmentDateAndTime" />
+                    <hr class="my-3" />
                     <div class="mobile-location-questions">
                         <div class="address-questions-container">
                             <mobileAddressQuestions
@@ -150,8 +150,11 @@ export default {
         },
     },
     computed: {
-        headerText() {
+        AppointmentDateAndTime() {
-            return this.getCmsContent("MobileLocationModalWidget", "HeaderText");
+            return this.getCmsContent("AppointmentDateAndTime", "Text");
+        },
+        AppointmentTimeOfService() {
+            return this.getCmsContent("AppointmentDateAndTime", "Text");
         },
     },
     components: {
@@ -166,3 +169,11 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.time-header {
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+    font-weight: 600;
+    color: $black;
+}
+</style>

src/layouts/quote/quote.vue

@@ -927,6 +927,9 @@ export default {
 }
 
 .funnel-sub-header {
+    :deep(h5) {
+        text-align: center;
+    }
     p {
         font-size: 1rem;
     }

src/layouts/return-user/return-user.vue

@@ -117,4 +117,10 @@ export default {
         margin-top: 14rem;
     }
 }
+:deep(.menu-modal-container) {
+    display: none;
+}
+:deep(.progress-bar-outer) {
+    opacity: 0;
+}
 </style>

src/layouts/vin-lookup/vin-information/vin-information.vue

@@ -57,6 +57,9 @@ export default {
         font-size: 0.875rem;
     }
     .vin-toggle {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         &:after {
             content: "";
             transition: all 0.5s ease;