diff --git a/src/assets/img/icons/alert-circle-yellow.svg b/src/assets/img/icons/alert-circle-yellow.svg new file mode 100644 index 000000000..904aefb98 --- /dev/null +++ b/src/assets/img/icons/alert-circle-yellow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index 727add296..450875d0f 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -343,3 +343,14 @@ export function splitCMSCopyOnParagraphTag(copy) { export function splitCMSCopyOnBR(copy) { return copy.split("
"); } + +// This function takes in a number and returns it formatted as USD currency, with or without cents depending on if the number is an integer or not. +export function formatToUSDollar(amount) { + const isInteger = amount % 1 === 0; + return new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + minimumFractionDigits: isInteger ? 0 : 2, + maximumFractionDigits: 2, + }).format(amount); +} diff --git a/src/layouts/schedule/multi-location-modal/multi-location-modal.vue b/src/layouts/schedule/multi-location-modal/multi-location-modal.vue index ef49fa2c2..85afe5211 100644 --- a/src/layouts/schedule/multi-location-modal/multi-location-modal.vue +++ b/src/layouts/schedule/multi-location-modal/multi-location-modal.vue @@ -80,7 +80,6 @@ export default { confirmedAppointment: false, multiLocationRadioButton: multiLocationRadioButton, selectedValue: null, - experimentSettings: "", }; }, methods: { @@ -124,8 +123,20 @@ export default { setIsModalOpen(isOpen) { this.isModalOpen = isOpen; }, - captureExperimentSettings(settingsString) { - this.experimentSettings = settingsString; + selectedSlotEventValue() { + const daysUntilAppointment = + (new Date(this.selectedAppointment.date) - new Date()) / (1000 * 60 * 60 * 24); + const isAM = this.selectedAppointment.timeSlot.startTime < "12:00:00"; + return ( + "AM: " + + isAM + + " | " + + "PM: " + + !isAM + + " | " + + "Days: " + + Math.ceil(daysUntilAppointment) + ); }, pushEvent() { let gaAction = this.confirmedAppointment ? this.GaActions.YES : this.GaActions.NO; @@ -143,7 +154,7 @@ export default { this.mobileAppointmentOption.date, true, null, - this.experimentSettings + this.selectedSlotEventValue() ); } else if ( this.selectedValue?.toLowerCase() === "inshop" && @@ -157,7 +168,7 @@ export default { this.inshopAppointmentOption.date, true, null, - this.experimentSettings + this.selectedSlotEventValue() ); } }, diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 9eb191bc4..c13026d36 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -81,6 +81,16 @@ cmsWidgetName="AlertNoShopsWidget" v-if="displayNoShopsAlert" alertClass="alert-warning" /> +

Info Icon + Warning Icon {{ alertHeadline }}


@@ -63,7 +69,9 @@ export default { name: "alert", props: { showInfoIcon: Boolean, + showWarningIcon: Boolean, showHorizontalRow: Boolean, + hasBorder: Boolean, isDismissible: Boolean, alertClass: String, /* @@ -96,6 +104,9 @@ export default { infoIcon() { return require(`@/assets/img/icons/info-circle-blue.svg`); }, + warningIcon() { + return require(`@/assets/img/icons/alert-circle-yellow.svg`); + }, pageQueryString() { return applicationConfig.PAGE_QUERYSTRING; }, @@ -211,12 +222,19 @@ export default { background-color: $yellow-100; .alert-heading { color: $yellow-600; + + .warning-icon { + height: 1rem; + } } svg { fill: $yellow-600; width: 1rem; height: 1rem; } + hr { + border-color: $yellow-800; + } } &.alert-success { background-color: $green-100; @@ -229,6 +247,9 @@ export default { height: 1rem; } } + &.bordered { + border: 1px solid; + } & p { font-size: 0.875rem; }