Merge pull request #1109 from Safelite/feature/CSR-1137

CSR-1137 | Updating button-question and other minor changes

src/digital-components/button-question/button-question.vue

@@ -52,7 +52,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                             :isWide="isWide"
                             :validationRules="validationRules"
                             :textPosition="textPosition"
-                            :additionalButtonStyling="additionalButtonStyling"
+                            :additionalButtonData="additionalButtonData"
                             :lastValuePushedToGa="lastValuePushedToGa"
                             :setLastValuePushedToGa="setLastValuePushedToGa"
                             :suppressError="suppressError"
@@ -126,7 +126,7 @@ export default {
         suppressError: Boolean,
         useTextForValue: Boolean,
         valueToLogType: String,
-        additionalButtonStyling: String,
+        additionalButtonData: Object,
         isSmallQuestionText: Boolean,
         customButtonQuestionId: String,
         logDisplayedValuesEvent: {

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

@@ -72,6 +72,7 @@
 <script>
 // Supporting files
 import loader from "@/ux-components/loader/loader";
+import store from "@/store";
 import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
 import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
 
@@ -244,7 +245,8 @@ export default {
             let myPromise = new Promise((resolve, reject) => {
                 const response = config.customSelectableDatesCallback(
                     initialViewStartDate,
-                    initialViewEndDate
+                    initialViewEndDate,
+                    store.getters.order.serviceLocation.appointmentType
                 );
                 resolve(response);
             });
@@ -523,7 +525,8 @@ export default {
         async updateSelectableDates(monthStart, monthEnd) {
             const moreSelectableDates = await this.customSelectableDatesCallback(
                 monthStart,
-                monthEnd
+                monthEnd,
+                this.$store.getters.order.serviceLocation.appointmentType
             );
             moreSelectableDates.days.forEach((selectableDate) => {
                 const index = this.selectableDatesData.findIndex(

src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue

@@ -5,7 +5,7 @@
             :groupName="groupName"
             buttonTypeString="listButtonHorizontal"
             v-model="selectedValues"
-            additionalButtonStyling="listButtonHorizontalStrong"
+            :additionalButtonData="{ additionalButtonStyling: 'listButtonHorizontalStrong' }"
             isRequired />
     </div>
 </template>

src/layouts/schedule/schedule.vue

@@ -91,14 +91,14 @@ import store from "@/store";
 defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 defineRule("time-slot-selection-required", required(errorMessages.DATE_REQUIRED));
 
-const getAvailableDates = async (startDate, endDate) => {
+const getAvailableDates = async (startDate, endDate, appointmentType) => {
     // USING DATES PASSED, MAKE AN API CALL
     const newShopTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_SHOP_TIME_SLOTS,
         {
             startDate: startDate,
             endDate: endDate,
-            shopAppointmentType: "mobile", // TODO - PASS THIS IN FROM PREVIOUS PAGE?
+            shopAppointmentType: appointmentType,
         },
         false
     );
@@ -257,7 +257,11 @@ export default {
             // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
         },
         async getAvailableDatesMethod(startDate, endDate) {
-            const newShopTimeSlots = await getAvailableDates(startDate, endDate);
+            const newShopTimeSlots = await getAvailableDates(
+                startDate,
+                endDate,
+                this.appointmentType
+            );
             // ADD API CALL RESULTS TO EXISTING DATE DATA
             this.selectableDatesData.days = this.selectableDatesData.days.concat(
                 newShopTimeSlots.days

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

@@ -8,8 +8,8 @@
         :onModalClosedCallback="onModalClosed"
         @footer-button-event="closeModal">
         <textBlock
-            v-show="inshopAppointmentDurationTextWithTime"
+            v-show="durationTextBlockCopy"
-            :customText="inshopAppointmentDurationTextWithTime"
+            :customText="durationTextBlockCopy"
             justifyText="center"
             typeStyle="small"
             class="duration-text-block" />
@@ -90,13 +90,18 @@ export default {
     watch: {
         modelValue() {
             this.selectedTimeSlot = this.modelValue;
+            // Run component validation that is used at parent level
             this.handleChange(this.modelValue);
         },
+        // dateAndTimeSlotData(newValue, oldValue) {
+        //     const numberOfOptions = newValue?.timeSlots.length;
+        //     console.log('running');
+        //     if (numberOfOptions === 1) {
+        //         this.selectedTimeSlot = newValue.timeSlots[0].id;
+        //     }
+        // }
     },
     computed: {
-        appointmentDurationTextFromCms() {
-            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
-        },
         supplementalInformationBlock() {
             let appointmentTypeCmsWidgetName;
             let cmsFieldName = "BodyText";
@@ -127,6 +132,29 @@ export default {
         dropoffDisclaimerText() {
             return this.getCmsContent(this.dropoffCmsWidgetName, "FooterText");
         },
+        dropOffDurationText() {
+            return this.getCmsContent(this.dropoffCmsWidgetName, "SubheaderText");
+        },
+        inshopDurationText() {
+            const inshopDurationTextWithoutTime = this.getCmsContent(
+                this.cmsWidgetName,
+                "SubheaderText"
+            );
+            const inshopDurationTime = this.getDisplayTextForDurationLength(
+                this.estimatedServiceMinutesMinimum,
+                this.estimatedServiceMinutesMaximum
+            );
+            return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
+        },
+        durationTextBlockCopy() {
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+                return null;
+            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                return this.inshopDurationText;
+            } else {
+                return this.dropOffDurationText;
+            }
+        },
         shouldShowDropoffDisclaimerText() {
             return this.appointmentType === AppointmentTypeStrings.DROP_OFF && !this.isSameDay;
         },
@@ -145,21 +173,6 @@ export default {
             // Ex. Tuesday, April 23
             return `${weekdayName}, ${month} ${numberDayOfMonth}`;
         },
-        inshopAppointmentDurationTextWithTime() {
-            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                return null;
-            }
-            let durationSubHeaderText = this.appointmentDurationTextFromCms + " ";
-            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                durationSubHeaderText += "All day";
-            } else {
-                durationSubHeaderText += this.getDisplayTextForDurationLength(
-                    this.estimatedServiceMinutesMinimum,
-                    this.estimatedServiceMinutesMaximum
-                );
-            }
-            return durationSubHeaderText;
-        },
         availableTimeSlots() {
             if (this.dateAndTimeSlotData === null) {
                 return null;

src/mixins/input-button-wrapper-mixin.js

@@ -21,7 +21,7 @@ export default {
         textPosition: String,
         screenReaderOnlyText: String,
         isWide: Boolean,
-        additionalButtonStyling: String,
+        additionalButtonData: Object,
     },
     computed: {
         selectedValue: {

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -57,7 +57,9 @@ describe("list-button-horizontal.vue", () => {
             const { wrapper } = setupMocks({
                 mockData: {
                     propsData: {
-                        additionalButtonStyling: "listButtonHorizontalStrong",
+                        additionalButtonData: {
+                            additionalButtonStyling: "listButtonHorizontalStrong",
+                        },
                     },
                 },
             });

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -30,7 +30,9 @@ export default {
     mixins: [inputButtonWrapperMixin],
     computed: {
         isStrongStyling() {
-            return this.additionalButtonStyling === "listButtonHorizontalStrong";
+            return (
+                this.additionalButtonData?.additionalButtonStyling === "listButtonHorizontalStrong"
+            );
         },
     },
     components: {