CASH-1042 WIP

src/constants/progress-bar-mapper.js

@@ -1,27 +1,100 @@
-const pagePercentageMapper = {
-    vehicle: 7,
-    "vehicle-damage": 7.14,
-    estimate: 10.71,
-    "service-zip": 14.28,
-    "vin-lookup": 14.28,
-    "license-plate-lookup": 14.28,
-    "address-lookup": 14.28,
-    "address-vehicles": 17.85,
-    "part-questions": 21.42,
-    "molding-questions": 21.42,
-    "vehicle-parts": 21.42,
-    "capability-questions": 21.42,
-    quote: 39,
-    "insurance-company": 52,
-    "service-location": 60,
-    schedule: 70.5,
-    "mobile-details": 76,
-    "customer-details": 84,
-    "payment-method": 92,
-    payment: 96,
-    confirmation: 100,
+export const pageProgressMapper = {
+    //Combine progress bar slide percent and button steps
+    vehicle: {
+        percent: 7,
+        step: 1,
+    },
+    "vehicle-damage": {
+        percent: 10,
+        step: 1,
+    },
+    estimate: {
+        percent: 14,
+        step: 1,
+    },
+    "service-zip": {
+        percent: 18,
+        step: 1,
+    },
+    "vin-lookup": {
+        percent: 18,
+        step: 1,
+    },
+    "license-plate-lookup": {
+        percent: 18,
+        step: 1,
+    },
+    "address-lookup": {
+        percent: 18,
+        step: 1,
+    },
+    "address-vehicles": {
+        percent: 25,
+        step: 1,
+    },
+    "part-questions": {
+        percent: 30,
+        step: 1,
+    },
+    "molding-questions": {
+        percent: 30,
+        step: 1,
+    },
+    "vehicle-parts": {
+        percent: 30,
+        step: 1,
+    },
+    "capability-questions": {
+        percent: 30,
+        step: 1,
+    },
+    quote: {
+        percent: 39, //Must be 39
+        step: 2,
+    },
+    "insurance-company": {
+        percent: 52,
+        step: 2,
+    },
+    "service-location": {
+        percent: 60,
+        step: 2,
+    },
+    schedule: {
+        percent: 70.5, //Must be 70.5
+        step: 3,
+    },
+    "mobile-details": {
+        percent: 76,
+        step: 3,
+    },
+    "customer-details": {
+        percent: 84,
+        step: 3,
+    },
+    "payment-method": {
+        percent: 92, //Must be 92
+        step: 3,
+    },
+    payment: {
+        percent: 96,
+        step: 4,
+    },
+    confirmation: {
+        percent: 100,
+        step: 4,
+    },
 };
 
 export const getProgressBarPercentage = (page) => {
-    return pagePercentageMapper[page] || 0;
+    return pageProgressMapper[page]?.percent || 0;
+};
+
+export const getProgressBarStep = (page) => {
+    return pageProgressMapper[page]?.step || 1;
+};
+
+export const getTotalSteps = () => {
+    // Find the highest step value
+    return Math.max(...Object.values(pageProgressMapper).map((v) => v.step));
 };

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

@@ -152,6 +152,7 @@ export default {
         border: 1px solid $gray-500;
         border-radius: 0.5rem;
         min-height: 3rem;
+        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
         @include media-breakpoint-up(md) {
             min-height: 3.5rem;
         }

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

@@ -335,6 +335,7 @@ export default {
         border-radius: 0.5rem;
         min-height: 3rem;
         padding: 0.75rem 1rem;
+        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
         @include media-breakpoint-up(md) {
             padding: 1rem;
             min-height: 3.5rem;

src/fmg-components/funnel-footer/funnel-footer.vue

@@ -76,12 +76,16 @@ export default {
         :deep(a) {
             text-decoration: none;
             &.new-window-link {
+                font-family: Urbanist, Arial, Helvetica, sans-serif;
                 margin: 0 0.75rem;
                 color: $gray-600;
+                font-weight: 400;
             }
             &.navigation-link {
+                font-family: Urbanist, Arial, Helvetica, sans-serif;
                 margin: 0 0.75rem;
                 color: $gray-600;
+                font-weight: 400;
             }
         }
 

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

@@ -5,7 +5,9 @@
         </div>
         <div class="container d-flex">
             <div class="site-logo">
-                <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
+                <a href="https://safelite.com">
+                    <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
+                </a>
             </div>
             <div class="button-container webchat">
                 <span class="webchat d-flex">

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -7,7 +7,7 @@
             @click="toggleModal"
             aria-label="Hamburger Menu (modal window)">
             <span v-if="isActive">Close</span>
-            <span v-else>Step {{ currentStepNumber }} of 4 </span>
+            <span v-else>Step {{ currentStepNumber }} of 4</span>
             <div class="bars ms-2">
                 <div class="bar1"></div>
                 <div class="bar2"></div>
@@ -39,10 +39,26 @@
                             <span class="dot4"></span>
                         </div>
                         <div class="d-flex flex-column justify-content-between">
-                            <div class="step-containers"><span class="step-number">Step 1 of 4</span><br><span class="step-name">Vehicle</span></div>
-                            <div class="step-containers"><span class="step-number">Step 2 of 4</span><br><span class="step-name">Quote</span></div>
-                            <div class="step-containers"><span class="step-number">Step 3 of 4</span><br><span class="step-name">Schedule</span></div>
-                            <div class="step-containers"><span class="step-number">Step 4 of 4</span><br><span class="step-name">Review</span></div>
+                            <div class="step-containers">
+                                <span class="step-number">Step 1 of 4</span>
+                                <br />
+                                <span class="step-name">Vehicle</span>
+                            </div>
+                            <div class="step-containers">
+                                <span class="step-number">Step 2 of 4</span>
+                                <br />
+                                <span class="step-name">Quote</span>
+                            </div>
+                            <div class="step-containers">
+                                <span class="step-number">Step 3 of 4</span>
+                                <br />
+                                <span class="step-name">Schedule</span>
+                            </div>
+                            <div class="step-containers">
+                                <span class="step-number">Step 4 of 4</span>
+                                <br />
+                                <span class="step-name">Review</span>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -53,6 +69,7 @@
 
 <script>
 import { Modal } from "bootstrap";
+import { getProgressBarStep, getTotalSteps } from "@/constants/progress-bar-mapper";
 import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 import baseMixin from "@/mixins/base-mixin.js";
 
@@ -88,36 +105,15 @@ export default {
     },
     computed: {
         currentStepNumber() {
-            // Use the same mapping as progress-bar-mapper.js for consistency
-            const stepMap = {
-                vehicle: 1,
-                "vehicle-damage": 1,
-                estimate: 1,
-                "service-zip": 1,
-                "vin-lookup": 1,
-                "license-plate-lookup": 1,
-                "address-lookup": 1,
-                "address-vehicles": 1,
-                "part-questions": 1,
-                "molding-questions": 1,
-                "vehicle-parts": 1,
-                "capability-questions": 1,
-                quote: 2,
-                "insurance-company": 2,
-                "service-location": 2,
-                schedule: 3,
-                "mobile-details": 3,
-                "customer-details": 3,
-                "payment-method": 4,
-                payment: 4,
-                confirmation: 4,
-            };
-            return stepMap[this.$route.name] || 1;
-        }
+            return getProgressBarStep(this.$route.name);
+        },
+        totalSteps() {
+            return getTotalSteps();
+        },
     },
     components: {
         progressBar,
-    }
+    },
 };
 </script>
 
@@ -129,7 +125,7 @@ export default {
             width: auto;
             height: auto;
             border-radius: 1.5rem;
-            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
             background-color: $white;
             position: relative;
             display: flex;
@@ -198,7 +194,7 @@ export default {
         &.show .modal-dialog {
             transform: translateX(0);
         }
-        background-color: rgba(0, 0, 0, 0.5); 
+        background-color: rgba(0, 0, 0, 0.5);
         height: calc(100% - 68px);
         top: 68px;
         border-top: 1px solid $gray-300;
@@ -242,7 +238,7 @@ export default {
                         border: 1px solid $gray;
                         left: 1px;
                     }
-                    .dot1 {                        
+                    .dot1 {
                         top: 1px;
                     }
                     .dot2 {
@@ -256,7 +252,7 @@ export default {
                     }
                 }
                 .step-number {
-                    font-size: .75rem;
+                    font-size: 0.75rem;
                 }
                 .step-name {
                     font-size: 1.25rem;

src/fmg-components/funnel-header/progress-bar/progress-bar.vue

@@ -63,7 +63,7 @@ export default {
         },
         barClass() {
             return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer";
-        }
+        },
     },
 };
 </script>

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

@@ -11,7 +11,9 @@
                     @click-event="clickEvent" />
             </h5>
         </div>
-        <div v-if="subText" class="d-flex align-items-center overflow-hidden mt-1">
+        <div
+            v-if="subText"
+            class="d-flex align-self-start align-self-md-center overflow-hidden mt-1">
             <p class="small fw-normal sub-text">
                 <span>
                     {{ subText }}

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

@@ -8,18 +8,6 @@
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <alert
-                        ref="alertFewMoreQuestions"
-                        cmsWidgetName="alertWidget"
-                        class="my-5"
-                        alertClass="alert-warning"
-                        :manualHeadline="alertFewMoreQuestionsHeader"
-                        :manualCopy="alertFewMoreQuestionsCopy"
-                        v-bind:isDismissible="false" />
-                </div>
-            </div>
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
@@ -50,7 +38,6 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import alert from "@/ux-components/alert/alert";
 import questionChain from "@/digital-components/question-chain/question-chain";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
@@ -92,7 +79,6 @@ export default {
     },
     components: {
         funnelHeader,
-        alert,
         questionChain,
         funnelSubHeader,
         navbar,
@@ -104,7 +90,7 @@ export default {
 <style lang="scss">
 .questions-page {
     .question-text {
-        margin-bottom: 0.5rem;
+        margin-bottom: 1.5rem;
 
         span {
             text-align: left;

src/layouts/address-lookup/address-lookup.vue

@@ -5,15 +5,11 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <div class="container-fluid page-container-grouped-styles" id="address-lookup">
-            <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 cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" class="mb-7"/>
 
                     <customerQuestions
                         ref="customerQuestions"

src/layouts/estimate/estimate.vue

@@ -8,6 +8,10 @@
                     <funnelSubHeader class="pb-4" 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>
                         <buttonQuestion
                             cmsWidgetName="VinLookupMethod"
                             :answers="answersFromCms"
@@ -25,6 +29,8 @@
                         :isForwardActionDisabled="!meta.valid"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
+
+                    <div class="text-center" v-html="this.VinLookupQuestionFooterText2"></div>
                 </div>
             </div>
         </div>
@@ -225,6 +231,15 @@ export default {
         VinLookupQuestionText() {
             return this.getCmsContent("VinLookupQuestion", "BodyText");
         },
+        VinLookupQuestionBodyText2() {
+            return this.getCmsContent("VinLookupQuestion", "BodyText2");
+        },
+        VinLookupQuestionFooterText() {
+            return this.getCmsContent("VinLookupQuestion", "FooterText");
+        },
+        VinLookupQuestionFooterText2() {
+            return this.getCmsContent("VinLookupQuestion", "FooterText2");
+        },
     },
     components: {
         funnelHeader,
@@ -239,14 +254,12 @@ export default {
 
 <style lang="scss">
 .vinlookupquestion p {
-    margin-bottom: 0;
+    font-size: 1.25rem;
 }
-.vinlookupquestion strong {
-    font-weight: 500;
-    color: $black;
-}
-.vinlookupquestion p:nth-child(2) {
-    font-size: 0.875rem;
+
+.select-an-option {
+    font-family: UrbanistSemibold;
+    font-weight: 600;
     margin-bottom: 1rem;
 }
 </style>

src/layouts/insurance-company/insurance-company.vue

@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <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">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
 
                     <div v-if="originalList.length > 0">

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -1,13 +1,9 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <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">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <textboxQuestion

src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue

@@ -112,6 +112,7 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {

src/layouts/quote/quote.vue

@@ -910,17 +910,17 @@ export default {
             left: 1rem;
             bottom: 1rem;
             @include media-breakpoint-up(lg) {
-                    left: 6rem;
-                }
+                left: 6rem;
             }
+        }
         .col-auto {
             width: -webkit-fill-available;
         }
         .col-auto {
             width: -moz-available;
         }
-        }
     }
+}
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;
 

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

@@ -3,9 +3,9 @@
         <div class="return-user small-question-text">
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
+            <div class="container page-container-grouped-styles">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
                         <funnelSubHeader
                             class="justify-content-center d-flex"
                             ref="funnelSubHeader"

src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue

@@ -94,6 +94,7 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span.premium-appointment-price {
         position: absolute;

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -147,6 +147,7 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {

src/layouts/service-zip/service-zip.vue

@@ -355,9 +355,6 @@ export default {
 </script>
 
 <style lang="scss">
-.vinlookupquestion p {
-    margin-bottom: 0;
-}
 .vinlookupquestion strong {
     font-weight: 500;
     color: $black;

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -3,21 +3,13 @@
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container page-container-grouped-styles">
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                        <funnelSubHeader
-                            ref="funnelSubHeader"
-                            cmsWidgetName="FunnelSubHeaderWidget" />
-                    </div>
-                </div>
+            <div class="container page-container-grouped-styles">
                 <div class="row">
                     <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                        <alert
-                            class="rounded border-0 shadow-sm"
-                            alertClass="alert-warning"
-                            cmsWidgetName="AlertWidget"
-                            :isDismissible="false" />
+                        <funnelSubHeader
+                            ref="funnelSubHeader"
+                            cmsWidgetName="FunnelSubHeaderWidget" 
+                            class="mb-7"/>
                     </div>
                 </div>
                 <div class="row">
@@ -59,7 +51,6 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import alert from "@/ux-components/alert/alert";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 // Supporting Files
@@ -240,7 +231,6 @@ export default {
         funnelHeader,
         funnelSubHeader,
         navbar,
-        alert,
         loadingModal,
         saveProgressModalQuestion,
     },

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

@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <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">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <textboxQuestion
                         class="mb-2 mt-5"

src/styles/common-styles.scss

@@ -101,4 +101,4 @@ textarea,
 option,
 .btn {
     letter-spacing: 0.03rem;
-}
+}

src/ux-components/button-main/button-main.vue

@@ -63,6 +63,9 @@ export default {
 
 <style lang="scss">
 .btn {
+    &:first-child:active {
+        background-color: $red;
+    }
     &.btn-primary {
         position: relative;
         background: $red;

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -43,6 +43,7 @@ export default {
 
 <style lang="scss">
 .list-button-horizontal {
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
     input[type="radio"],
     input[type="checkbox"] {
         position: absolute;

src/ux-components/list-button/list-button.vue

@@ -106,6 +106,7 @@ export default {
     width: 100%;
     outline: none;
     border-radius: 50rem;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {

src/ux-components/list-card/list-card.vue

@@ -76,6 +76,7 @@ export default {
 }
 .list-card {
     border: 1px solid $gray-500;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     &.has-error {
         input[type="checkbox"],