Merge pull request #2460 from Safelite/feature/CASH-464-more

CASH-464: fix supplemental info styling

src/digital-components/date-picker/date-picker.vue

@@ -1260,11 +1260,22 @@ export default {
         max-width: 100%;
         flex-wrap: wrap;
         gap: 0 0.5rem;
+        justify-content: center;
 
         & > div {
             flex: 0 0 calc(50% - 0.25rem);
         }
     }
+    :deep(.button-question.is-mobile-appointment) {
+        .button-inner-wrapper > div {
+            flex: 0 0 100%;
+        }
+    }
+    :deep(.button-question.is-drop-off-appointment) {
+        .button-inner-wrapper > div {
+            flex: 0 0 100%;
+        }
+    }
 }
 
 .btn-link {

src/layouts/schedule/schedule.vue

@@ -257,7 +257,7 @@ export default {
         } else {
             // Check to see if pre-selected date should have pricing by day upcharge
             if (showPricingByDay) {
-                // is this preSelectedDate a premium day?
+                // is this preSelectedDate a higher priced pricingByDay day?
                 const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
                 const dayObject = DAYS_OF_WEEK[dayIndex];
                 if (dayObject.isPricingByDayUpchargeDay) {

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -12,6 +12,10 @@
             buttonTypeString="timeSlotModalListButton"
             :buttonTypeObject="timeSlotModalListButton"
             class="mt-4"
+            :class="[
+                isMobileAppointment ? 'is-mobile-appointment' : '',
+                isDropOffAppointment ? 'is-drop-off-appointment' : '',
+            ]"
             :answers="availableTimeSlots"
             groupName="chooseTimeSlot"
             textPosition="text-center"
@@ -353,6 +357,12 @@ export default {
         waitListSuccessText() {
             return this.getCmsContent("WaitListSuccessWidget", "BodyText");
         },
+        isMobileAppointment() {
+            return this.appointmentType === AppointmentTypeStrings.MOBILE;
+        },
+        isDropOffAppointment() {
+            return this.appointmentType === AppointmentTypeStrings.DROP_OFF;
+        },
     },
     methods: {
         async setSelectedTimeSlot() {
@@ -563,6 +573,7 @@ export default {
     .supplemental-information {
         line-height: 1.5rem;
         font-size: 0.875rem;
+        text-align: left;
         li strong {
             font-weight: bold;
         }