CSR-1137 | Formatting

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 {
+            return {
-                additionalButtonStyling: 'listButtonHorizontalStrong'
+                additionalButtonStyling: "listButtonHorizontalStrong",
             };
         },
         selectedValues: {

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 };
+export { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE };

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,
                 };
             }
         },

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.estimatedServiceMinutesMinimum,
-                    this.estimatedServiceMinutesMaximum
+                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 <input> 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));

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">
             <span class="m-0 position-relative" :class="textPosition">
                 {{ buttonLabel }}
-                <span v-if="buttonLabelSubCopy" class="premium-appointment-price" :class="textPosition">
+                <span
-                {{ formattedButtonLabelSubCopy }}
+                    v-if="buttonLabelSubCopy"
+                    class="premium-appointment-price"
+                    :class="textPosition">
+                    {{ formattedButtonLabelSubCopy }}
+                </span>
             </span>
-            </span>
+
-            
             <span v-if="screenReaderOnlyText" class="sr-only">
                 {{ screenReaderOnlyText }}
             </span>
@@ -113,14 +116,14 @@ export default {
     width: 100%;
     outline: none;
 
-    span.premium-appointment-price { 
+    span.premium-appointment-price {
         position: absolute;
-        background: $green-100; 
+        background: $green-100;
-        border-radius: 4.5rem; 
+        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;
 }
-
-
 </style>