666 lines
26 KiB
Vue
666 lines
26 KiB
Vue
<template>
|
|
<div class="time-slots-question">
|
|
<buttonQuestion
|
|
v-if="isDropOffAppointmentAvailable"
|
|
v-model="selectedAnswerForDropOffOrInshop"
|
|
:questionText="dropOffOrPickATimeQuestionLabelText"
|
|
:answers="answersForDropOffQuestion"
|
|
isRequired
|
|
insertOrLabelBeforeFinalOption
|
|
groupName="chooseDropOffOrInshop">
|
|
<div>
|
|
<alert
|
|
v-if="shouldDisplayDropOffAlert"
|
|
ref="alertDropoffInformation"
|
|
class="mb-4 drop-off-alert"
|
|
:cmsWidgetName="dropOffTimeSlotAlertCMSWidgetName"
|
|
alertClass="alert-info"
|
|
v-bind:isDismissible="false" />
|
|
</div>
|
|
</buttonQuestion>
|
|
<buttonQuestion
|
|
ref="buttonQuestion"
|
|
v-if="shouldDisplayTimeSlotQuestion"
|
|
buttonTypeString="timeSlotModalListButton"
|
|
:buttonTypeObject="timeSlotModalListButton"
|
|
class="mt-4 timeslots"
|
|
:class="[
|
|
isMobileAppointment ? 'is-mobile-appointment' : '',
|
|
isInshopOrDropOffAppointment ? 'is-inshop-or-drop-off-appointment' : '',
|
|
]"
|
|
:answers="availableTimeSlots"
|
|
groupName="chooseTimeSlot"
|
|
textPosition="text-center"
|
|
v-model="selectedAnswerForTimeSlots"
|
|
isRequired
|
|
validationRules="time-slot-required" />
|
|
<div
|
|
class="supplemental-information"
|
|
v-if="supplementalInformationBlock"
|
|
v-html="supplementalInformationBlock" />
|
|
<div
|
|
v-if="hasWaitListExperiment && displayWaitListFeature"
|
|
class="mt-5 bg-light rounded waitlist">
|
|
<textBlock
|
|
cmsWidgetName="WaitListLabelWidget"
|
|
typeStyle="medium"
|
|
fontWeight="600"
|
|
marginTopSizeOverride="0" />
|
|
<checkboxQuestion
|
|
class="mt-3"
|
|
cmsWidgetName="WaitListQuestionWidget"
|
|
v-model="waitListRequested"
|
|
@click="waitListChecked" />
|
|
</div>
|
|
<div v-if="waitListRequested" class="rounded waitlist-success" ref="waitlistSuccessMessage">
|
|
<img :src="waitListSuccessImage" class="success-image" />
|
|
<span v-html="waitListSuccessText" class="success-text"></span>
|
|
</div>
|
|
<textBlock
|
|
v-show="disclaimerTextBlockCopy"
|
|
:customText="disclaimerTextBlockCopy"
|
|
justifyText="left"
|
|
typeStyle="caption"
|
|
class="disclaimer" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Removed modal import
|
|
import textBlock from "@/digital-components/text-block/text-block";
|
|
import buttonQuestion from "@/digital-components/button-question/button-question";
|
|
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
|
import timeSlotModalListButton from "@/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue";
|
|
import alert from "@/ux-components/alert/alert.vue";
|
|
import experimentMixin from "@/mixins/experiment-mixin";
|
|
import { experimentSettings } from "@/constants/experiments";
|
|
import store from "@/store";
|
|
|
|
// Helpers
|
|
import { deepClone } from "@/helpers/object-helper";
|
|
import {
|
|
isDropOffRouteCode,
|
|
militaryToTwelveHourTime,
|
|
} from "@/layouts/schedule/helpers/schedule-helper";
|
|
import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
|
|
|
|
// Validation
|
|
import { defineRule, useField } from "vee-validate";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
import { required } from "@/helpers/validation-rules";
|
|
|
|
import { v4 as uuidv4 } from "uuid";
|
|
|
|
// Constants
|
|
import {
|
|
AppointmentTypeStrings,
|
|
RouteCodeFlags,
|
|
PREMIUM_TIME_SLOT_ID_FLAG,
|
|
PREMIUM_FEE_PART_TYPE,
|
|
cmsWidgetFieldMappings,
|
|
} from "@/constants/schedule-constants";
|
|
|
|
const PICK_A_TIME_BUTTON_VALUE = "pick-a-time-selected";
|
|
|
|
defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
|
|
|
|
export default {
|
|
name: "time-slot-question",
|
|
emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
|
|
props: {
|
|
modelValue: {
|
|
type: Object,
|
|
default: () => ({
|
|
timeSlot: {
|
|
routeCode: null,
|
|
date: null,
|
|
startTime: null,
|
|
endTime: null,
|
|
jobMaxMinutes: null,
|
|
jobMinMinutes: null,
|
|
},
|
|
isPremiumAppointment: null,
|
|
}),
|
|
},
|
|
cmsWidgetName: String,
|
|
mobileCmsWidgetName: String,
|
|
mobilePremiumCmsWidgetName: String,
|
|
dropoffCmsWidgetName: String,
|
|
sameDayDropOffCmsWidgetName: String,
|
|
overnightDropOffCmsWidgetName: String,
|
|
dropOffOrPickATimeQuestionCmsWidgetName: String,
|
|
appointmentType: String,
|
|
timeSlotsForSelectedDate: Object,
|
|
premiumAppointmentFee: Object,
|
|
estimatedServiceMinutesMinimum: Number,
|
|
estimatedServiceMinutesMaximum: Number,
|
|
validationRules: String,
|
|
customComponentId: String,
|
|
selectedDate: String,
|
|
displayWaitList: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
selectedRouteCode: null,
|
|
timeSlotModalListButton: timeSlotModalListButton,
|
|
waitListRequested: this.getWaitListRequestedFromStore(),
|
|
selectedAnswerForDropOffOrInshop: null,
|
|
selectedAnswerForTimeSlots: null,
|
|
};
|
|
},
|
|
setup(props) {
|
|
const uuid = uuidv4();
|
|
const componentId = !props.customComponentId
|
|
? `component-${uuid}`
|
|
: props.customComponentId;
|
|
|
|
const modelValue = deepClone(props).modelValue;
|
|
const initialValue = modelValue;
|
|
|
|
const fieldOptions = {
|
|
value: modelValue,
|
|
initialValue: initialValue,
|
|
};
|
|
|
|
const { errorMessage, handleChange, meta, validate, errors } = useField(
|
|
componentId,
|
|
props.validationRules,
|
|
fieldOptions
|
|
);
|
|
|
|
return {
|
|
componentId,
|
|
errorMessage,
|
|
handleChange,
|
|
validate,
|
|
meta,
|
|
errors,
|
|
};
|
|
},
|
|
computed: {
|
|
supplementalInformationBlock() {
|
|
let appointmentTypeCmsWidgetName;
|
|
|
|
if (
|
|
this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
|
|
this.appointmentType === AppointmentTypeStrings.IN_SHOP ||
|
|
this.appointmentType === AppointmentTypeStrings.DROP_OFF
|
|
) {
|
|
return null;
|
|
// This is planned to be used again for drop-off
|
|
// Wrote this to be ready for that eventuality, is untested and no HTML work done yet
|
|
|
|
// if (this.selectedRouteCode == null || !isDropOffRouteCode(this.selectedRouteCode)) {
|
|
// return null;
|
|
// } else {
|
|
// appointmentTypeCmsWidgetName =
|
|
// this.getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
|
|
// this.selectedRouteCode,
|
|
// true
|
|
// );
|
|
// }
|
|
} else {
|
|
appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
|
|
PREMIUM_TIME_SLOT_ID_FLAG
|
|
)
|
|
? this.mobilePremiumCmsWidgetName
|
|
: this.mobileCmsWidgetName;
|
|
}
|
|
|
|
return this.getCmsContent(
|
|
appointmentTypeCmsWidgetName,
|
|
cmsWidgetFieldMappings.SUPPLEMENTAL_INFORMATION
|
|
);
|
|
},
|
|
dropOffOrPickATimeQuestionLabelText() {
|
|
return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "QuestionText");
|
|
},
|
|
pickATimeButtonLabelText() {
|
|
return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "Answers")[0]
|
|
.Text;
|
|
},
|
|
premiumAppointmentButtonText() {
|
|
return this.getCmsContent(
|
|
this.dropOffOrPickATimeQuestionCmsWidgetName,
|
|
cmsWidgetFieldMappings.TIME_SLOT_BUTTON
|
|
);
|
|
},
|
|
dropoffButtonText() {
|
|
return this.getCmsContent(
|
|
this.dropoffCmsWidgetName,
|
|
cmsWidgetFieldMappings.TIME_SLOT_BUTTON
|
|
);
|
|
},
|
|
sameDayDropoffButtonText() {
|
|
return this.getCmsContent(
|
|
this.sameDayDropOffCmsWidgetName,
|
|
cmsWidgetFieldMappings.TIME_SLOT_BUTTON
|
|
);
|
|
},
|
|
overnightDropoffButtonText() {
|
|
return this.getCmsContent(
|
|
this.overnightDropOffCmsWidgetName,
|
|
cmsWidgetFieldMappings.TIME_SLOT_BUTTON
|
|
);
|
|
},
|
|
// None of this is used, but apparently could be re-activated if we go back to
|
|
// complete parity with Heritage. If that plan is dropped, delete this
|
|
// dropoffDisclaimerText() {
|
|
// return this.getCmsContent(this.dropoffCmsWidgetName, cmsWidgetFieldMappings.DISCLAIMER);
|
|
// },
|
|
// sameDayDropOffDisclaimerText() {
|
|
// return this.getCmsContent(
|
|
// this.sameDayDropOffCmsWidgetName,
|
|
// cmsWidgetFieldMappings.DISCLAIMER
|
|
// );
|
|
// },
|
|
// overnightDropOffDisclaimerText() {
|
|
// return this.getCmsContent(
|
|
// this.overnightDropOffCmsWidgetName,
|
|
// cmsWidgetFieldMappings.DISCLAIMER
|
|
// );
|
|
// },
|
|
// disclaimerTextBlockCopy() {
|
|
// if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
|
|
// if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
|
|
// if (this.isSameDay) {
|
|
// return this.sameDayDropOffDisclaimerText;
|
|
// } else {
|
|
// return this.dropoffDisclaimerText;
|
|
// }
|
|
// } else if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
|
// return this.overnightDropOffDisclaimerText;
|
|
// } else {
|
|
// return null;
|
|
// }
|
|
// } else {
|
|
// return null;
|
|
// }
|
|
// },
|
|
isSameDay() {
|
|
if (!this.timeSlotsForSelectedDate) {
|
|
return false;
|
|
}
|
|
const todaysDate = new Date().toISOString().split("T")[0];
|
|
return this.selectedDate === todaysDate;
|
|
},
|
|
availableTimeSlots() {
|
|
if (!this.timeSlotsForSelectedDate) {
|
|
return null;
|
|
}
|
|
|
|
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
|
|
return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
|
|
} else {
|
|
return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
|
|
}
|
|
},
|
|
answersForDropOffQuestion() {
|
|
if (!this.timeSlotsForSelectedDate) {
|
|
return null;
|
|
}
|
|
const dropOffQuestionAnswers = this.timeSlotsForSelectedDate.timeSlots
|
|
.filter((timeSlot) => {
|
|
return isDropOffRouteCode(timeSlot.id);
|
|
})
|
|
.map((timeSlot) => {
|
|
let buttonLabelValue;
|
|
if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
|
buttonLabelValue = this.overnightDropoffButtonText;
|
|
} else if (this.isSameDay) {
|
|
buttonLabelValue = this.sameDayDropoffButtonText;
|
|
} else {
|
|
buttonLabelValue = this.dropoffButtonText;
|
|
}
|
|
return {
|
|
value: timeSlot.id,
|
|
buttonLabel: buttonLabelValue,
|
|
};
|
|
});
|
|
// Only add the pick a time button if inShop timeslots are available
|
|
if (
|
|
this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots)
|
|
.length !== 0
|
|
) {
|
|
dropOffQuestionAnswers.push({
|
|
value: PICK_A_TIME_BUTTON_VALUE,
|
|
buttonLabel: this.pickATimeButtonLabelText,
|
|
});
|
|
}
|
|
return dropOffQuestionAnswers;
|
|
},
|
|
hasWaitListExperiment() {
|
|
return experimentMixin.methods.hasSettingEqualTo(
|
|
experimentSettings.DISPLAY_WAITLIST,
|
|
"true"
|
|
);
|
|
},
|
|
displayWaitListFeature() {
|
|
return this.displayWaitList;
|
|
},
|
|
waitListSuccessImage() {
|
|
return this.getCmsContent("WaitListSuccessWidget", "Image");
|
|
},
|
|
waitListSuccessText() {
|
|
return this.getCmsContent("WaitListSuccessWidget", "BodyText");
|
|
},
|
|
isMobileAppointment() {
|
|
return this.appointmentType === AppointmentTypeStrings.MOBILE;
|
|
},
|
|
isInshopOrDropOffAppointment() {
|
|
return this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
|
|
},
|
|
shouldDisplayDropOffAlert() {
|
|
return isDropOffRouteCode(this.selectedAnswerForDropOffOrInshop);
|
|
},
|
|
dropOffTimeSlotAlertCMSWidgetName() {
|
|
if (this.selectedAnswerForDropOffOrInshop.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
|
return "OvernightDropOffTimeSlotAlert";
|
|
} else if (this.isSameDay) {
|
|
return "SameDayDropOffTimeSlotAlert";
|
|
} else {
|
|
return "DropOffTimeSlotAlert";
|
|
}
|
|
},
|
|
isDropOffAppointmentAvailable() {
|
|
return (
|
|
this.answersForDropOffQuestion !== null &&
|
|
this.answersForDropOffQuestion.length !== 0 &&
|
|
this.answersForDropOffQuestion[0].value !== PICK_A_TIME_BUTTON_VALUE
|
|
);
|
|
},
|
|
shouldDisplayTimeSlotQuestion() {
|
|
return (
|
|
this.selectedAnswerForDropOffOrInshop == PICK_A_TIME_BUTTON_VALUE ||
|
|
!this.isDropOffAppointmentAvailable
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
initializeComponent() {
|
|
this.setSelectedRouteCodeFromParent();
|
|
},
|
|
async setSelectedTimeSlot() {
|
|
this.$emit(
|
|
"update:modelValue",
|
|
this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
|
|
);
|
|
},
|
|
getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
|
|
selectedRouteCode,
|
|
isSameDayRelevant = false
|
|
) {
|
|
if (selectedRouteCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
|
return this.overnightDropOffCmsWidgetName;
|
|
} else if (selectedRouteCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
|
|
return this.isSameDay && isSameDayRelevant
|
|
? this.sameDayDropOffCmsWidgetName
|
|
: this.dropoffCmsWidgetName;
|
|
}
|
|
},
|
|
getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
|
|
return timeSlotsForSelectedDate
|
|
.filter((timeSlot) => {
|
|
return !isDropOffRouteCode(timeSlot.id);
|
|
})
|
|
.map((timeSlot) => {
|
|
const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
|
|
return {
|
|
value: timeSlot.id,
|
|
buttonLabel: readableTime,
|
|
};
|
|
});
|
|
},
|
|
getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
|
|
const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
|
|
const readableTime = `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(
|
|
timeSlot.endTime
|
|
)}`;
|
|
return {
|
|
value: timeSlot.id,
|
|
buttonLabel: readableTime,
|
|
};
|
|
});
|
|
|
|
const isPremiumTimeSlot = timeSlotsForSelectedDate[0].offerPremium;
|
|
const hasPremiumPartAvailable =
|
|
this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
|
|
if (isPremiumTimeSlot && hasPremiumPartAvailable) {
|
|
availableTimeSlots.unshift(
|
|
this.getPremiumAppointmentTimeSlot(timeSlotsForSelectedDate[0])
|
|
);
|
|
}
|
|
|
|
return availableTimeSlots;
|
|
},
|
|
getPremiumAppointmentTimeSlot(timeSlotData) {
|
|
const formattedPrice =
|
|
"+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
|
|
return {
|
|
// Unique value is required for each <input> and the premium appointment shares an id
|
|
value: this.addPremiumFlagToInput(timeSlotData.id),
|
|
buttonLabel: this.premiumAppointmentButtonText,
|
|
buttonLabelSubCopy: formattedPrice,
|
|
additionalButtonData: {
|
|
isPremiumAppointment: true,
|
|
},
|
|
};
|
|
},
|
|
setSelectedRouteCodeFromParent() {
|
|
if (!this.modelValue?.timeSlot?.routeCode) {
|
|
return;
|
|
}
|
|
const routeCodeFromParent = this.modelValue.timeSlot.routeCode;
|
|
if (this.modelValue?.isPremiumAppointment) {
|
|
// Mobile Only
|
|
this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent);
|
|
} else {
|
|
if (isDropOffRouteCode(routeCodeFromParent)) {
|
|
this.selectedAnswerForDropOffOrInshop = routeCodeFromParent;
|
|
} else {
|
|
this.selectedAnswerForDropOffOrInshop = PICK_A_TIME_BUTTON_VALUE;
|
|
this.selectedAnswerForTimeSlots = routeCodeFromParent;
|
|
}
|
|
}
|
|
},
|
|
getWaitListRequestedFromStore() {
|
|
return store.getters.order.customer?.waitListRequested;
|
|
},
|
|
autoSelectTimeSlotIfOnlyOneIsAvailable() {
|
|
const numberOfOptions = this.timeSlotsForSelectedDate.timeSlots?.length;
|
|
if (numberOfOptions === 1) {
|
|
if (this.availableTimeSlots.length > 0) {
|
|
this.selectedAnswerForTimeSlots = this.availableTimeSlots[0].value;
|
|
} else {
|
|
this.selectedAnswerForDropOffOrInshop = this.answersForDropOffQuestion[0].value;
|
|
}
|
|
}
|
|
},
|
|
addPremiumFlagToInput(routeCode) {
|
|
return (routeCode += PREMIUM_TIME_SLOT_ID_FLAG);
|
|
},
|
|
removePremiumFlagFromInput(routeCode) {
|
|
return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
|
|
},
|
|
getSelectedTimeSlotInfoObject(routeCode) {
|
|
const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
|
|
if (routeCodeIncludesPremium) {
|
|
routeCode = this.removePremiumFlagFromInput(routeCode);
|
|
}
|
|
const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
|
|
(slot) => slot.id == routeCode
|
|
);
|
|
|
|
if (timeSlot) {
|
|
return {
|
|
timeSlot: {
|
|
date: this.timeSlotsForSelectedDate.date,
|
|
routeCode: timeSlot.id,
|
|
startTime: timeSlot.startTime,
|
|
endTime: timeSlot.endTime,
|
|
jobMaxMinutes: this.estimatedServiceMinutesMaximum?.toString() || null,
|
|
jobMinMinutes: this.estimatedServiceMinutesMinimum?.toString() || null,
|
|
},
|
|
isPremiumAppointment: routeCodeIncludesPremium ? true : false,
|
|
};
|
|
}
|
|
|
|
return {
|
|
timeSlot: {
|
|
date: null,
|
|
routeCode: null,
|
|
startTime: null,
|
|
endTime: null,
|
|
jobMaxMinutes: null,
|
|
jobMinMinutes: null,
|
|
},
|
|
isPremiumAppointment: null,
|
|
};
|
|
},
|
|
waitListChecked(event) {
|
|
this.$emit("waitListRequested", event.target.checked);
|
|
},
|
|
scrollToSuccessMessage() {
|
|
const successMessageElement = this.$refs.waitlistSuccessMessage;
|
|
if (successMessageElement) {
|
|
successMessageElement.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
waitListRequested(newVal) {
|
|
if (newVal) {
|
|
this.$nextTick(() => {
|
|
this.scrollToSuccessMessage();
|
|
});
|
|
}
|
|
},
|
|
modelValue: {
|
|
handler(newValue) {
|
|
this.handleChange(newValue);
|
|
},
|
|
deep: true,
|
|
},
|
|
selectedDate: {
|
|
handler() {
|
|
this.selectedRouteCode = null;
|
|
this.autoSelectTimeSlotIfOnlyOneIsAvailable();
|
|
},
|
|
},
|
|
selectedRouteCode(newValue) {
|
|
if (newValue) {
|
|
this.setSelectedTimeSlot();
|
|
}
|
|
},
|
|
selectedAnswerForDropOffOrInshop(newValue) {
|
|
if (newValue == PICK_A_TIME_BUTTON_VALUE) {
|
|
this.selectedRouteCode = null;
|
|
this.setSelectedTimeSlot();
|
|
} else {
|
|
this.selectedAnswerForTimeSlots = null;
|
|
this.selectedRouteCode = newValue;
|
|
}
|
|
},
|
|
selectedAnswerForTimeSlots(newValue) {
|
|
if (newValue) {
|
|
this.selectedRouteCode = newValue;
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
textBlock,
|
|
buttonQuestion,
|
|
checkboxQuestion,
|
|
alert,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.time-slots-question {
|
|
border-top: 1px solid $gray-500;
|
|
margin-top: 1.5rem;
|
|
|
|
.time-slot-header {
|
|
font-family: UrbanistBold;
|
|
margin-top: 1.5rem;
|
|
}
|
|
.text-block.duration-text-block {
|
|
margin-top: 0;
|
|
}
|
|
.supplemental-information {
|
|
line-height: 1.5rem;
|
|
font-size: 0.875rem;
|
|
text-align: left;
|
|
margin: 1rem 0 1.5rem;
|
|
li strong {
|
|
font-weight: bold;
|
|
}
|
|
li:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
.waitlist {
|
|
box-shadow: 0px 1px 4px 0px #00000033;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
padding: 16px;
|
|
text-align: left;
|
|
|
|
.ui-checkbox {
|
|
padding-left: 0px;
|
|
input {
|
|
border-radius: 4px;
|
|
box-shadow: 0px 1px 4px 0px #00000033;
|
|
}
|
|
}
|
|
.form-check-input {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
.waitlist-success {
|
|
margin: 1rem 0 0;
|
|
background-color: #ecf5e9;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
border: 1px solid #0c7e47;
|
|
border-radius: 5px;
|
|
font-size: 1.125rem;
|
|
padding: 0.75rem 1rem;
|
|
.success-text {
|
|
margin-left: 0.5rem;
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.success-image {
|
|
margin-top: 4.5px;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
color: #0c7e47;
|
|
}
|
|
}
|
|
.disclaimer {
|
|
text-align: left;
|
|
margin: 1.5rem 0 0;
|
|
}
|
|
.drop-off-alert {
|
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
|
background-repeat: no-repeat;
|
|
background-size: 0.75rem;
|
|
background-position: 0.5rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
|
|
gap: 0.25rem;
|
|
background-color: #e4f1f7;
|
|
|
|
.alert-heading {
|
|
text-align: left;
|
|
font-size: 0.75rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|