jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Cash 1042 header and progress bar style updates
This commit is contained in:
bmauger 2025-07-29 19:41:03 -04:00 committed by GitHub
commit fedd43f54e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 131 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/constants/progress-bar-mapper.js
View file

@ -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: {

10
src/experiment-components/donation-block.vue
View file

@ -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;
}
}
}

10
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -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;

12
src/fmg-components/nav-bar/nav-bar.vue
View file

@ -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;
}

78
src/layouts/confirmation/confirmation.vue
View file

@ -1,15 +1,13 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles position-relative">
<div>
<div class="container-fluid pb-2">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
hideSalesforceWebchatLaunchButton />
</div>
<loadingModal notFullScreen 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">
<div class="header-container">
<img :src="ScheduleConfirmationImage" />
<span v-html="ScheduleConfirmationText"></span>
</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;

9
src/layouts/customer-details/customer-details.vue
View file

@ -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>

31
src/layouts/mobile-details/mobile-details.vue
View file

@ -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">
<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 position-relative">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<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() {
return this.getCmsContent("MobileLocationModalWidget", "HeaderText");
AppointmentDateAndTime() {
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>

3
src/layouts/quote/quote.vue
View file

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

6
src/layouts/return-user/return-user.vue
View file

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

3
src/layouts/vin-lookup/vin-information/vin-information.vue
View file

@ -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;