From 28e6ff191d69afa247eebee1cb30273d1490e95a Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 25 May 2023 08:16:10 -0400 Subject: [PATCH] CSR-1137 | Formatting --- .../cash-or-insurance-question.vue | 4 +- .../schedule/constants/schedule-constants.js | 2 +- src/layouts/schedule/schedule.vue | 12 ++++-- .../time-slot-modal-question.vue | 37 ++++++++++++------- .../timeslot-modal-list-button.vue | 21 ++++++----- 5 files changed, 47 insertions(+), 29 deletions(-) diff --git a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue index f5fec2255..a2afb1a7c 100644 --- a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue +++ b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue @@ -28,8 +28,8 @@ export default { return this.getCmsContent(this.cmsWidgetName, "Answers"); }, additionalButtonData() { - return { - additionalButtonStyling: 'listButtonHorizontalStrong' + return { + additionalButtonStyling: "listButtonHorizontalStrong", }; }, selectedValues: { diff --git a/src/layouts/schedule/constants/schedule-constants.js b/src/layouts/schedule/constants/schedule-constants.js index aae307675..89b4a4c1a 100644 --- a/src/layouts/schedule/constants/schedule-constants.js +++ b/src/layouts/schedule/constants/schedule-constants.js @@ -8,4 +8,4 @@ const PREMIUM_TIME_SLOT_ID_FLAG = "-premium"; const PREMIUM_FEE_PART_TYPE = "EARLY BIRD"; -export { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE }; \ No newline at end of file +export { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE }; diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 91e685dbf..654f35a15 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -73,7 +73,7 @@ import { getRouterLinkRouteFromCopy, getRouterLinkDisplayTextFromCopy, } from "@/helpers/cms-content-helper"; -import {PREMIUM_FEE_PART_TYPE} from "./constants/schedule-constants"; +import { PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants"; import { errorMessages } from "@/constants/error-messages"; import { required } from "@/helpers/validation-rules"; import store from "@/store"; @@ -135,7 +135,13 @@ export default { const pricingPromise = baseMixin.methods.dispatchStoreAction( storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, { - availableLineItems: [{ partNumber: PREMIUM_FEE_PART_TYPE, partType: PREMIUM_FEE_PART_TYPE, description: null }], + availableLineItems: [ + { + partNumber: PREMIUM_FEE_PART_TYPE, + partType: PREMIUM_FEE_PART_TYPE, + description: null, + }, + ], }, false ); @@ -286,7 +292,7 @@ export default { if (newValue !== oldValue) { this.selectedTimeSlotData = { id: null, - isPremiumAppointment: null + isPremiumAppointment: null, }; } }, diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index 54cef6182..e812e7a67 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue @@ -50,7 +50,11 @@ import { errorMessages } from "@/constants/error-messages"; import { required } from "@/helpers/validation-rules"; // Constants -import { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE} from "../constants/schedule-constants"; +import { + AppointmentTypeStrings, + PREMIUM_TIME_SLOT_ID_FLAG, + PREMIUM_FEE_PART_TYPE, +} from "../constants/schedule-constants"; // Validation for the modal button defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED)); @@ -97,7 +101,7 @@ export default { if (numberOfOptions === 1) { this.selectedTimeSlotId = newValue.timeSlots[0].id; } - } + }, }, computed: { supplementalInformationBlock() { @@ -110,7 +114,9 @@ export default { ? this.mobilePremiumCmsWidgetName : this.mobileCmsWidgetName; } else { - appointmentTypeCmsWidgetName = this.isSameDay ? this.sameDayDropOffCmsWidgetName : this.dropoffCmsWidgetName; + appointmentTypeCmsWidgetName = this.isSameDay + ? this.sameDayDropOffCmsWidgetName + : this.dropoffCmsWidgetName; } return this.getCmsContent(appointmentTypeCmsWidgetName, "BodyText"); }, @@ -130,11 +136,14 @@ export default { return this.getCmsContent(this.dropoffCmsWidgetName, "SubheaderText"); }, inshopDurationText() { - const inshopDurationTextWithoutTime = this.getCmsContent(this.cmsWidgetName, "SubheaderText"); + const inshopDurationTextWithoutTime = this.getCmsContent( + this.cmsWidgetName, + "SubheaderText" + ); const inshopDurationTime = this.getDisplayTextForDurationLength( - this.estimatedServiceMinutesMinimum, - this.estimatedServiceMinutesMaximum - ); + this.estimatedServiceMinutesMinimum, + this.estimatedServiceMinutesMaximum + ); return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`; }, durationTextBlockCopy() { @@ -195,17 +204,19 @@ export default { if (this.appointmentType === AppointmentTypeStrings.MOBILE) { const isPremiumTimeSlot = this.dateAndTimeSlotData.timeSlots[0].offerPremium; - const hasPremiumPartAvailable = this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE; + const hasPremiumPartAvailable = + this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE; if (isPremiumTimeSlot && hasPremiumPartAvailable) { - const formattedPrice = "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2); + const formattedPrice = + "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2); availableTimeSlots.unshift({ // Unique value is required for each and the premium appoinment shares a timeslot ID value: this.addPremiumFlagToInput(this.dateAndTimeSlotData.timeSlots[0].id), buttonLabel: this.premiumAppointmentButtonText, buttonLabelSubCopy: formattedPrice, additionalButtonData: { - isPremiumAppointment: true - } + isPremiumAppointment: true, + }, }); } } @@ -227,7 +238,7 @@ export default { const selectedTimeSlotData = { id: this.selectedTimeSlotId, isPremiumAppointment: this.isSelectedAppointmentPremium, - } + }; this.$emit("update:modelValue", selectedTimeSlotData); this.$refs["timeSlots"].closeModal(); }, @@ -264,7 +275,7 @@ export default { return displayTextForDurationLength; }, addPremiumFlagToInput(timeSlotId) { - return timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG; + return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG); }, removePremiumFlagFromInput(timeSlotId) { return parseInt(timeSlotId.trim(PREMIUM_TIME_SLOT_ID_FLAG.length)); diff --git a/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue b/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue index 8c71a9bb3..4f5b17461 100644 --- a/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue +++ b/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue @@ -8,11 +8,14 @@ class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4"> {{ buttonLabel }} - - {{ formattedButtonLabelSubCopy }} + + {{ formattedButtonLabelSubCopy }} + - - + {{ screenReaderOnlyText }} @@ -113,14 +116,14 @@ export default { width: 100%; outline: none; - span.premium-appointment-price { + span.premium-appointment-price { position: absolute; - background: $green-100; - border-radius: 4.5rem; + background: $green-100; + border-radius: 4.5rem; line-height: 1.25rem; color: $green-700; font-size: 0.75rem; - margin-left:4px; + margin-left: 4px; padding: 2px 8px; font-weight: 500; } @@ -129,6 +132,4 @@ export default { .position-relative { position: relative; } - -