+
@@ -99,8 +107,17 @@
// Supporting files
import loader from "@/ux-components/loader/loader";
import store from "@/store";
-import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
-import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
+import {
+ TIMINGFUNC_MAP,
+ BUFFER_OFFSET,
+ MONTHS_OF_YEAR,
+ DAYS_OF_WEEK,
+} from "@/digital-components/date-picker/mixins/constants";
+import {
+ selectableDaysOptions,
+ requiredParameter,
+ forceTwoDigitString,
+} from "@/digital-components/date-picker/mixins/helpers";
import {
convertDateToDateString,
convertDateStringToDate,
@@ -148,6 +165,10 @@ export default {
type: String,
default: "",
},
+ showPricingByDay: Boolean,
+ pricingByDayBasePrice: Number,
+ pricingByDayUpcharge: Number,
+ isPricingByDayExperiment: Boolean,
},
setup(props) {
const uuid = uuidv4();
@@ -199,6 +220,12 @@ export default {
if (this.selectableDatesSetting === "custom") return "future";
return "past";
},
+ isPricingByDayClass() {
+ return this.isPricingByDayExperiment ? "pricing-by-day" : "";
+ },
+ showPricingByDayClass() {
+ return this.showPricingByDay ? "show-pricing-by-day" : "";
+ },
selectedDate: {
get() {
return this.modelValue;
@@ -212,12 +239,12 @@ export default {
initializeComponent(initialData) {
this.setCalendarData(initialData);
},
- fireDateSelectedEvent(event) {
+ fireDateSelectedEvent(event, date) {
// Ignore if arrow key selected radioButton
if (event.screenX === 0 && event.screenY === 0) {
return;
}
- this.$emit("date-clicked");
+ this.$emit("date-clicked", date);
},
getWeekStartDate(dateString) {
const date = convertDateStringToDate(dateString);
@@ -440,6 +467,8 @@ export default {
initialViewEndDate: config.initialViewEndDate,
hideSecondMonth: hideSecondMonth,
preSelectedDate: config.preSelectedDate,
+ pricingByDayBasePrice: config.pricingByDayBasePrice,
+ pricingByDayUpcharge: config.pricingByDayUpcharge,
};
if (direction === "future") {
// first 0, then 1
@@ -573,6 +602,17 @@ export default {
("0" + monthNum).slice(-2) +
"-" +
("0" + i).slice(-2);
+ const dayIndex = convertDateStringToDate(dateString).getDay();
+ const dayObject = DAYS_OF_WEEK[dayIndex];
+ const isSelectable =
+ this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
+ ? true
+ : false;
+ const isPricingByDayUpchargeDay = dayObject.isPricingByDayUpchargeDay;
+ const displayPrice = isPricingByDayUpchargeDay
+ ? options.pricingByDayBasePrice + options.pricingByDayUpcharge
+ : options.pricingByDayBasePrice;
+ const priceString = "$" + displayPrice;
if (offset === 0 && i === this.todayDateNum) {
dayClasses += " current-day";
@@ -583,8 +623,8 @@ export default {
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
dayClasses += " unavailable-day";
}
- if (convertDateStringToDate(dateString).getDay() === 0) {
- dayClasses += " sunday";
+ if (dayIndex === 0) {
+ dayClasses += " " + dayObject.cssClass;
}
if (
this.hideSomeDaysForInitialView &&
@@ -598,10 +638,9 @@ export default {
dateNum: i,
dayClasses: dayClasses,
inputValue: dateString,
- isSelectable:
- this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
- ? true
- : false,
+ priceString: priceString,
+ isSelectable: isSelectable,
+ isPricingByDayUpchargeDay: isPricingByDayUpchargeDay,
};
dates.push(dateObject);
}
@@ -897,7 +936,6 @@ export default {
}
}
- &:hover,
&:checked {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px transparent;
@@ -924,9 +962,7 @@ export default {
&.selectable-day {
label {
- color: $blue;
background-color: $blue-100;
- border: 1px solid $blue;
min-width: 2.5rem;
width: 2.5rem;
border-radius: 50%;
@@ -934,12 +970,11 @@ export default {
}
&.unavailable-day {
label {
- color: $gray-500;
- background-color: $gray-100;
border: none;
pointer-events: none;
}
}
+ //NEEDED?
&.unavailable-day:not(&.sunday) {
label {
&::before {
@@ -949,7 +984,6 @@ export default {
left: -1rem;
width: 1rem;
height: 2.5rem;
- background: $gray-100;
}
}
}
@@ -1056,7 +1090,107 @@ export default {
}
}
}
+ // pricing by day override styles
+ &.pricing-by-day {
+ .calendar-grid-container .grid-item {
+ margin: 0 0 0.15rem 0;
+ }
+ .month-year {
+ grid-area: 1 / 1 / 2 / 8;
+ }
+ .legend {
+ display: none;
+ }
+ .radio-wrapper {
+ align-items: flex-start;
+ width: 100%;
+ height: 2.5rem;
+ color: $black;
+
+ input[type="radio"] {
+ &:focus-visible + label {
+ box-shadow: none;
+ }
+
+ &:focus + label,
+ &:checked:focus + label {
+ box-shadow: none;
+ background-color: $white;
+ color: $black;
+ }
+ &:checked + label {
+ background: $blue-100;
+ border: 2px solid $blue;
+ border-radius: 0.25rem;
+ color: $black;
+ span {
+ font-family: AvertaSemibold;
+ font-weight: 400;
+ }
+ }
+ }
+ label {
+ flex-direction: column;
+ height: 2.5rem;
+ width: 100%;
+ font-size: 0.75rem;
+ line-height: 1.2;
+ justify-content: center;
+ padding: 0.25rem;
+ }
+ &.selectable-day {
+ label {
+ color: $black;
+ background-color: $blue-100;
+ min-width: 2.5rem;
+ width: 2.5rem;
+ border-radius: 0.25rem;
+ }
+ }
+ &.current-day {
+ label:after {
+ margin-top: 0.2rem;
+ position: relative;
+ top: 0;
+ }
+ }
+ }
+ &.show-pricing-by-day {
+ .radio-wrapper {
+ &.selectable-day label span {
+ text-decoration: none;
+ color: $black;
+ font-weight: 400;
+ font-family: "AvertaSemibold";
+
+ &.price {
+ font-family: "AvertaRegular";
+ font-weight: 400;
+ }
+ }
+ &.upch-day label span.price {
+ color: $gray-600;
+ font-weight: 400;
+ font-family: $font-family-sans-serif;
+ }
+ input[type="radio"] {
+ &:focus + label,
+ &:checked:focus + label {
+ color: $gray-600;
+ }
+ &:checked + label {
+ color: $blue;
+ span {
+ font-weight: 400;
+ font-family: "AvertaSemibold";
+ }
+ }
+ }
+ }
+ }
+ }
}
+
.btn-link {
display: block;
position: relative;
diff --git a/src/experiment-components/date-picker-for-pricing-by-day.vue b/src/experiment-components/date-picker-for-pricing-by-day.vue
deleted file mode 100644
index cad976cf7..000000000
--- a/src/experiment-components/date-picker-for-pricing-by-day.vue
+++ /dev/null
@@ -1,1221 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/experiment-components/service-package-radio-for-afterpay.vue b/src/experiment-components/service-package-radio-for-afterpay.vue
index 3356ee225..f38621462 100644
--- a/src/experiment-components/service-package-radio-for-afterpay.vue
+++ b/src/experiment-components/service-package-radio-for-afterpay.vue
@@ -5,6 +5,7 @@
:class="[
this.buttonLabelSubCopy ? 'has-subheader' : '',
this.additionalButtonData.isInsuranceSelected ? 'is-insurance' : '',
+ this.hasPackageDiscount() ? 'has-package-discount' : '',
]"
for="testradio">
@@ -54,12 +55,7 @@
v-html="this.buttonFooterCopy">