From 3a6b43a629a74b85aebd1e04c5de324dba2c1a0a Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Mon, 22 May 2023 08:38:29 -0400
Subject: [PATCH 1/3] CSR-1137 | Integrate appointmentType from store

Used to be hardcoded
Also updates some durationText stuff
---
 .../date-picker/date-picker.vue               |  9 ++--
 src/layouts/schedule/schedule.vue             |  6 +--
 .../time-slot-modal-question.vue              | 50 +++++++++++--------
 3 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index c17c6a9ba..4d8705686 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/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";
 
@@ -203,7 +204,7 @@ export default {
             const todayDate = config.todayOverrideDateString
                 ? new Date(config.todayOverrideDateString)
                 : new Date();
-
+                
             let todayMonthIndex = todayDate.getMonth() + 1;
             let todayYearNum = todayDate.getFullYear();
             let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
@@ -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(
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 740fb76f4..36496e11a 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/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,7 @@ 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
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 9e33d1af0..66d53d23b 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
@@ -8,8 +8,8 @@
         :onModalClosedCallback="onModalClosed"
         @footer-button-event="closeModal">
         <textBlock
-            v-show="inshopAppointmentDurationTextWithTime"
-            :customText="inshopAppointmentDurationTextWithTime"
+            v-show="durationTextBlockCopy"
+            :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,26 @@ 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 +170,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;

From ee73f92d09526e9c966c5a404e3ff032af905bdd Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Mon, 22 May 2023 09:15:56 -0400
Subject: [PATCH 2/3] CSR-1137 | Remove 'additionalButtonStyling'

Replaced with 'additionalButtonData'
This should only affect list-button-horizontal
---
 src/digital-components/button-question/button-question.vue    | 4 ++--
 .../cash-or-insurance-question/cash-or-insurance-question.vue | 2 +-
 src/mixins/input-button-wrapper-mixin.js                      | 2 +-
 .../list-button-horizontal/list-button-horizontal.spec.js     | 4 +++-
 .../list-button-horizontal/list-button-horizontal.vue         | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index c760274af..a344286ef 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/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: {
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 6f6fd5c55..fdf29836a 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
@@ -5,7 +5,7 @@
             :groupName="groupName"
             buttonTypeString="listButtonHorizontal"
             v-model="selectedValues"
-            additionalButtonStyling="listButtonHorizontalStrong"
+            :additionalButtonData="{additionalButtonStyling: 'listButtonHorizontalStrong'}"
             isRequired />
     </div>
 </template>
diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js
index 286c3f21c..d2e1e72a3 100644
--- a/src/mixins/input-button-wrapper-mixin.js
+++ b/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: {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index 432717817..6ea37c4f7 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/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"
+                        }
                     },
                 },
             });
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 0776ffcac..3ed4872f9 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -30,7 +30,7 @@ export default {
     mixins: [inputButtonWrapperMixin],
     computed: {
         isStrongStyling() {
-            return this.additionalButtonStyling === "listButtonHorizontalStrong";
+            return this.additionalButtonData?.additionalButtonStyling === "listButtonHorizontalStrong";
         },
     },
     components: {

From 991e000c4ea6ed8a3ff3fb9a6f5671c1e56a71ec Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Mon, 22 May 2023 09:18:31 -0400
Subject: [PATCH 3/3] CSR-1137| Formatting

---
 src/digital-components/date-picker/date-picker.vue    |  6 +++---
 .../cash-or-insurance-question.vue                    |  2 +-
 src/layouts/schedule/schedule.vue                     |  6 +++++-
 .../time-slot-modal-question.vue                      | 11 +++++++----
 .../list-button-horizontal.spec.js                    |  4 ++--
 .../list-button-horizontal/list-button-horizontal.vue |  4 +++-
 6 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 4d8705686..9154383cd 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -204,7 +204,7 @@ export default {
             const todayDate = config.todayOverrideDateString
                 ? new Date(config.todayOverrideDateString)
                 : new Date();
-                
+
             let todayMonthIndex = todayDate.getMonth() + 1;
             let todayYearNum = todayDate.getFullYear();
             let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
@@ -246,7 +246,7 @@ export default {
                 const response = config.customSelectableDatesCallback(
                     initialViewStartDate,
                     initialViewEndDate,
-                    store.getters.order.serviceLocation.appointmentType,
+                    store.getters.order.serviceLocation.appointmentType
                 );
                 resolve(response);
             });
@@ -526,7 +526,7 @@ export default {
             const moreSelectableDates = await this.customSelectableDatesCallback(
                 monthStart,
                 monthEnd,
-                this.$store.getters.order.serviceLocation.appointmentType,
+                this.$store.getters.order.serviceLocation.appointmentType
             );
             moreSelectableDates.days.forEach((selectableDate) => {
                 const index = this.selectableDatesData.findIndex(
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 fdf29836a..45fef683a 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
@@ -5,7 +5,7 @@
             :groupName="groupName"
             buttonTypeString="listButtonHorizontal"
             v-model="selectedValues"
-            :additionalButtonData="{additionalButtonStyling: 'listButtonHorizontalStrong'}"
+            :additionalButtonData="{ additionalButtonStyling: 'listButtonHorizontalStrong' }"
             isRequired />
     </div>
 </template>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 36496e11a..60fb90b75 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -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, this.appointmentType);
+            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
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 66d53d23b..a73ab712d 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
@@ -136,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() {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index 6ea37c4f7..69efc7b4d 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -58,8 +58,8 @@ describe("list-button-horizontal.vue", () => {
                 mockData: {
                     propsData: {
                         additionalButtonData: {
-                            additionalButtonStyling: "listButtonHorizontalStrong"
-                        }
+                            additionalButtonStyling: "listButtonHorizontalStrong",
+                        },
                     },
                 },
             });
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 3ed4872f9..2add5a1bc 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -30,7 +30,9 @@ export default {
     mixins: [inputButtonWrapperMixin],
     computed: {
         isStrongStyling() {
-            return this.additionalButtonData?.additionalButtonStyling === "listButtonHorizontalStrong";
+            return (
+                this.additionalButtonData?.additionalButtonStyling === "listButtonHorizontalStrong"
+            );
         },
     },
     components: {