+
{{ 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;
@@ -790,8 +853,8 @@ export default {
}
}
.calendar-grid-container {
- margin: 0 auto 2rem auto;
- max-width: 414px;
+ margin: 0 auto 1rem auto;
+ 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 {
@@ -999,12 +1075,16 @@ export default {
border-radius: 50%;
background-color: $black;
position: absolute;
- top: 28px;
+ top: 1.875rem;
}
.first-day {
color: $blue;
}
}
+ input[type="radio"]:checked + label:after {
+ background-color: $black;
+ top: 2rem;
+ }
}
}
@@ -1090,8 +1170,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 +1195,7 @@ export default {
&:focus + label,
&:checked:focus + label {
box-shadow: none;
- background-color: $white;
+ background-color: $blue-100;
color: $black;
}
&:checked + label {
@@ -1130,6 +1210,7 @@ export default {
}
}
label {
+ color: $gray-500;
flex-direction: column;
height: 2.5rem;
width: 100%;
@@ -1142,16 +1223,21 @@ 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;
- position: relative;
- top: 0;
+ label {
+ font-weight: 600;
+ font-family: "AvertaSemibold";
+ color: $black;
+ font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
}
}
}
@@ -1162,6 +1248,7 @@ export default {
color: $black;
font-weight: 400;
font-family: "AvertaSemibold";
+ font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
&.price {
font-family: "AvertaRegular";
@@ -1189,6 +1276,26 @@ 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);
+ }
+ }
+ :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/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 74cfc0964..7b89b7e57 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -119,12 +119,14 @@ export default {
},
onModalOpened() {
this.onModalOpenedCallback?.();
+ this.$emit("isModalOpened", true);
},
onModalClosed() {
this.resetButtonStyle();
this.onModalClosedCallback?.();
if (this.suppressPageScroll)
document.querySelector("body").classList.remove("prevent-modal-scroll");
+ this.$emit("isModalOpened", false);
},
openModal() {
if (this.suppressPageScroll)
diff --git a/src/digital-components/salesforce-webchat/salesforce-helper-dev.js b/src/digital-components/salesforce-webchat/salesforce-helper-dev.js
new file mode 100644
index 000000000..fb29bc9eb
--- /dev/null
+++ b/src/digital-components/salesforce-webchat/salesforce-helper-dev.js
@@ -0,0 +1,66 @@
+/*
+The code below is generated from salesforce but modified in the following ways:
+ * Only the javascript inside the second
+
+
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index 092224551..33a398428 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -1,12 +1,21 @@
-
-
![Safelite logo]()
-
-
-
-
+
@@ -27,6 +36,7 @@ import alert from "@/ux-components/alert/alert";
import eventBus from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";
import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
+//import salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
// Constants
@@ -41,6 +51,10 @@ export default {
},
props: {
cmsWidgetName: String,
+ hideSalesforceWebchatLaunchButton: {
+ type: Boolean,
+ default: true,
+ },
},
computed: {
imageSrc() {
@@ -64,6 +78,7 @@ export default {
components: {
alert,
menuModal,
+ //salesforceWebchat,
progressBar,
},
mounted() {
@@ -93,16 +108,23 @@ export default {
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index 4dc07f3a5..8f68ab6e9 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -11,21 +11,6 @@