+
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
= Available
-
Sunday
- S
+ SUN
Monday
- M
+ MON
Tuesday
- T
+ TUE
Wednesday
- W
+ WED
Thursday
- T
+ THU
Friday
- F
+ FRI
Saturday
- S
+ SAT
View more dates
+
@@ -779,6 +838,10 @@ export default {
fieldset {
flex-grow: 1;
position: relative;
+
+ .view-more-dates {
+ color: $blue;
+ }
}
.loader {
height: 2rem;
@@ -791,7 +854,7 @@ export default {
}
.calendar-grid-container {
margin: 0 auto 2rem auto;
- max-width: 414px;
+ max-width: 400px;
position: relative;
transition:
height ease 2s,
@@ -800,15 +863,22 @@ export default {
grid-template-columns: repeat(7, 1fr);
justify-content: center;
align-items: center;
- padding: 0 0.75rem;
+ padding: 0;
+ @include media-breakpoint-up(md) {
+ padding: 0 0.75rem;
+ }
opacity: 1;
.grid-item {
text-align: center;
margin: 10px 3px;
- font-size: 0.875rem;
+ font-size: 0.75rem;
line-height: 1.5;
+ &.caption {
+ color: $gray-550;
+ }
+
&.first-day-,
&.first-day-0 {
grid-column-start: 1;
@@ -841,9 +911,11 @@ export default {
.month-year {
grid-area: 1 / 1 / 2 / 5;
- text-transform: uppercase;
- font-weight: 300;
+ font-family: AvertaBold;
letter-spacing: 0.75px;
+ color: $black;
+ justify-content: center;
+ margin-bottom: 0.5rem;
}
.legend {
grid-area: 1 / 5 / 2 / 8;
@@ -921,7 +993,6 @@ export default {
label {
position: relative;
- cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
@@ -963,9 +1034,14 @@ export default {
&.selectable-day {
label {
background-color: $blue-100;
- min-width: 2.5rem;
- width: 2.5rem;
+ min-width: 2.75rem;
+ width: 2.75rem;
border-radius: 50%;
+ cursor: pointer;
+ @include media-breakpoint-up(md) {
+ min-width: 3rem;
+ width: 3rem;
+ }
}
}
&.unavailable-day {
@@ -1090,8 +1166,8 @@ export default {
}
}
}
- // pricing by day override styles
- &.pricing-by-day {
+ // new calendar styling overrides
+ &.calendar-2025 {
.calendar-grid-container .grid-item {
margin: 0 0 0.15rem 0;
}
@@ -1115,7 +1191,7 @@ export default {
&:focus + label,
&:checked:focus + label {
box-shadow: none;
- background-color: $white;
+ background-color: $blue-100;
color: $black;
}
&:checked + label {
@@ -1142,16 +1218,20 @@ export default {
label {
color: $black;
background-color: $blue-100;
- min-width: 2.5rem;
- width: 2.5rem;
+ min-width: 2.75rem;
+ width: 2.75rem;
border-radius: 0.25rem;
+ @include media-breakpoint-up(md) {
+ min-width: 3rem;
+ width: 3rem;
+ }
}
}
&.current-day {
label:after {
- margin-top: 0.2rem;
+ margin-top: -0.25rem;
position: relative;
- top: 0;
+ top: 0.5rem;
}
}
}
@@ -1189,6 +1269,27 @@ export default {
}
}
}
+ :deep(.button-inner-wrapper) {
+ display: flex;
+ max-width: 100%;
+ flex-wrap: wrap;
+ gap: 0 0.5rem;
+ justify-content: center;
+
+ & > div {
+ flex: 0 0 calc(50% - 0.25rem);
+ }
+ }
+ :deep(.button-question.is-mobile-appointment) {
+ .button-inner-wrapper > div {
+ flex: 0 0 100%;
+ }
+ }
+ :deep(.button-question.is-drop-off-appointment) {
+ .button-inner-wrapper > div {
+ flex: 0 0 100%;
+ }
+ }
}
.btn-link {
diff --git a/src/layouts/schedule/schedule.spec.js b/src/layouts/schedule/schedule.spec.js
index 3a389aec5..f3281d34e 100644
--- a/src/layouts/schedule/schedule.spec.js
+++ b/src/layouts/schedule/schedule.spec.js
@@ -441,52 +441,6 @@ describe("schedule.vue...", () => {
expect(testValue).toStrictEqual("01234");
});
- test("openInshopTimeSlotsModal should trigger openModal method", () => {
- // Arrange
- const { wrapper } = setupMocks({});
- wrapper.vm.selectableDatesData = {
- days: [],
- };
-
- // Act
- wrapper.vm.openInshopTimeSlotsModal();
-
- // Assert
- expect(wrapper.vm.$refs.timeSlotModalQuestion.openModal).toBeCalled();
- });
-
- test("timeSlotModalClosed should null any selected date when there's no route code", () => {
- // Arrange
- const { wrapper } = setupMocks({});
- wrapper.vm.selectableDatesData = {
- days: [],
- };
-
- wrapper.setData({
- selectedDate: "1980-05-05",
- });
-
- const selectedTimeSlotInfo = {
- timeSlot: {
- date: "2019-01-01",
- startTime: "09:00",
- endTime: "10:00",
- routeCode: null,
- },
- isPremiumAppointment: null,
- };
-
- wrapper.setData({
- selectedTimeSlotInfo: selectedTimeSlotInfo,
- });
-
- // Act
- wrapper.vm.timeSlotModalClosed();
-
- // Assert
- expect(wrapper.vm.selectedDate).toBe(null);
- });
-
test("getDisplayTextForMilitaryTime should return the correctly formatted string", () => {
// Arrange
const { wrapper } = setupMocks({});
@@ -666,7 +620,6 @@ function setupMocks({ customMountOptions }) {
wrapper.vm.$refs.datePicker.initializeComponent = jest.fn();
wrapper.vm.$refs.locationAlerts.initializeComponent = jest.fn();
wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
- wrapper.vm.$refs.timeSlotModalQuestion.openModal = jest.fn();
return { wrapper };
}
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index c3081d0fe..b1e04a734 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,7 +1,7 @@