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

CASH-464: final styling changes

Browse source
This commit is contained in:
Adam Caouette 2025-04-24 11:17:50 -04:00
parent 0add6bd7ac
commit 5500ced694
4 changed files with 103 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/digital-components/button-question/button-question.vue
View file

@ -31,7 +31,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
: "Select an option below." : "Select an option below."
}} }}
</legend> </legend>
<div :class="getComponentLoopWrapperClasses"> <div :class="getComponentLoopWrapperClasses" class="button-inner-wrapper">
<div <div
:class="getComponentWrapperClasses" :class="getComponentWrapperClasses"
v-for="answer in buttonsInfo" v-for="answer in buttonsInfo"

59
src/digital-components/date-picker/date-picker.vue
View file

@ -13,7 +13,7 @@
hideSomeDaysForInitialView ? 'partial-month-initial-view' : '', hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
month.monthClass, month.monthClass,
]"> ]">
<div class="month-year body-small d-flex align-items-center small"> <div class="month-year body-small d-flex align-items-center">
{{ month.monthLabel }} {{ month.yearNum?.toString() }} {{ month.monthLabel }} {{ month.yearNum?.toString() }}
</div> </div>
<div <div
@ -22,36 +22,35 @@
<span class="legend-circle me-1"></span> <span class="legend-circle me-1"></span>
&equals; Available &equals; Available
</div> </div>
<div class="separator-line"></div>
<div class="nav-back ps-3"><button></button></div> <div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div> <div class="nav-forward pe-3"><button></button></div>
<div class="grid-item caption"> <div class="grid-item caption">
<span class="sr-only">Sunday</span> <span class="sr-only">Sunday</span>
S SUN
</div> </div>
<div class="grid-item caption"> <div class="grid-item caption">
<span class="sr-only">Monday</span> <span class="sr-only">Monday</span>
M MON
</div> </div>
<div class="grid-item caption"> <div class="grid-item caption">
<span class="sr-only">Tuesday</span> <span class="sr-only">Tuesday</span>
T TUE
</div> </div>
<div class="grid-item caption"> <div class="grid-item caption">
<span class="sr-only">Wednesday</span> <span class="sr-only">Wednesday</span>
W WED
</div> </div>
<div class="grid-item caption"> <div class="grid-item caption">
<span class="sr-only">Thursday</span> <span class="sr-only">Thursday</span>
T THU
</div> </div>
<div class="grid-item caption"> <div class="grid-item caption">
<span class="sr-only">Friday</span> <span class="sr-only">Friday</span>
F FRI
</div> </div>
<div class="grid-item caption"> <div class="grid-item caption">
<span class="sr-only">Saturday</span> <span class="sr-only">Saturday</span>
S SAT
</div> </div>
<div <div
v-for="date in month.dates" v-for="date in month.dates"
@ -93,7 +92,7 @@
<button <button
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton" v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
type="button" type="button"
class="btn btn-link" class="btn btn-link view-more-dates"
id="viewMoreDates" id="viewMoreDates"
:disabled="isLoading" :disabled="isLoading"
@click="showAnotherMonth"> @click="showAnotherMonth">
@ -112,11 +111,11 @@
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal" overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
:selectedDate="selectedDate" :selectedDate="selectedDate"
:appointmentType="appointmentType" :appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee" :premiumAppointmentFee="premiumAppointmentFee"
:displayWaitList="displayWaitList" :displayWaitList="displayWaitList"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate" :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum" :estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
:estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum" :estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
@waitListRequested="handleWaitListRequested" @waitListRequested="handleWaitListRequested"
@time-slot-modal-closed="timeSlotModalClosed" /> @time-slot-modal-closed="timeSlotModalClosed" />
</fieldset> </fieldset>
@ -198,6 +197,11 @@ export default {
pricingByDayUpcharge: Number, pricingByDayUpcharge: Number,
isPricingByDayExperiment: Boolean, isPricingByDayExperiment: Boolean,
timeSlotsForSelectedDate: Object, timeSlotsForSelectedDate: Object,
appointmentType: String,
premiumAppointmentFee: Object,
estimatedServiceMinutesMinimum: Number,
estimatedServiceMinutesMaximum: Number,
displayWaitList: Boolean,
}, },
setup(props) { setup(props) {
const uuid = uuidv4(); const uuid = uuidv4();
@ -792,6 +796,9 @@ export default {
getSupportingItems() { getSupportingItems() {
return store.getters.lineItems.supportingItems; return store.getters.lineItems.supportingItems;
}, },
handleWaitListRequested(value) {
this.$emit("waitListRequested", value);
},
}, },
watch: { watch: {
modelValue(newValue) { modelValue(newValue) {
@ -831,6 +838,10 @@ export default {
fieldset { fieldset {
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
.view-more-dates {
color: $blue;
}
} }
.loader { .loader {
height: 2rem; height: 2rem;
@ -858,9 +869,13 @@ export default {
.grid-item { .grid-item {
text-align: center; text-align: center;
margin: 10px 3px; margin: 10px 3px;
font-size: 0.875rem; font-size: 0.75rem;
line-height: 1.5; line-height: 1.5;
&.caption {
color: $gray-550;
}
&.first-day-, &.first-day-,
&.first-day-0 { &.first-day-0 {
grid-column-start: 1; grid-column-start: 1;
@ -893,9 +908,11 @@ export default {
.month-year { .month-year {
grid-area: 1 / 1 / 2 / 5; grid-area: 1 / 1 / 2 / 5;
text-transform: uppercase; font-family: AvertaBold;
font-weight: 300;
letter-spacing: 0.75px; letter-spacing: 0.75px;
color: $black;
justify-content: center;
margin-bottom: 0.5rem;
} }
.legend { .legend {
grid-area: 1 / 5 / 2 / 8; grid-area: 1 / 5 / 2 / 8;
@ -1241,6 +1258,16 @@ export default {
} }
} }
} }
:deep(.button-inner-wrapper) {
display: flex;
max-width: 100%;
flex-wrap: wrap;
gap: 0 0.5rem;
& > div {
flex: 0 0 calc(50% - 0.25rem);
}
}
} }
.btn-link { .btn-link {

59
src/layouts/schedule/schedule.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <div class="container-fluid page-container-grouped-styles page-schedule">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -14,7 +14,7 @@
<textBlock <textBlock
cmsWidgetName="ChangeShopLink" cmsWidgetName="ChangeShopLink"
justifyText="center" justifyText="center"
class="mb-3 text-link-small" class="mb-5 text-link-small change-location"
marginTopSizeOverride="1" /> marginTopSizeOverride="1" />
</template> </template>
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" /> <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
@ -26,13 +26,23 @@
class="text-link-small" class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod" :customSelectableDatesCallback="getAvailableDatesMethod"
validationRules="date-required" validationRules="date-required"
@date-clicked="handleDateClicked"
:pricingByDayBasePrice="pricingByDayBasePrice" :pricingByDayBasePrice="pricingByDayBasePrice"
:pricingByDayUpcharge="pricingByDayUpcharge" :pricingByDayUpcharge="pricingByDayUpcharge"
:showPricingByDay="showPricingByDay" :showPricingByDay="showPricingByDay"
:isPricingByDayExperiment="isPricingByDayExperiment" :isPricingByDayExperiment="isPricingByDayExperiment"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate" :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
@TimeSlotSelected="updateTimeSlot" @TimeSlotSelected="updateTimeSlot"
@date-clicked="handleDateClicked" /> :displayWaitList="displayWaitList"
@waitListRequested="handleWaitListRequested" />
<navbar <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
ref="navbar" ref="navbar"
@ -717,27 +727,32 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.text-link-small { .page-schedule {
a, .text-link-small {
.btn-link { a,
width: auto; .btn-link {
margin: 0 auto; width: auto;
height: auto; margin: 0 auto;
font-size: 0.875rem; height: auto;
line-height: 1.5; font-size: 0.875rem;
padding: 0; line-height: 1.75;
border-radius: 0; padding: 0;
&:focus { border-radius: 0;
outline: 1px solid $blue; &:focus {
} outline: 1px solid $blue;
@include media-breakpoint-up(md) { }
font-size: 1rem; @include media-breakpoint-up(md) {
font-size: 1rem;
}
} }
} }
} .funnel-sub-header {
.funnel-sub-header { h5.dark-header {
h5.dark-header { margin-bottom: 0.25rem;
margin-bottom: 0.25rem; }
}
.change-location a {
font-family: AvertaSemibold;
} }
} }
</style> </style>

47
src/layouts/schedule/time-slot-question/time-slot-question.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div class="time-slots-modal"> <div class="time-slots-question">
<textBlock customText="Select a time:" justifyText="center" class="time-slot-header" />
<textBlock <textBlock
v-show="durationTextBlockCopy" v-show="durationTextBlockCopy"
:customText="durationTextBlockCopy" :customText="durationTextBlockCopy"
@ -10,7 +11,7 @@
ref="buttonQuestion" ref="buttonQuestion"
buttonTypeString="timeSlotModalListButton" buttonTypeString="timeSlotModalListButton"
:buttonTypeObject="timeSlotModalListButton" :buttonTypeObject="timeSlotModalListButton"
class="mt-5" class="mt-4"
:answers="availableTimeSlots" :answers="availableTimeSlots"
groupName="chooseTimeSlot" groupName="chooseTimeSlot"
textPosition="text-center" textPosition="text-center"
@ -20,8 +21,16 @@
<div <div
v-if="hasWaitListExperiment && displayWaitListFeature" v-if="hasWaitListExperiment && displayWaitListFeature"
class="mt-5 bg-light rounded waitlist"> class="mt-5 bg-light rounded waitlist">
<textBlock marginTopSizeOverride="0" /> <textBlock
<checkboxQuestion class="mt-3" v-model="waitListRequested" @click="waitListChecked" /> cmsWidgetName="WaitListLabelWidget"
typeStyle="medium"
fontWeight="600"
marginTopSizeOverride="0" />
<checkboxQuestion
class="mt-3"
cmsWidgetName="WaitListQuestionWidget"
v-model="waitListRequested"
@click="waitListChecked" />
</div> </div>
<div <div
v-if="waitListRequested" v-if="waitListRequested"
@ -88,7 +97,6 @@ defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
export default { export default {
name: "time-slot-no-modal-question", name: "time-slot-no-modal-question",
// Removed 'modal' emits
emits: ["update:modelValue", "TimeSlotSelected", "click-event"], emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
props: { props: {
modelValue: { modelValue: {
@ -295,22 +303,9 @@ export default {
} }
}, },
isSameDay() { isSameDay() {
console.log(
"%c TSQ - calculating isSameDay; this.selectedDate ",
"color: beige;",
this.selectedDate
);
console.log(
"%c TSQ - calculating isSameDay; IS THIS WORKING OK? ",
"color: beige;"
);
debugger; // eslint-disable-line no-debugger
if (!this.timeSlotsForSelectedDate) { if (!this.timeSlotsForSelectedDate) {
return false; return false;
} }
// const selectedDate = this.timeSlotsForSelectedDate.date;
const todaysDate = new Date().toISOString().split("T")[0]; const todaysDate = new Date().toISOString().split("T")[0];
return this.selectedDate === todaysDate; return this.selectedDate === todaysDate;
}, },
@ -554,13 +549,16 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.time-slots-modal { .time-slots-question {
.modal-header { border-top: 1px solid $gray-500;
padding-bottom: 0; margin-top: 1.5rem;
margin-bottom: 0 !important;
.time-slot-header {
font-family: AvertaBold;
margin-top: 1.5rem;
} }
.text-block.duration-text-block { .text-block.duration-text-block {
margin-top: 4px !important; margin-top: 0;
} }
.supplemental-information { .supplemental-information {
line-height: 1.5rem; line-height: 1.5rem;
@ -577,8 +575,7 @@ export default {
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
padding: 16px; padding: 16px;
margin-top: 16px;
margin-bottom: -8px;
.ui-checkbox { .ui-checkbox {
padding-left: 0px; padding-left: 0px;
input { input {