From 3dd2fac254e80d8900c7298723f8b905aea2dc4b Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 24 Aug 2023 08:26:33 -0400
Subject: [PATCH 01/21] Added sonarqube support files

---
 .scannerwork/.sonar_lock     |  0
 .scannerwork/report-task.txt |  6 ++++++
 sonar-project.properties     | 10 ++++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 .scannerwork/.sonar_lock
 create mode 100644 .scannerwork/report-task.txt
 create mode 100644 sonar-project.properties

diff --git a/.scannerwork/.sonar_lock b/.scannerwork/.sonar_lock
new file mode 100644
index 000000000..e69de29bb
diff --git a/.scannerwork/report-task.txt b/.scannerwork/report-task.txt
new file mode 100644
index 000000000..dbcf1e585
--- /dev/null
+++ b/.scannerwork/report-task.txt
@@ -0,0 +1,6 @@
+projectKey=DigitalConsumer.FixMyGlass
+serverUrl=http://localhost:9000
+serverVersion=10.1.0.73491
+dashboardUrl=http://localhost:9000/dashboard?id=DigitalConsumer.FixMyGlass
+ceTaskId=AYnlDa50m2ysCZ4aQNIX
+ceTaskUrl=http://localhost:9000/api/ce/task?id=AYnlDa50m2ysCZ4aQNIX
diff --git a/sonar-project.properties b/sonar-project.properties
new file mode 100644
index 000000000..c849286c4
--- /dev/null
+++ b/sonar-project.properties
@@ -0,0 +1,10 @@
+# must be unique in a given SonarQube instance
+sonar.projectKey=DigitalConsumer.FixMyGlass
+
+# --- optional properties ---
+
+# defaults to project key
+sonar.projectName=DigitalConsumer.FixMyGlass
+
+# defaults to 'not provided'
+sonar.projectVersion=1.0
\ No newline at end of file

From 78c53d6777847b94baf6c2b75b99f7a8413ddd1d Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 24 Aug 2023 08:26:33 -0400
Subject: [PATCH 02/21] Revert "Added sonarqube support files"

This reverts commit 3dd2fac254e80d8900c7298723f8b905aea2dc4b.
---
 .scannerwork/.sonar_lock     |  0
 .scannerwork/report-task.txt |  6 ------
 sonar-project.properties     | 10 ----------
 3 files changed, 16 deletions(-)
 delete mode 100644 .scannerwork/.sonar_lock
 delete mode 100644 .scannerwork/report-task.txt
 delete mode 100644 sonar-project.properties

diff --git a/.scannerwork/.sonar_lock b/.scannerwork/.sonar_lock
deleted file mode 100644
index e69de29bb..000000000
diff --git a/.scannerwork/report-task.txt b/.scannerwork/report-task.txt
deleted file mode 100644
index dbcf1e585..000000000
--- a/.scannerwork/report-task.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-projectKey=DigitalConsumer.FixMyGlass
-serverUrl=http://localhost:9000
-serverVersion=10.1.0.73491
-dashboardUrl=http://localhost:9000/dashboard?id=DigitalConsumer.FixMyGlass
-ceTaskId=AYnlDa50m2ysCZ4aQNIX
-ceTaskUrl=http://localhost:9000/api/ce/task?id=AYnlDa50m2ysCZ4aQNIX
diff --git a/sonar-project.properties b/sonar-project.properties
deleted file mode 100644
index c849286c4..000000000
--- a/sonar-project.properties
+++ /dev/null
@@ -1,10 +0,0 @@
-# must be unique in a given SonarQube instance
-sonar.projectKey=DigitalConsumer.FixMyGlass
-
-# --- optional properties ---
-
-# defaults to project key
-sonar.projectName=DigitalConsumer.FixMyGlass
-
-# defaults to 'not provided'
-sonar.projectVersion=1.0
\ No newline at end of file

From a462d768c0a34f8856865e40834f2b4621b7cf8a Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Tue, 29 Aug 2023 13:00:48 +0530
Subject: [PATCH 03/21] Update vehicle.vue

---
 src/layouts/vehicle/vehicle.vue | 41 +++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 37e813bed..49d99bef7 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -29,6 +29,7 @@
                                     :isDisabled="!makeOptions.length"
                                     :options="makeOptions"
                                     cmsWidgetName="VehicleMakeQuestion"
+                                    v-validate="{ rules: 'required', disabled: !makeOptions.length }"
                                     validationRules="make-required"
                                     placeHolderText="Select make"
                                     inputId="makeQuestionField" />
@@ -40,6 +41,7 @@
                                     cmsWidgetName="VehicleModelQuestion"
                                     :isDisabled="!modelOptions.length"
                                     :options="modelOptions"
+                                    v-validate="{ rules: 'required', disabled: !modelOptions.length }"
                                     validationRules="model-required"
                                     placeHolderText="Select model"
                                     inputId="modelQuestionField" />
@@ -51,6 +53,7 @@
                                     cmsWidgetName="VehicleStyleQuestion"
                                     :isDisabled="!styleOptions.length"
                                     :options="styleOptions"
+                                    v-validate="{ rules: 'required', disabled: !styleOptions.length }"
                                     validationRules="style-required"
                                     placeHolderText="Select style"
                                     inputId="styleQuestionField" />
@@ -99,10 +102,34 @@ import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
 
 //define validation rules
-defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
-defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
-defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
-defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
+defineRule("year-required", (value) => {
+    if (!value || !value.length ) {
+        return errorMessages.YEAR_REQUIRED;
+    }
+    return true;
+});
+defineRule("make-required", (value) => {
+    if (!value || !value.length) {
+        return errorMessages.MAKE_REQUIRED;
+    }
+    return true;
+});
+defineRule("model-required", (value) => {
+    if (!value || !value.length) {
+        return errorMessages.MODEL_REQUIRED;
+    }
+    return true;
+});
+defineRule("style-required", (value) => {
+    if (!value || !value.length) {
+        return errorMessages.STYLE_REQUIRED;
+    }
+    return true;
+});
+// defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
+// defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
+// defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
+// defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
 
 export default {
     name: "vehicle",
@@ -242,6 +269,9 @@ export default {
                 }
             } else {
                 this.makeOptions = [];
+                this.selectedMake = null;
+                this.selectedModel = null;
+                this.selectedStyle = null;
             }
         },
         async selectedMake(make) {
@@ -255,6 +285,8 @@ export default {
                 }
             } else {
                 this.modelOptions = [];
+                this.selectedModel = null;
+                this.selectedStyle = null;
             }
         },
         async selectedModel(model) {
@@ -271,6 +303,7 @@ export default {
                 }
             } else {
                 this.styleOptions = [];
+                this.selectedStyle = null;
             }
         },
         async selectedStyle(style) {

From 27fc4162b48b1953ca590c34caf1f3cda149d68c Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Wed, 30 Aug 2023 13:18:02 +0530
Subject: [PATCH 04/21] unmatched vehicle and validation

unmatched vehicle and validation
---
 .../dropdown-question/dropdown-question.vue   | 10 +++-
 .../vehicle-question/vehicle-question.vue     |  6 ++-
 src/layouts/vehicle/vehicle.vue               | 53 ++++++-------------
 3 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index 6c032b740..70bf6c90c 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/src/digital-components/dropdown-question/dropdown-question.vue
@@ -26,7 +26,7 @@
                 {{ value }}
             </option>
         </select>
-        <div v-show="errorMessage" class="row mt-2 form-test-error">
+        <div v-show="errorMessage && this.disableValidation" class="row mt-2 form-test-error">
             <span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
         </div>
     </div>
@@ -56,6 +56,11 @@ export default {
             required: false,
             default: false,
         },
+        disableValidationIfElementDisabled: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     setup(props) {
         const uuid = uuidv4();
@@ -110,6 +115,9 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
+        disableValidation() {
+            return this.disableValidationIfElementDisabled ? !this.isDisabled : true;
+        },
     },
     watch: {
         selectedOption(newValue) {
diff --git a/src/layouts/vehicle/vehicle-question/vehicle-question.vue b/src/layouts/vehicle/vehicle-question/vehicle-question.vue
index 79b58bfaa..171f5da3f 100644
--- a/src/layouts/vehicle/vehicle-question/vehicle-question.vue
+++ b/src/layouts/vehicle/vehicle-question/vehicle-question.vue
@@ -1,5 +1,9 @@
 <template>
-    <dropdownQuestion disableAutoFill v-model="selectedValue" :valueAsKey="true" />
+    <dropdownQuestion
+        disableAutoFill
+        v-model="selectedValue"
+        :valueAsKey="true"
+        :disableValidationIfElementDisabled="true" />
 </template>
 
 <script>
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 49d99bef7..07c09faee 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -29,7 +29,6 @@
                                     :isDisabled="!makeOptions.length"
                                     :options="makeOptions"
                                     cmsWidgetName="VehicleMakeQuestion"
-                                    v-validate="{ rules: 'required', disabled: !makeOptions.length }"
                                     validationRules="make-required"
                                     placeHolderText="Select make"
                                     inputId="makeQuestionField" />
@@ -41,7 +40,6 @@
                                     cmsWidgetName="VehicleModelQuestion"
                                     :isDisabled="!modelOptions.length"
                                     :options="modelOptions"
-                                    v-validate="{ rules: 'required', disabled: !modelOptions.length }"
                                     validationRules="model-required"
                                     placeHolderText="Select model"
                                     inputId="modelQuestionField" />
@@ -53,7 +51,6 @@
                                     cmsWidgetName="VehicleStyleQuestion"
                                     :isDisabled="!styleOptions.length"
                                     :options="styleOptions"
-                                    v-validate="{ rules: 'required', disabled: !styleOptions.length }"
                                     validationRules="style-required"
                                     placeHolderText="Select style"
                                     inputId="styleQuestionField" />
@@ -102,34 +99,10 @@ import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
 
 //define validation rules
-defineRule("year-required", (value) => {
-    if (!value || !value.length ) {
-        return errorMessages.YEAR_REQUIRED;
-    }
-    return true;
-});
-defineRule("make-required", (value) => {
-    if (!value || !value.length) {
-        return errorMessages.MAKE_REQUIRED;
-    }
-    return true;
-});
-defineRule("model-required", (value) => {
-    if (!value || !value.length) {
-        return errorMessages.MODEL_REQUIRED;
-    }
-    return true;
-});
-defineRule("style-required", (value) => {
-    if (!value || !value.length) {
-        return errorMessages.STYLE_REQUIRED;
-    }
-    return true;
-});
-// defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
-// defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
-// defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
-// defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
+defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
+defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
+defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
+defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
 
 export default {
     name: "vehicle",
@@ -141,7 +114,7 @@ export default {
             selectedStyle: this.selectedStylefromStore(),
             carId: null,
             category: null,
-            imageUrl: null,
+            imageUrl: this.getImagefromStore(),
             imageVifNumber: null,
             imageVifColor: null,
             yearOptions: [],
@@ -149,7 +122,6 @@ export default {
             modelOptions: [],
             styleOptions: [],
             displayGeneric: this.displayGenericFromStore(),
-            unmatchedVehicleIcon: false,
         };
     },
 
@@ -319,17 +291,19 @@ export default {
                 this.imageUrl = result?.data.imageUrl;
                 this.imageVifNumber = result?.data.imageVifNumber;
                 this.imageVifColor = result?.data.imageVifColor;
-                if (this.imageUrl == null) {
-                    this.displayGeneric = false;
-                    this.unmatchedVehicleIcon = true;
-                } else this.unmatchedVehicleIcon = false;
+                if (this.imageUrl == null) this.displayGeneric = false;
             } else {
                 this.imageUrl = null;
                 this.displayGeneric = true;
             }
         },
     },
-
+    computed: {
+        unmatchedVehicleIcon() {
+            if (this.imageUrl == null) return true;
+            else return false;
+        },
+    },
     methods: {
         getVehicle(year, make, model, style) {
             return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, {
@@ -410,6 +384,9 @@ export default {
                 model: model,
             });
         },
+        getImagefromStore() {
+            return store.getters.vehicle.imageUrl;
+        },
     },
 
     components: {

From 39436c533d70eab34d334e15380a4be60c606e75 Mon Sep 17 00:00:00 2001
From: CarlNation <32103961+CarlNation@users.noreply.github.com>
Date: Wed, 30 Aug 2023 08:38:49 -0400
Subject: [PATCH 05/21] CSR-1559

No need to reset customer name if they've changed their address.
Use vin change instead of name to trigger reset.
---
 src/store/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index e67eb7414..4a3282e1f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -336,8 +336,6 @@ export const mutations = {
     },
     resetRegistrationState(state) {
         state.order.vehicle.registration.licensePlate = null;
-        state.order.customer.firstName = null;
-        state.order.customer.lastName = null;
     },
     resetGlassPartsState(state) {
         state.order.lineItems.glassParts = null;
@@ -1676,8 +1674,7 @@ export const actions = {
     ) {
         //Reset dependent state when changing
         if (
-            registrationInfo?.firstName !== context.state.order.customer?.firstName ||
-            registrationInfo?.lastName !== context.state.order.customer?.lastName
+            vehicleInfo.vin !== context.state.order.vehicle.vin
         ) {
             context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
 

From 2f5d348bbac58ab4091a5351ef602edf62c01202 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Wed, 30 Aug 2023 08:43:14 -0400
Subject: [PATCH 06/21] CSR-1559 prettier

---
 src/store/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 4a3282e1f..cc8dc0b39 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1673,9 +1673,7 @@ export const actions = {
         { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }
     ) {
         //Reset dependent state when changing
-        if (
-            vehicleInfo.vin !== context.state.order.vehicle.vin
-        ) {
+        if (vehicleInfo.vin !== context.state.order.vehicle.vin) {
             context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
 
             if (!isSelectedGlassAvailableForVehicle) {

From c0b02c8c0016f6e2bc0ef1c6d76a8efa95f1b529 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 31 Aug 2023 07:39:17 -0400
Subject: [PATCH 07/21] Checkpoint before trying to simplify

---
 src/constants/schedule-constants.js           |  2 +-
 src/layouts/schedule/schedule.vue             | 32 +++++---
 .../time-slot-modal-question.vue              | 77 ++++++++++---------
 3 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/src/constants/schedule-constants.js b/src/constants/schedule-constants.js
index 86c2a793c..5bb784efb 100644
--- a/src/constants/schedule-constants.js
+++ b/src/constants/schedule-constants.js
@@ -4,7 +4,7 @@ const AppointmentTypeStrings = {
     DROP_OFF: "Dropoff",
 };
 
-const PREMIUM_TIME_SLOT_ID_FLAG = "-premium";
+const PREMIUM_TIME_SLOT_ID_FLAG = "-PREMIUM";
 
 const PREMIUM_FEE_PART_TYPE = "EARLY BIRD";
 
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 00b3e796b..86a200dc3 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -24,17 +24,17 @@
             <timeSlotModalQuestion
                 ref="timeSlotModalQuestion"
                 customComponentId="timeSlotModalQuestion"
+                v-model="selectedTimeSlot"
                 cmsWidgetName="TimeSlotModalQuestion"
                 mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
                 mobileCmsWidgetName="MobileTimeSlotModal"
                 dropoffCmsWidgetName="DropOffTimeSlotModal"
                 sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-                v-model="selectedTimeSlot"
+                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"      
                 :selectedDate="selectedDate"
                 :appointmentType="appointmentType"
                 :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                :dateAndTimeSlotData="timeSlotsForSelectedDate"
+                :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
                 :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
                 :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
                 @time-slot-modal-closed="timeSlotModalClosed"
@@ -293,18 +293,22 @@ export default {
         splitCopyOnCMSPlaceHolder,
         arePagePrerequisitesValid() {
             const serviceLocation = store.getters.order.serviceLocation;
+
             const serviceLocationPreReqs =
                 serviceLocation.zipCode &&
                 serviceLocation.zipCodeCtu &&
                 serviceLocation.appointmentType &&
                 (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
                     serviceLocation.provider.providerNumber);
+
             const paymentInfo = store.getters.payment.isInsurance !== null;
             const supportingItems = store.getters.lineItems.supportingItems !== null;
+
             const damageInfo =
                 store.getters.order.damage.isRepair ||
                 (store.getters.order.lineItems?.glassParts != null &&
                     store.getters.order.lineItems.glassParts.length > 0);
+
             return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo;
         },
         async getAvailableDatesMethod(startDate, endDate) {
@@ -327,14 +331,19 @@ export default {
         openInshopTimeSlotsModal() {
             this.$refs["timeSlotModalQuestion"].openModal();
         },
-        getSelectedTimeSlot() {
-            return store.getters.order.schedule;
-        },
         getSelectedDate() {
             return store.getters.order.schedule.date;
         },
-        getSelectedRouteCode() {
-            return store.getters.order.schedule.routeCode;
+        getSelectedTimeSlot() {
+            const supportingItems = this.getSupportingItems();
+            const isPremiumAppointment = !!supportingItems.filter(
+                (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
+            ).length > 0;
+
+            const selectedTimeSlot = store.getters.order.schedule;
+            selectedTimeSlot.isPremiumAppointment = isPremiumAppointment
+
+            return selectedTimeSlot;
         },
         getSupportingItems() {
             return store.getters.lineItems.supportingItems;
@@ -376,8 +385,8 @@ export default {
             // Ex: April 25
             return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
         },
-        // Expected input: "HH:MM"
         getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
+             // Expected input: "HH:MM"
             let hours = parseInt(militaryTimeInput.split(":")[0]);
             const minutes = militaryTimeInput.split(":")[1];
             const meridianNotation = hours > 11 ? "PM" : "AM";
@@ -395,6 +404,10 @@ export default {
         },
         forwardButtonAction() {
             this.updateSupportingItems();
+
+            // Remove the isPremiumAppointment flag to ensure it never gets into the store
+            delete this.selectedTimeSlot.isPremiumAppointment;
+
             this.dispatchStoreAction(this.storeActions.SAVE_SCHEDULE, this.selectedTimeSlot, false);
 
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
@@ -455,6 +468,7 @@ export default {
                     endTime: null,
                     jobMaxMinutes: null,
                     jobMinMinutes: 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 cce2c0503..79238f539 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
@@ -22,7 +22,7 @@
                 :answers="availableTimeSlots"
                 groupName="chooseTimeSlot"
                 textPosition="text-center"
-                v-model="selectedTimeSlotId"
+                v-model="selectedRouteCode"
                 isRequired
                 validationRules="time-slot-required" />
             <div
@@ -84,17 +84,7 @@ export default {
     name: "time-slot-modal-question",
     emits: ["update:modelValue"],
     props: {
-        modelValue: {
-            type: Object,
-            default: () => ({
-                routeCode: null,
-                date: null,
-                startTime: null,
-                endTime: null,
-                jobMaxMinutes: null,
-                jobMinMinutes: null,
-            }),
-        },
+        modelValue: Object,
         cmsWidgetName: String,
         mobileCmsWidgetName: String,
         mobilePremiumCmsWidgetName: String,
@@ -102,7 +92,7 @@ export default {
         sameDayDropOffCmsWidgetName: String,
         overnightDropOffCmsWidgetName: String,
         appointmentType: String,
-        dateAndTimeSlotData: Object,
+        timeSlotsForSelectedDate: Object,
         premiumAppointmentFee: Object,
         estimatedServiceMinutesMinimum: Number,
         estimatedServiceMinutesMaximum: Number,
@@ -113,7 +103,7 @@ export default {
     data() {
         return {
             isModalOpened: false,
-            selectedValue: null,
+            selectedRouteCode: this.getSelectedRouteCode(),
             timeSlotModalListButton: timeSlotModalListButton,
         };
     },
@@ -150,14 +140,8 @@ export default {
         modalName() {
             return "timeSlots";
         },
-        selectedTimeSlotId: {
-            get: function () {
-                return this.modelValue?.routeCode;
-            },
-            set: function (newValue) {
-                // Button Question only supports Number, or String data types so we must convert to the full object before emitting
-                this.selectedValue = this.getSelectedTimeSlotObject(newValue);
-            },
+        modal() {
+            return this.$refs[this.modalName];
         },
         supplementalInformationBlock() {
             let appointmentTypeCmsWidgetName;
@@ -295,21 +279,21 @@ export default {
             }
         },
         isSameDay() {
-            if (!this.dateAndTimeSlotData) {
+            if (!this.timeSlotsForSelectedDate) {
                 return false;
             }
 
-            const selectedDate = this.dateAndTimeSlotData.date;
+            const selectedDate = this.timeSlotsForSelectedDate.date;
             const todaysDate = new Date().toISOString().split("T")[0];
             return selectedDate === todaysDate;
         },
         dateSelectedReadableDate() {
-            if (!this.dateAndTimeSlotData) {
+            if (!this.timeSlotsForSelectedDate) {
                 return null;
             }
 
             // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = convertDateStringToDate(this.dateAndTimeSlotData.date);
+            const dateObject = convertDateStringToDate(this.timeSlotsForSelectedDate.date);
             // Ex: Tuesday, April 22
             return dateObject.toLocaleDateString("en-us", {
                 weekday: "long",
@@ -318,21 +302,18 @@ export default {
             });
         },
         availableTimeSlots() {
-            if (!this.dateAndTimeSlotData) {
+            if (!this.timeSlotsForSelectedDate) {
                 return null;
             }
 
             if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                return this.getAvailableTimeSlotsForDropOff(this.dateAndTimeSlotData.timeSlots);
+                return this.getAvailableTimeSlotsForDropOff(this.timeSlotsForSelectedDate.timeSlots);
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                return this.getAvailableTimeSlotsForMobile(this.dateAndTimeSlotData.timeSlots);
+                return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
             } else {
-                return this.getAvailableTimeSlotsForInshop(this.dateAndTimeSlotData.timeSlots);
+                return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
             }
         },
-        modal() {
-            return this.$refs[this.modalName];
-        },
     },
     methods: {
         openModal() {
@@ -348,7 +329,7 @@ export default {
             this.$emit("time-slot-modal-closed");
         },
         async setSelectedTimeSlot() {
-            this.$emit("update:modelValue", this.selectedValue);
+            this.$emit("update:modelValue", this.getSelectedTimeSlotObject(this.selectedRouteCode));
             this.closeModal();
         },
         getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
@@ -416,6 +397,7 @@ export default {
         getPremiumAppointmentTimeSlot(timeSlotData) {
             const formattedPrice =
                 "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
+
             return {
                 // Unique value is required for each <input> and the premium appoinment shares a timeSlot ID
                 value: this.addPremiumFlagToInput(timeSlotData.id),
@@ -426,31 +408,49 @@ export default {
                 },
             };
         },
+        getSelectedRouteCode() {
+            if (!this.modelValue?.routeCode) {
+                return null;
+            }
+
+            if (this.modelValue?.isPremiumAppointment) {
+                return this.addPremiumFlagToInput(this.modelValue?.routeCode);
+            } else {
+                return this.modelValue?.routeCode;
+            }
+        },
         autoSelectTimeSlotIfOnlyOneIsAvailable(newAvailableTimeSlotsValue) {
             const numberOfOptions = newAvailableTimeSlotsValue?.length;
             if (numberOfOptions === 1) {
-                this.selectedTimeSlotId = newAvailableTimeSlotsValue[0].value;
+                this.selectedRouteCode = newAvailableTimeSlotsValue[0].value;
             }
         },
         addPremiumFlagToInput(timeSlotId) {
             return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG);
         },
         removePremiumFlagFromInput(timeSlotId) {
-            return timeSlotId.substring(0, timeSlotId.length - PREMIUM_TIME_SLOT_ID_FLAG.length);
+            return timeSlotId.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
         },
         getSelectedTimeSlotObject(timeSlotId) {
-            const timeSlot = this.dateAndTimeSlotData?.timeSlots?.find(
+            console.log(timeSlotId)
+            const timeSlotIdIncludesPremium = timeSlotId?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
+            if (timeSlotIdIncludesPremium) {
+                timeSlotId = this.removePremiumFlagFromInput(timeSlotId);
+            }
+
+            const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
                 (timeSlot) => timeSlot.id == timeSlotId
             );
 
             if (timeSlot) {
                 return {
-                    date: this.dateAndTimeSlotData.date,
+                    date: this.timeSlotsForSelectedDate.date,
                     routeCode: timeSlot.id,
                     startTime: timeSlot.startTime,
                     endTime: timeSlot.endTime,
                     jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(),
                     jobMinMinutes: this.estimatedServiceMinutesMinimum.toString(),
+                    isPremiumAppointment: timeSlotIdIncludesPremium ? true : false
                 };
             }
 
@@ -461,6 +461,7 @@ export default {
                 routeCode: null,
                 jobMaxMinutes: null,
                 jobMinMinutes: null,
+                isPremiumAppointment: null
             };
         },
     },

From 0d5a8d15640fe54d8cbe7fd709a14c2376ae67ce Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Thu, 31 Aug 2023 17:34:49 +0530
Subject: [PATCH 08/21] Update vehicle.vue

---
 src/layouts/vehicle/vehicle.vue | 37 +++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 07c09faee..ea0f2e878 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -112,7 +112,7 @@ export default {
             selectedMake: this.selectedMakefromStore(),
             selectedModel: this.selectedModelfromStore(),
             selectedStyle: this.selectedStylefromStore(),
-            carId: null,
+            carId: this.getCarIdFromStore(),
             category: null,
             imageUrl: this.getImagefromStore(),
             imageVifNumber: null,
@@ -121,7 +121,7 @@ export default {
             makeOptions: [],
             modelOptions: [],
             styleOptions: [],
-            displayGeneric: this.displayGenericFromStore(),
+            //displayGeneric: this.displayGenericFromStore(),
         };
     },
 
@@ -280,6 +280,7 @@ export default {
         },
         async selectedStyle(style) {
             if (style) {
+                this.imageUrl = "";
                 const result = await this.getVehicle(
                     this.selectedYear,
                     this.selectedMake,
@@ -291,10 +292,10 @@ export default {
                 this.imageUrl = result?.data.imageUrl;
                 this.imageVifNumber = result?.data.imageVifNumber;
                 this.imageVifColor = result?.data.imageVifColor;
-                if (this.imageUrl == null) this.displayGeneric = false;
+                //if (this.imageUrl == null) this.displayGeneric = false;
             } else {
                 this.imageUrl = null;
-                this.displayGeneric = true;
+               // this.displayGeneric = true;
             }
         },
     },
@@ -303,6 +304,13 @@ export default {
             if (this.imageUrl == null) return true;
             else return false;
         },
+        displayGeneric() {
+            if (this.imageUrl !== null && this.imageUrl !== "") return false;
+            else if(!this.selectedStyle) return true;
+            else if (this.imageUrl == null && this.carId !== null)
+                return false;
+            else return true;
+        },
     },
     methods: {
         getVehicle(year, make, model, style) {
@@ -313,15 +321,15 @@ export default {
                 style: style,
             });
         },
-        displayGenericFromStore() {
-            if (store.getters.vehicle.imageUrl !== null) return false;
-            else if (
-                store.getters.vehicle.imageUrl === null &&
-                store.getters.vehicle.carId !== null
-            )
-                return false;
-            else return true;
-        },
+        // displayGenericFromStore() {
+        //     if (store.getters.vehicle.imageUrl !== null) return false;
+        //     else if (
+        //         store.getters.vehicle.imageUrl === null &&
+        //         store.getters.vehicle.carId !== null
+        //     )
+        //         return false;
+        //     else return true;
+        // },
         arePagePrerequisitesValid() {
             return true;
         },
@@ -387,6 +395,9 @@ export default {
         getImagefromStore() {
             return store.getters.vehicle.imageUrl;
         },
+        getCarIdFromStore() {
+            return store.getters.vehicle.carId;
+        },
     },
 
     components: {

From b43191257e1ed593ba183686e44e3ae3734e08d5 Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Thu, 31 Aug 2023 19:54:18 +0530
Subject: [PATCH 09/21] Update vehicle.vue

vehicleInProgress
---
 src/layouts/vehicle/vehicle.vue | 30 ++++++++++--------------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index ea0f2e878..6429f9a72 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -59,8 +59,8 @@
                                     cmsWidgetName="VehicleBannerWidget"
                                     :displayGenericVehicleImage="displayGeneric"
                                     :displayVehicleImage="imageUrl"
-                                    :vehicleCategory="category"
-                                    :displayUnmatchedVehicleIcon="unmatchedVehicleIcon"
+                                    :vehicleCategory="category"  
+                                    :displayUnmatchedVehicleIcon="unmatchedVehicleIcon"                                  
                                     class="mt-5 mb-3"
                                     ref="banner" />
 
@@ -121,7 +121,7 @@ export default {
             makeOptions: [],
             modelOptions: [],
             styleOptions: [],
-            //displayGeneric: this.displayGenericFromStore(),
+            vehicleInProgress:false,            
         };
     },
 
@@ -280,22 +280,22 @@ export default {
         },
         async selectedStyle(style) {
             if (style) {
-                this.imageUrl = "";
+                this.vehicleInProgress = true;
                 const result = await this.getVehicle(
                     this.selectedYear,
                     this.selectedMake,
                     this.selectedModel,
                     style
                 );
+                this.vehicleInProgress = false;
                 this.carId = result?.data.carId;
                 this.category = result?.data.category;
                 this.imageUrl = result?.data.imageUrl;
                 this.imageVifNumber = result?.data.imageVifNumber;
                 this.imageVifColor = result?.data.imageVifColor;
-                //if (this.imageUrl == null) this.displayGeneric = false;
+                
             } else {
                 this.imageUrl = null;
-               // this.displayGeneric = true;
             }
         },
     },
@@ -305,10 +305,9 @@ export default {
             else return false;
         },
         displayGeneric() {
-            if (this.imageUrl !== null && this.imageUrl !== "") return false;
-            else if(!this.selectedStyle) return true;
-            else if (this.imageUrl == null && this.carId !== null)
-                return false;
+            if (!this.selectedStyle) return true;
+            else if(this.getVehicleInProgress) return true;           
+            else if (this.imageUrl == null && this.carId !== null) return false;
             else return true;
         },
     },
@@ -320,16 +319,7 @@ export default {
                 model: model,
                 style: style,
             });
-        },
-        // displayGenericFromStore() {
-        //     if (store.getters.vehicle.imageUrl !== null) return false;
-        //     else if (
-        //         store.getters.vehicle.imageUrl === null &&
-        //         store.getters.vehicle.carId !== null
-        //     )
-        //         return false;
-        //     else return true;
-        // },
+        },       
         arePagePrerequisitesValid() {
             return true;
         },

From 36b0dceb15a638d1474a6009ec9f123f9ed86785 Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Thu, 31 Aug 2023 20:00:10 +0530
Subject: [PATCH 10/21] Update vehicle.vue

added flag
---
 src/layouts/vehicle/vehicle.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 6429f9a72..9fd87be2f 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -121,6 +121,7 @@ export default {
             makeOptions: [],
             modelOptions: [],
             styleOptions: [],
+            //flag to check getVehicle action in progress
             vehicleInProgress:false,            
         };
     },

From c214b73378e1a9f57667532e3f7b20daefcd722f Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Fri, 1 Sep 2023 09:41:31 +0530
Subject: [PATCH 11/21] CSR-1418

---
 src/layouts/vehicle/vehicle.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 9fd87be2f..28900033b 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -59,8 +59,8 @@
                                     cmsWidgetName="VehicleBannerWidget"
                                     :displayGenericVehicleImage="displayGeneric"
                                     :displayVehicleImage="imageUrl"
-                                    :vehicleCategory="category"  
-                                    :displayUnmatchedVehicleIcon="unmatchedVehicleIcon"                                  
+                                    :vehicleCategory="category"
+                                    :displayUnmatchedVehicleIcon="unmatchedVehicleIcon"
                                     class="mt-5 mb-3"
                                     ref="banner" />
 
@@ -122,7 +122,7 @@ export default {
             modelOptions: [],
             styleOptions: [],
             //flag to check getVehicle action in progress
-            vehicleInProgress:false,            
+            vehicleInProgress: false,
         };
     },
 
@@ -294,7 +294,6 @@ export default {
                 this.imageUrl = result?.data.imageUrl;
                 this.imageVifNumber = result?.data.imageVifNumber;
                 this.imageVifColor = result?.data.imageVifColor;
-                
             } else {
                 this.imageUrl = null;
             }
@@ -307,7 +306,7 @@ export default {
         },
         displayGeneric() {
             if (!this.selectedStyle) return true;
-            else if(this.getVehicleInProgress) return true;           
+            else if (this.vehicleInProgress) return true;
             else if (this.imageUrl == null && this.carId !== null) return false;
             else return true;
         },
@@ -320,7 +319,7 @@ export default {
                 model: model,
                 style: style,
             });
-        },       
+        },
         arePagePrerequisitesValid() {
             return true;
         },

From 8210ad3c829b3a04d8b1b8c5a99f4ad3adb96d95 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 1 Sep 2023 07:17:17 -0400
Subject: [PATCH 12/21] Before merging from develop and hopefully fixing
 massive amount of broken tests

---
 src/layouts/schedule/schedule.vue             |  83 ++++++------
 .../time-slot-modal-question.vue              | 122 +++++++++++-------
 2 files changed, 116 insertions(+), 89 deletions(-)

diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 86a200dc3..156d3696d 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -24,13 +24,13 @@
             <timeSlotModalQuestion
                 ref="timeSlotModalQuestion"
                 customComponentId="timeSlotModalQuestion"
-                v-model="selectedTimeSlot"
+                v-model="selectedTimeSlotInfo"
                 cmsWidgetName="TimeSlotModalQuestion"
                 mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
                 mobileCmsWidgetName="MobileTimeSlotModal"
                 dropoffCmsWidgetName="DropOffTimeSlotModal"
                 sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"      
+                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
                 :selectedDate="selectedDate"
                 :appointmentType="appointmentType"
                 :premiumAppointmentFee="mobilePremiumAppointmentFee"
@@ -81,12 +81,7 @@ import store from "@/store";
 // DEFINE VALIDATION RULES
 defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 defineRule("time-slot-selection-required", (value) => {
-    if (
-        value.date == null ||
-        value.startTime == null ||
-        value.routeCode == null ||
-        value.estimatedServiceMinutesMaximum
-    ) {
+    if (value?.timeSlot?.routeCode == null) {
         return errorMessages.DATE_REQUIRED;
     }
     return true;
@@ -190,7 +185,7 @@ export default {
     data() {
         return {
             selectedDate: this.getSelectedDate(),
-            selectedTimeSlot: this.getSelectedTimeSlot(),
+            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             selectableDatesData: [],
             mobilePremiumAppointmentFee: null,
         };
@@ -265,7 +260,7 @@ export default {
             vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
                 ? resultMap.premiumFeeWithPrice[0]
                 : null;
-            vm.updateFooterButtonText(vm.selectedTimeSlot);
+            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
         });
     },
     computed: {
@@ -334,47 +329,52 @@ export default {
         getSelectedDate() {
             return store.getters.order.schedule.date;
         },
-        getSelectedTimeSlot() {
+        getSelectedTimeSlotInfo() {
             const supportingItems = this.getSupportingItems();
-            const isPremiumAppointment = !!supportingItems.filter(
-                (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
-            ).length > 0;
+            const isPremiumAppointment =
+                !!supportingItems.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE)
+                    .length > 0;
 
-            const selectedTimeSlot = store.getters.order.schedule;
-            selectedTimeSlot.isPremiumAppointment = isPremiumAppointment
+            const selectedTimeSlotInfo = {
+                timeSlot: store.getters.order.schedule,
+                isPremiumAppointment: isPremiumAppointment,
+            };
 
-            return selectedTimeSlot;
+            return selectedTimeSlotInfo;
         },
         getSupportingItems() {
             return store.getters.lineItems.supportingItems;
         },
         timeSlotModalClosed() {
             // Clear the selectedDate if no timeSlot has been selected
-            if (this.selectedTimeSlot.routeCode == null) {
+            if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
                 this.selectedDate = null;
             }
         },
-        updateFooterButtonText(timeSlot) {
+        updateFooterButtonText(timeSlotInfo) {
             let funnelFooterButtonText;
-            if (!timeSlot || !timeSlot.date) {
+            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
                 funnelFooterButtonText = "Continue";
             } else {
                 funnelFooterButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
-                    timeSlot.date
+                    timeSlotInfo.timeSlot.date
                 )}`;
 
                 if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                     funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlot.startTime
+                        timeSlotInfo.timeSlot.startTime
                     )}`;
                 } else if (
                     this.appointmentType === AppointmentTypeStrings.MOBILE &&
-                    !timeSlot.isPremiumAppointment
+                    !timeSlotInfo.isPremiumAppointment
                 ) {
                     funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlot.startTime,
+                        timeSlotInfo.timeSlot.startTime,
                         true
-                    )} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime, true)}`;
+                    )} - ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.endTime,
+                        true
+                    )}`;
                 }
             }
             this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
@@ -386,13 +386,15 @@ export default {
             return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
         },
         getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
-             // Expected input: "HH:MM"
+            // Expected input: "HH:MM"
             let hours = parseInt(militaryTimeInput.split(":")[0]);
             const minutes = militaryTimeInput.split(":")[1];
             const meridianNotation = hours > 11 ? "PM" : "AM";
+
             if (hours > 12) {
                 hours -= 12;
             }
+
             if (shouldTrimMinutesIfEmpty && minutes === "00") {
                 return `${hours} ${meridianNotation}`;
             } else {
@@ -405,10 +407,11 @@ export default {
         forwardButtonAction() {
             this.updateSupportingItems();
 
-            // Remove the isPremiumAppointment flag to ensure it never gets into the store
-            delete this.selectedTimeSlot.isPremiumAppointment;
-
-            this.dispatchStoreAction(this.storeActions.SAVE_SCHEDULE, this.selectedTimeSlot, false);
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SCHEDULE,
+                this.selectedTimeSlotInfo.timeSlot,
+                false
+            );
 
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
@@ -418,7 +421,7 @@ export default {
             // if we have a premium fee(early bird), then save/update supporting items
             if (
                 this.appointmentType === AppointmentTypeStrings.MOBILE &&
-                this.selectedTimeSlot?.isPremiumAppointment
+                this.selectedTimeSlotInfo?.isPremiumAppointment
             ) {
                 const earlyBirdIndex = supportingItems.findIndex(
                     (item) => item.partType == PREMIUM_FEE_PART_TYPE
@@ -461,18 +464,20 @@ export default {
         selectedDate(newValue, oldValue) {
             // Clear time slot selection if date selected changes
             if (newValue !== oldValue) {
-                this.selectedTimeSlot = {
-                    date: null,
-                    routeCode: null,
-                    startTime: null,
-                    endTime: null,
-                    jobMaxMinutes: null,
-                    jobMinMinutes: null,
+                this.selectedTimeSlotInfo = {
+                    timeSlot: {
+                        date: null,
+                        routeCode: null,
+                        startTime: null,
+                        endTime: null,
+                        jobMaxMinutes: null,
+                        jobMinMinutes: null,
+                    },
                     isPremiumAppointment: null,
                 };
             }
         },
-        selectedTimeSlot(newValue) {
+        selectedTimeSlotInfo(newValue) {
             this.updateFooterButtonText(newValue);
         },
     },
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 79238f539..007987ba8 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
@@ -47,12 +47,12 @@ import buttonQuestion from "@/digital-components/button-question/button-question
 import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button";
 
 // Helpers
+import { deepClone } from "@/helpers/object-helper";
 import {
     convertDateStringToDate,
     militaryToTwelveHourTime,
     getDisplayTextForDurationLength,
 } from "@/layouts/schedule/helpers/schedule-helper";
-import { deepClone } from "@/helpers/object-helper";
 
 // Validation - TODO: Move this somewhere more global?
 import { defineRule, useField } from "vee-validate";
@@ -84,7 +84,20 @@ export default {
     name: "time-slot-modal-question",
     emits: ["update:modelValue"],
     props: {
-        modelValue: Object,
+        modelValue: {
+            type: Object,
+            default: () => ({
+                timeSlot: {
+                    routeCode: null,
+                    date: null,
+                    startTime: null,
+                    endTime: null,
+                    jobMaxMinutes: null,
+                    jobMinMinutes: null,
+                },
+                isPremiumAppointment: null,
+            }),
+        },
         cmsWidgetName: String,
         mobileCmsWidgetName: String,
         mobilePremiumCmsWidgetName: String,
@@ -148,18 +161,18 @@ export default {
             if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return null;
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                appointmentTypeCmsWidgetName = this.selectedTimeSlotId?.includes(
+                appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
                     PREMIUM_TIME_SLOT_ID_FLAG
                 )
                     ? this.mobilePremiumCmsWidgetName
                     : this.mobileCmsWidgetName;
             } else {
-                if (!this.selectedTimeSlotId) {
+                if (!this.selectedRouteCode) {
                     return null;
                 } else {
                     appointmentTypeCmsWidgetName =
                         this.getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
-                            this.selectedTimeSlotId,
+                            this.selectedRouteCode,
                             true
                         );
                 }
@@ -216,13 +229,13 @@ export default {
         },
         disclaimerTextBlockCopy() {
             if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                if (this.selectedTimeSlotId?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
+                if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
                     if (this.isSameDay) {
                         return this.sameDayDropOffDisclaimerText;
                     } else {
                         return this.dropoffDisclaimerText;
                     }
-                } else if (this.selectedTimeSlotId?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                } else if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                     return this.overnightDropOffDisclaimerText;
                 } else {
                     return null;
@@ -265,9 +278,9 @@ export default {
             } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return this.inshopDurationText;
             } else {
-                if (this.selectedTimeSlotId?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                     return this.overnightDropoffDurationText;
-                } else if (this.selectedTimeSlotId?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
+                } else if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
                     if (this.isSameDay) {
                         return this.sameDayDropoffDurationText;
                     } else {
@@ -307,7 +320,9 @@ export default {
             }
 
             if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                return this.getAvailableTimeSlotsForDropOff(this.timeSlotsForSelectedDate.timeSlots);
+                return this.getAvailableTimeSlotsForDropOff(
+                    this.timeSlotsForSelectedDate.timeSlots
+                );
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
             } else {
@@ -329,16 +344,19 @@ export default {
             this.$emit("time-slot-modal-closed");
         },
         async setSelectedTimeSlot() {
-            this.$emit("update:modelValue", this.getSelectedTimeSlotObject(this.selectedRouteCode));
+            this.$emit(
+                "update:modelValue",
+                this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
+            );
             this.closeModal();
         },
         getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
-            selectedTimeSlotId,
+            selectedRouteCode,
             isSameDayRelevant = false
         ) {
-            if (selectedTimeSlotId.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+            if (selectedRouteCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                 return this.overnightDropOffCmsWidgetName;
-            } else if (selectedTimeSlotId.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
+            } else if (selectedRouteCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
                 return this.isSameDay && isSameDayRelevant
                     ? this.sameDayDropOffCmsWidgetName
                     : this.dropoffCmsWidgetName;
@@ -399,7 +417,7 @@ export default {
                 "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
 
             return {
-                // Unique value is required for each <input> and the premium appoinment shares a timeSlot ID
+                // Unique value is required for each <input> and the premium appoinment shares an id
                 value: this.addPremiumFlagToInput(timeSlotData.id),
                 buttonLabel: this.premiumAppointmentButtonText,
                 buttonLabelSubCopy: formattedPrice,
@@ -409,59 +427,65 @@ export default {
             };
         },
         getSelectedRouteCode() {
-            if (!this.modelValue?.routeCode) {
-                return null;
+            let selectedRouteCode;
+            if (!this.modelValue?.timeSlot) {
+                selectedRouteCode = null;
             }
 
             if (this.modelValue?.isPremiumAppointment) {
-                return this.addPremiumFlagToInput(this.modelValue?.routeCode);
+                selectedRouteCode = this.addPremiumFlagToInput(this.modelValue?.timeSlot?.routeCode);
             } else {
-                return this.modelValue?.routeCode;
+                selectedRouteCode = this.modelValue?.timeSlot?.routeCode;
             }
+
+            return selectedRouteCode;
         },
-        autoSelectTimeSlotIfOnlyOneIsAvailable(newAvailableTimeSlotsValue) {
-            const numberOfOptions = newAvailableTimeSlotsValue?.length;
+        autoSelectTimeSlotIfOnlyOneIsAvailable() {
+            const numberOfOptions = this.availableTimeSlots?.length;
             if (numberOfOptions === 1) {
-                this.selectedRouteCode = newAvailableTimeSlotsValue[0].value;
+                this.selectedRouteCode = this.availableTimeSlots[0].value;
             }
         },
-        addPremiumFlagToInput(timeSlotId) {
-            return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG);
+        addPremiumFlagToInput(routeCode) {
+            return (routeCode += PREMIUM_TIME_SLOT_ID_FLAG);
         },
-        removePremiumFlagFromInput(timeSlotId) {
-            return timeSlotId.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
+        removePremiumFlagFromInput(routeCode) {
+            return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
         },
-        getSelectedTimeSlotObject(timeSlotId) {
-            console.log(timeSlotId)
-            const timeSlotIdIncludesPremium = timeSlotId?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
-            if (timeSlotIdIncludesPremium) {
-                timeSlotId = this.removePremiumFlagFromInput(timeSlotId);
+        getSelectedTimeSlotInfoObject(routeCode) {
+            const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
+            if (routeCodeIncludesPremium) {
+                routeCode = this.removePremiumFlagFromInput(routeCode);
             }
 
             const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
-                (timeSlot) => timeSlot.id == timeSlotId
+                (timeSlot) => timeSlot.id == routeCode
             );
 
             if (timeSlot) {
                 return {
-                    date: this.timeSlotsForSelectedDate.date,
-                    routeCode: timeSlot.id,
-                    startTime: timeSlot.startTime,
-                    endTime: timeSlot.endTime,
-                    jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(),
-                    jobMinMinutes: this.estimatedServiceMinutesMinimum.toString(),
-                    isPremiumAppointment: timeSlotIdIncludesPremium ? true : false
+                    timeSlot: {
+                        date: this.timeSlotsForSelectedDate.date,
+                        routeCode: timeSlot.id,
+                        startTime: timeSlot.startTime,
+                        endTime: timeSlot.endTime,
+                        jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(),
+                        jobMinMinutes: this.estimatedServiceMinutesMinimum.toString(),
+                    },
+                    isPremiumAppointment: routeCodeIncludesPremium ? true : false,
                 };
             }
 
             return {
-                date: null,
-                startTime: null,
-                endTime: null,
-                routeCode: null,
-                jobMaxMinutes: null,
-                jobMinMinutes: null,
-                isPremiumAppointment: null
+                timeSlot: {
+                    date: null,
+                    startTime: null,
+                    endTime: null,
+                    routeCode: null,
+                    jobMaxMinutes: null,
+                    jobMinMinutes: null,
+                },
+                isPremiumAppointment: null,
             };
         },
     },
@@ -474,12 +498,10 @@ export default {
         },
         selectedDate: {
             handler() {
-                this.selectedTimeSlotId = null;
+                this.selectedRouteCode = null;
+                this.autoSelectTimeSlotIfOnlyOneIsAvailable();
             },
         },
-        availableTimeSlots(newValue) {
-            this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue);
-        },
     },
     components: {
         modal,

From 76b11fb39a5680fd639b89842be61dcc008f6b89 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Fri, 1 Sep 2023 16:47:46 +0530
Subject: [PATCH 13/21] Update vehicle.vue

---
 src/layouts/vehicle/vehicle.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 28900033b..c8c404b47 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -251,7 +251,10 @@ export default {
             if (make) {
                 const result = await this.getModelOptions(this.selectedYear, make);
                 this.modelOptions = result?.data;
-                if (this.selectedMakefromStore() !== make) {
+                if (
+                    this.selectedMakefromStore() === make ||
+                    this.selectedMakefromStore() !== make
+                ) {
                     if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
                     else this.selectedModel = null;
                     this.selectedStyle = null;
@@ -270,7 +273,10 @@ export default {
                     model
                 );
                 this.styleOptions = result?.data;
-                if (this.selectedModelfromStore() !== model) {
+                if (
+                    this.selectedModelfromStore() !== model ||
+                    this.selectedModelfromStore() === model
+                ) {
                     if (this.styleOptions.length === 1) this.selectedStyle = this.styleOptions[0];
                     else this.selectedStyle = null;
                 }

From 7750511ecffe1b138c62233922651363bdee0194 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Fri, 1 Sep 2023 17:30:09 +0530
Subject: [PATCH 14/21] Update vehicle.vue

---
 src/layouts/vehicle/vehicle.vue | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index c8c404b47..7d9b7dffa 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -251,14 +251,9 @@ export default {
             if (make) {
                 const result = await this.getModelOptions(this.selectedYear, make);
                 this.modelOptions = result?.data;
-                if (
-                    this.selectedMakefromStore() === make ||
-                    this.selectedMakefromStore() !== make
-                ) {
-                    if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
-                    else this.selectedModel = null;
-                    this.selectedStyle = null;
-                }
+                if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
+                else this.selectedModel = null;
+                this.selectedStyle = null;
             } else {
                 this.modelOptions = [];
                 this.selectedModel = null;
@@ -273,13 +268,8 @@ export default {
                     model
                 );
                 this.styleOptions = result?.data;
-                if (
-                    this.selectedModelfromStore() !== model ||
-                    this.selectedModelfromStore() === model
-                ) {
-                    if (this.styleOptions.length === 1) this.selectedStyle = this.styleOptions[0];
-                    else this.selectedStyle = null;
-                }
+                if (this.styleOptions.length === 1) this.selectedStyle = this.styleOptions[0];
+                else this.selectedStyle = null;
             } else {
                 this.styleOptions = [];
                 this.selectedStyle = null;

From 868f7d34372ac4db7ff664c68be4626a5f36f50e Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Fri, 1 Sep 2023 17:52:07 +0530
Subject: [PATCH 15/21] Update vehicle.vue

---
 src/layouts/vehicle/vehicle.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 7d9b7dffa..90beead0c 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -252,8 +252,10 @@ export default {
                 const result = await this.getModelOptions(this.selectedYear, make);
                 this.modelOptions = result?.data;
                 if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
-                else this.selectedModel = null;
-                this.selectedStyle = null;
+                else {
+                    this.selectedModel = null;
+                    this.selectedStyle = null;
+                }
             } else {
                 this.modelOptions = [];
                 this.selectedModel = null;

From 7d4f2a181c3426bc8b3d852714033f544b982c97 Mon Sep 17 00:00:00 2001
From: sheena <sheena.sukumaran@safelite.com>
Date: Fri, 1 Sep 2023 18:09:17 +0530
Subject: [PATCH 16/21] CSR-1615

Updated the font-color
---
 .../mobile-location-modal-questions.vue                    | 7 +++++--
 src/layouts/service-location/service-location.vue          | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index 6873ce294..abd3a38e4 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -5,7 +5,7 @@
                 <label
                     for="mobileLocationLinkPromptId"
                     :aria-label="mobileLocationLinkPromptText"
-                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
+                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
                     v-html="mobileLocationLinkPromptText"></label>
                 <div class="update-mobile-location-text-link">
                     <textLink
@@ -307,6 +307,9 @@ export default {
 }
 
 #mobileLocationLinkPromptId {
-    white-space: pre-line;
+    white-space: pre-line;   
+}
+.text-black{
+    color: $black;
 }
 </style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 73537f75c..f06ee3aeb 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -430,6 +430,7 @@ export default {
 .question-text {
     & > span {
         text-align: center;
+        color:$black;
     }
 }
 </style>

From e300b81964771c27c481358cd4b68ba2c0622d44 Mon Sep 17 00:00:00 2001
From: sheena <sheena.sukumaran@safelite.com>
Date: Fri, 1 Sep 2023 18:13:05 +0530
Subject: [PATCH 17/21] CSR-1615

---
 .../mobile-location-modal-questions.vue                       | 4 ++--
 src/layouts/service-location/service-location.vue             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index abd3a38e4..0fef11cb1 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -307,9 +307,9 @@ export default {
 }
 
 #mobileLocationLinkPromptId {
-    white-space: pre-line;   
+    white-space: pre-line;
 }
-.text-black{
+.text-black {
     color: $black;
 }
 </style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index f06ee3aeb..9fca2f77e 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -430,7 +430,7 @@ export default {
 .question-text {
     & > span {
         text-align: center;
-        color:$black;
+        color: $black;
     }
 }
 </style>

From 312242218623297afede8e38fb489b2a11d6ffe5 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Fri, 1 Sep 2023 20:34:45 +0530
Subject: [PATCH 18/21] Update vehicle.vue

---
 src/layouts/vehicle/vehicle.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 90beead0c..db72d30f2 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -112,11 +112,11 @@ export default {
             selectedMake: this.selectedMakefromStore(),
             selectedModel: this.selectedModelfromStore(),
             selectedStyle: this.selectedStylefromStore(),
-            carId: this.getCarIdFromStore(),
-            category: null,
+            carId: this.getCarIdfromStore(),
+            category: this.getCategoryfromStore(),
             imageUrl: this.getImagefromStore(),
-            imageVifNumber: null,
-            imageVifColor: null,
+            imageVifNumber: this.getImageVifNumberfromStore(),
+            imageVifColor: this.getImageVifColorfromStore(),
             yearOptions: [],
             makeOptions: [],
             modelOptions: [],
@@ -383,9 +383,18 @@ export default {
         getImagefromStore() {
             return store.getters.vehicle.imageUrl;
         },
-        getCarIdFromStore() {
+        getCarIdfromStore() {
             return store.getters.vehicle.carId;
         },
+        getCategoryfromStore() {
+            return store.getters.vehicle.category;
+        },
+        getImageVifNumberfromStore() {
+            return store.getters.vehicle.imageVifNumber;
+        },
+        getImageVifColorfromStore() {
+            return store.getters.vehicle.imageVifColor;
+        },
     },
 
     components: {

From 7cb8ef3043640930e601a2e67e11decc5cb0ae85 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 5 Sep 2023 07:16:57 -0400
Subject: [PATCH 19/21] Updated unit tests

---
 src/layouts/schedule/schedule.spec.js         | 138 ++++----
 .../time-slot-modal-question.spec.js          | 295 +++++++++++++++---
 .../time-slot-modal-question.vue              |   7 +-
 3 files changed, 322 insertions(+), 118 deletions(-)

diff --git a/src/layouts/schedule/schedule.spec.js b/src/layouts/schedule/schedule.spec.js
index b47036c10..54b86af90 100644
--- a/src/layouts/schedule/schedule.spec.js
+++ b/src/layouts/schedule/schedule.spec.js
@@ -6,7 +6,6 @@ import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
 import router from "@/router";
-import { nextTick } from "vue";
 import baseMixin from "../../mixins/base-mixin";
 
 // Mock basemixin
@@ -130,64 +129,67 @@ afterEach(() => {
 describe("schedule.vue...", () => {
     describe("initial load", () => {
         test("should pass arePagePrerequisitesValid with a mobile order and no providerNumber", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             store.getters.order.serviceLocation.appointmentType = "Mobile";
             store.getters.order.serviceLocation.provider = null;
 
-            //Act
+            // Act
             const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
-            //Assert
+            // Assert
             expect(arePagePrerequisitesValid).toBe(true);
         });
+
         test("should pass arePagePrerequisitesValid with a inshop order and providerNumber", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
 
-            //Act
+            // Act
             const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
-            //Assert
+            // Assert
             expect(arePagePrerequisitesValid).toBe(true);
         });
+
         test("should fail arePagePrerequisitesValid with a replace with no glass parts", async () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             store.getters.order.lineItems.glassParts = [];
 
-            //Act
+            // Act
             const arePagePrerequisitesValid2 = await wrapper.vm.arePagePrerequisitesValid();
 
-            //Assert
+            // Assert
             expect(arePagePrerequisitesValid2).toBe(false);
         });
+
         test("should fail arePagePrerequisitesValid without isInsurance", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             store.getters.payment.isInsurance = null;
 
-            //Act
+            // Act
             const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
-            //Assert
+            // Assert
             expect(arePagePrerequisitesValid).toBe(false);
         });
 
         test("should return newShopTimeSlots when getAvailableDatesMethod is called", async () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
 
-            //Act
+            // Act
             const newShopTimeSlots = await wrapper.vm.getAvailableDatesMethod(
                 "2023-01-01",
                 "2023-01-31"
             );
 
-            //Assert
+            // Assert
             expect(newShopTimeSlots).toStrictEqual({
                 days: [
                     {
@@ -208,13 +210,13 @@ describe("schedule.vue...", () => {
         });
 
         test("should call API service in day ranges of 34 or less when getAvailableDatesMethod is called with large date ranges", async () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
 
-            //Act
+            // Act
             await wrapper.vm.getAvailableDates.call(
                 wrapper.vm,
                 "2023-01-01",
@@ -223,7 +225,7 @@ describe("schedule.vue...", () => {
                 "123"
             );
 
-            //Assert
+            // Assert
             expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalledTimes(3);
             expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(
                 "getShopTimeSlots",
@@ -234,7 +236,7 @@ describe("schedule.vue...", () => {
 
         describe("beforeRouteEnter function... ", () => {
             test("should call next() and call all functions within next", async () => {
-                //Arrange
+                // Arrange
                 const { wrapper } = setupMocks({});
                 wrapper.vm.selectableDatesData = {
                     days: [],
@@ -244,7 +246,7 @@ describe("schedule.vue...", () => {
                     c(wrapper.vm);
                 });
 
-                //Act
+                // Act
                 await schedule.beforeRouteEnter.call(
                     wrapper.vm,
                     { query: { fmgPage: "schedule" } },
@@ -252,7 +254,7 @@ describe("schedule.vue...", () => {
                     nextFunction
                 );
 
-                //Assert
+                // Assert
                 expect(nextFunction).toHaveBeenCalled();
                 expect(wrapper.vm.setCmsContent).toHaveBeenCalledWith("content");
                 expect(wrapper.vm.$refs.datePicker.initializeComponent).toHaveBeenCalledWith(
@@ -279,7 +281,7 @@ describe("schedule.vue...", () => {
 
         describe("computed properties...", () => {
             test("timeSlotsForSelectedDate should return timeslots if selected date is available", () => {
-                //Arrange
+                // Arrange
                 const { wrapper } = setupMocks({});
                 wrapper.vm.selectableDatesData = {
                     days: [
@@ -306,10 +308,10 @@ describe("schedule.vue...", () => {
                     selectedDate: "2022-11-11",
                 });
 
-                //Act
+                // Act
                 const testValue = wrapper.vm.timeSlotsForSelectedDate;
 
-                //Assert
+                // Assert
                 expect(testValue).toStrictEqual(
                     expect.objectContaining({
                         date: "2022-11-11",
@@ -318,7 +320,7 @@ describe("schedule.vue...", () => {
             });
 
             test("timeSlotsForSelectedDate should be null if no date has been selected", () => {
-                //Arrange
+                // Arrange
                 const { wrapper } = setupMocks({});
                 wrapper.vm.selectableDatesData = {
                     days: [
@@ -345,10 +347,10 @@ describe("schedule.vue...", () => {
                     selectedDate: undefined,
                 });
 
-                //Act
+                // Act
                 const testValue = wrapper.vm.timeSlotsForSelectedDate;
 
-                //Assert
+                // Assert
                 expect(testValue).toBe(null);
             });
         });
@@ -356,75 +358,67 @@ describe("schedule.vue...", () => {
 
     describe("schedule page methods...", () => {
         test("getServiceZipCtuCodeFromStore should return zipCodeCtu", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
 
-            //Act
+            // Act
             const testValue = wrapper.vm.getServiceZipCtuCodeFromStore();
 
-            //Assert
+            // Assert
             expect(testValue).toStrictEqual("01234");
         });
 
         test("openInshopTimeSlotsModal should trigger openModal method", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
 
-            //Act
+            // Act
             wrapper.vm.openInshopTimeSlotsModal();
 
-            //Assert
+            // Assert
             expect(wrapper.vm.$refs.timeSlotModalQuestion.openModal).toBeCalled();
         });
 
-        test("getSelectedRouteCode should return schedule routeCode", () => {
-            //Arrange
-            const { wrapper } = setupMocks({});
-
-            wrapper.vm.selectableDatesData = {
-                days: [],
-            };
-
-            //Act
-            const testValue = wrapper.vm.getSelectedRouteCode();
-
-            //Assert
-            expect(testValue).toStrictEqual("000");
-        });
-
         test("timeSlotModalClosed should null any selected date when there's no route code", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
+
             wrapper.setData({
                 selectedDate: "1980-05-05",
             });
-            wrapper.setData({
-                selectedTimeSlot: {
+
+            const selectedTimeSlotInfo = {
+                timeSlot: {
                     date: "2019-01-01",
                     startTime: "09:00",
                     endTime: "10:00",
                     routeCode: null,
                 },
+                isPremiumAppointment: null,
+            }
+
+            wrapper.setData({
+                selectedTimeSlotInfo: selectedTimeSlotInfo,
             });
 
-            //Act
+            // Act
             wrapper.vm.timeSlotModalClosed();
 
-            //Assert
+            // Assert
             expect(wrapper.vm.selectedDate).toBe(null);
         });
 
         test("getDisplayTextForMilitaryTime should return the correctly formatted string", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
@@ -432,13 +426,13 @@ describe("schedule.vue...", () => {
             const timeInput1 = "15:00";
             const timeInput2 = "15:30";
 
-            //Act
+            // Act
             const testOutput1 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1);
             const testOutput2 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2);
             const testOutput3 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1, true);
             const testOutput4 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2, true);
 
-            //Assert
+            // Assert
             expect(testOutput1).toBe("3:00 PM");
             expect(testOutput2).toBe("3:30 PM");
             expect(testOutput3).toBe("3 PM");
@@ -446,7 +440,7 @@ describe("schedule.vue...", () => {
         });
 
         test("getDisplayTextForMilitaryTime should return the correctly formatted string", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
@@ -454,10 +448,10 @@ describe("schedule.vue...", () => {
             wrapper.vm.$router.navigateWithoutSaving = jest.fn();
             wrapper.vm.$route = "testRoute";
 
-            //Act
+            // Act
             wrapper.vm.backButtonAction();
 
-            //Assert
+            // Assert
             expect(wrapper.vm.$router.navigateWithoutSaving).toBeCalledWith(
                 "CLICKED_BACK",
                 "testRoute"
@@ -466,7 +460,7 @@ describe("schedule.vue...", () => {
     });
 
     test("forwardButtonAction should call route method navigateWithoutSaving", async () => {
-        //Arrange
+        // Arrange
         const { wrapper } = setupMocks({});
         wrapper.vm.dispatchStoreAction = jest.fn(() => {
             return {
@@ -477,15 +471,15 @@ describe("schedule.vue...", () => {
             return {};
         });
 
-        //Act
+        // Act
         await wrapper.vm.forwardButtonAction();
 
-        //Assert
+        // Assert
         expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
     });
 
     test("for mobile appts, updateSupportingItems should call store action to save supporting items", async () => {
-        //Arrange
+        // Arrange
         store.getters.order.serviceLocation.appointmentType = "Mobile";
         store.getters.lineItems.supportingItems = [
             {
@@ -514,10 +508,10 @@ describe("schedule.vue...", () => {
             },
         });
 
-        //Act
+        // Act
         await wrapper.vm.updateSupportingItems();
 
-        //Assert
+        // Assert
         expect(wrapper.vm.dispatchStoreAction).toBeCalledWith(
             "saveSupportingItemsSuppressingStateResetting",
             expect.arrayContaining([
@@ -530,7 +524,7 @@ describe("schedule.vue...", () => {
     });
 
     test("for Inshop appts, updateSupportingItems should call store action to save supporting items WITHOUT the EARLY BIRD supporting item", async () => {
-        //Arrange
+        // Arrange
         store.getters.order.serviceLocation.appointmentType = "Inshop";
         store.getters.lineItems.supportingItems = [
             {
@@ -559,10 +553,10 @@ describe("schedule.vue...", () => {
             },
         });
 
-        //Act
+        // Act
         await wrapper.vm.updateSupportingItems();
 
-        //Assert
+        // Assert
         expect(wrapper.vm.dispatchStoreAction).toBeCalledWith(
             "saveSupportingItemsSuppressingStateResetting",
             expect.not.arrayContaining([
@@ -575,7 +569,7 @@ describe("schedule.vue...", () => {
     });
 
     test("if no EARLY BIRD supporting item, then updateSupportingItems should NOT call store action", async () => {
-        //Arrange
+        // Arrange
         store.getters.order.serviceLocation.appointmentType = "Mobile";
         store.getters.lineItems.supportingItems = [];
         const { wrapper } = setupMocks({});
@@ -595,10 +589,10 @@ describe("schedule.vue...", () => {
             },
         });
 
-        //Act
+        // Act
         await wrapper.vm.updateSupportingItems();
 
-        //Assert
+        // Assert
         expect(wrapper.vm.dispatchStoreAction).not.toBeCalled();
     });
 });
diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js
index 93f8cfe01..775bf3a39 100644
--- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js
+++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js
@@ -2,30 +2,76 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import timeSlotModalQuestion from "@/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue";
 import store from "@/store";
+
 import {
     RouteCodeFlags,
     PREMIUM_TIME_SLOT_ID_FLAG,
     PREMIUM_FEE_PART_TYPE,
 } from "@/constants/schedule-constants";
 
-describe("time-slot-modal-list-button-question.vue", () => {
+describe("time-slot-modal-question.vue", () => {
+    const timeSlotsForSelectedDate = {
+        date: "2023-09-02",
+        timeSlots: [
+            {
+                id: "03335-01820-S-B*20334*8 AM",
+                startTime: "08:00",
+                endTime: "09:00",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*830 AM",
+                startTime: "08:30",
+                endTime: "09:30",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*9 AM",
+                startTime: "09:00",
+                endTime: "10:00",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*930 AM",
+                startTime: "09:30",
+                endTime: "10:30",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*10 AM",
+                startTime: "10:00",
+                endTime: "11:00",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*1030 AM",
+                startTime: "10:30",
+                endTime: "11:30",
+                offerPremium: false,
+            },
+        ],
+    };
+
     test("When selected time slot is changed, a correctly formatted selectedTimeSlot should be emitted", async () => {
         //Arrange
-        const date = "2023-07-01";
-        const timeSlotId = "testRouteCodeId";
-        const startTime = "8:00 AM";
-        const endTime = "8:30 AM";
+        const date = "2023-09-02";
+        const routeCode = "03335-01820-S-B*20334*830 AM";
+        const startTime = "08:30";
+        const endTime = "09:30";
         const jobMaxMinutes = 100;
         const jobMinMinutes = 50;
         const expectedEmit = [
             [
                 {
-                    date: date,
-                    routeCode: timeSlotId,
-                    startTime: startTime,
-                    endTime: endTime,
-                    jobMaxMinutes: jobMaxMinutes.toString(),
-                    jobMinMinutes: jobMinMinutes.toString(),
+                    timeSlot: {
+                        date: date,
+                        routeCode: routeCode,
+                        startTime: startTime,
+                        endTime: endTime,
+                        jobMaxMinutes: jobMaxMinutes.toString(),
+                        jobMinMinutes: jobMinMinutes.toString(),
+                    },
+                    isPremiumAppointment: false,
                 },
             ],
         ];
@@ -35,22 +81,16 @@ describe("time-slot-modal-list-button-question.vue", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
-                        date: date,
-                        timeSlots: [
-                            {
-                                id: timeSlotId,
-                                startTime: startTime,
-                                endTime: endTime,
-                            },
-                        ],
-                    },
+                    timeSlotsForSelectedDate: timeSlotsForSelectedDate,
                 },
             },
         });
 
         wrapper.vm.$refs.timeSlots.closeModal = jest.fn();
-        wrapper.vm.selectedTimeSlotId = timeSlotId;
+
+        await wrapper.setData({
+            selectedRouteCode: routeCode
+        })
 
         //Act
         wrapper.vm.setSelectedTimeSlot();
@@ -59,7 +99,8 @@ describe("time-slot-modal-list-button-question.vue", () => {
         expect(wrapper.emitted()["update:modelValue"]).toEqual(expectedEmit);
     });
 });
-describe("time-slot-modal-list-button-question.vue Supplemental information", () => {
+
+describe("time-slot-modal-question.vue Supplemental information", () => {
     test("The correct supplemental information should be obtained from CMS - Mobile - Not Premium ", async () => {
         //Arrange
         const mobileCmsWidgetName = "MobileNotPremium";
@@ -72,11 +113,13 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[mobileCmsWidgetName]["BodyText"]
         );
     });
+
     test("The correct supplemental information should be obtained from CMS - Mobile - Premium", async () => {
         //Arrange
         const mobileCmsWidgetName = "MobilePremium";
@@ -89,11 +132,13 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[mobileCmsWidgetName]["BodyText"]
         );
     });
+
     test("No supplemental information should be obtained from CMS - Inshop", async () => {
         //Arrange
         const inshopWidgetName = "Inshop";
@@ -109,6 +154,7 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toBeNull();
     });
+
     test("No supplemental information should be obtained from CMS - Drop off, nothing selected", async () => {
         //Arrange
         const dropOffWidgetName = "Dropoff";
@@ -124,40 +170,72 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toBeNull();
     });
+
     test("Correct supplemental information should be retrieved, Dropoff regular", async () => {
         //Arrange
         const dropOffWidgetName = "Dropoff";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     dropoffCmsWidgetName: dropOffWidgetName,
                 },
             },
         });
+
+
+        console.log(wrapper.vm.selectedRouteCode)
+
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[dropOffWidgetName]["BodyText"]
         );
     });
+
     test("Correct supplemental information should be retrieved, Dropoff Overnight", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test${ RouteCodeFlags.OVERNIGHT_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.OVERNIGHT_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     overnightDropOffCmsWidgetName: overnightDropOffCmsWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[overnightDropOffCmsWidgetName]["BodyText"]
         );
     });
+
     test("Correct supplemental information should be retrieved, Dropoff Sameday", async () => {
         //Arrange
         const sameDayDropOffCmsWidgetName = "Sameday";
@@ -167,13 +245,24 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
         const endTime = "8:30 AM";
         const jobMaxMinutes = 100;
         const jobMinMinutes = 50;
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
 
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -183,7 +272,7 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
                             },
                         ],
                     },
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     sameDayDropOffCmsWidgetName: sameDayDropOffCmsWidgetName,
                 },
@@ -208,12 +297,24 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
         const jobMaxMinutes = 100;
         const jobMinMinutes = 50;
 
+        const modelValue = {
+            timeSlot: {
+                routeCode: `Test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+        
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -223,7 +324,7 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
                             },
                         ],
                     },
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     sameDayDropOffCmsWidgetName: sameDayDropOffCmsWidgetName,
                 },
@@ -235,47 +336,88 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
             mockCmsContent[sameDayDropOffCmsWidgetName]["FooterText"]
         );
     });
+    
     test("Correct disclaimer information should be retrieved, Dropoff regular", async () => {
         //Arrange
         const dropOffWidgetName = "Dropoff";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `Test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     dropoffCmsWidgetName: dropOffWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.disclaimerTextBlockCopy).toEqual(
             mockCmsContent[dropOffWidgetName]["FooterText"]
         );
     });
+    
     test("Correct disclaimer information should be retrieved, Dropoff overnight", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `Test${ RouteCodeFlags.OVERNIGHT_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.OVERNIGHT_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     overnightDropOffCmsWidgetName: overnightDropOffCmsWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.disclaimerTextBlockCopy).toEqual(
             mockCmsContent[overnightDropOffCmsWidgetName]["FooterText"]
         );
     });
+
     test("No disclaimer information should be retrieved, non-dropoff", async () => {
         //Arrange
         const inshopWidgetName = "Inshop";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "test" },
+                    modelValue: modelValue,
                     appointmentType: "Inshop",
                     cmsWidgetName: inshopWidgetName,
                 },
@@ -286,7 +428,7 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
     });
 });
 
-describe("time-slot-modal-list-button-question.vue Duration", () => {
+describe("time-slot-modal-question.vue Duration", () => {
     test("The correct duration information should be displayed - Dropoff - Sameday ", async () => {
         //Arrange
         const sameDayDropOffCmsWidgetName = "Sameday";
@@ -297,12 +439,24 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
         const jobMaxMinutes = 100;
         const jobMinMinutes = 50;
 
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test` + RouteCodeFlags.ALL_DAY_DROP_OFF,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -312,7 +466,7 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
                             },
                         ],
                     },
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     sameDayDropOffCmsWidgetName: sameDayDropOffCmsWidgetName,
                 },
@@ -324,30 +478,59 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
             mockCmsContent[sameDayDropOffCmsWidgetName]["SubheaderText"]
         );
     });
+
     test("Correct duration information should be retrieved, Dropoff overnight", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
+
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test` + RouteCodeFlags.OVERNIGHT_DROP_OFF,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.OVERNIGHT_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     overnightDropOffCmsWidgetName: overnightDropOffCmsWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.durationTextBlockCopy).toEqual(
             mockCmsContent[overnightDropOffCmsWidgetName]["SubheaderText"]
         );
     });
+
     test("Correct duration information should be retrieved, Dropoff", async () => {
         //Arrange
         const dropoffCmsWidgetName = "Dropoff";
+
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test` + RouteCodeFlags.ALL_DAY_DROP_OFF,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     dropoffCmsWidgetName: dropoffCmsWidgetName,
                 },
@@ -358,25 +541,39 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
             mockCmsContent[dropoffCmsWidgetName]["SubheaderText"]
         );
     });
+
     test("Correct duration information should be retrieved, Inshop - convert to hours", async () => {
         //Arrange
         const cmsWidgetName = "Inshop";
+
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test`,
+                date: null,
+                startTime: null,
+                endTime: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
                     estimatedServiceMinutesMaximum: 180,
                     estimatedServiceMinutesMinimum: 120,
-                    modelValue: { routeCode: "Test" },
+                    modelValue: modelValue,
                     appointmentType: "Inshop",
                     cmsWidgetName: cmsWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.durationTextBlockCopy).toEqual(
             mockCmsContent[cmsWidgetName]["SubheaderText"] + " 2 - 3 hours"
         );
     });
+
     test("Correct duration information should be retrieved, Inshop - convert to minutes", async () => {
         //Arrange
         const cmsWidgetName = "Inshop";
@@ -396,6 +593,7 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
             mockCmsContent[cmsWidgetName]["SubheaderText"] + " 60 - 90 minutes"
         );
     });
+
     test("Correct duration information should be retrieved, Inshop - min = maximum time", async () => {
         //Arrange
         const cmsWidgetName = "Inshop";
@@ -415,6 +613,7 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
             mockCmsContent[cmsWidgetName]["SubheaderText"] + " 4 hours"
         );
     });
+
     test("No duration information should be displayed, Mobile", async () => {
         //Arrange
         const mobileCmsWidgetName = "Mobile";
@@ -450,7 +649,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -473,6 +672,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
         };
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Dropoff - Overnight ", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
@@ -488,7 +688,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -511,6 +711,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
         };
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Dropoff", async () => {
         //Arrange
         const dropoffCmsWidgetName = "Dropoff";
@@ -526,7 +727,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -549,6 +750,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
         };
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Mobile not premium", async () => {
         //Arrange
         const mobileCmsWidgetName = "MobileNotPremium";
@@ -564,7 +766,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -587,6 +789,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
         };
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Mobile with premium", async () => {
         //Arrange
         const mobilePremiumCmsWidgetName = "MobilePremium";
@@ -605,7 +808,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                     premiumAppointmentFee: {
                         partType: PREMIUM_FEE_PART_TYPE,
                     },
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -631,8 +834,10 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
             buttonLabelSubCopy: "+$15.99",
             value: timeSlotId + PREMIUM_TIME_SLOT_ID_FLAG,
         };
+
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Inshop", async () => {
         //Arrange
         const cmsWidgetName = "Inshop";
@@ -648,7 +853,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -678,7 +883,7 @@ const mockCmsContent = {
         HeaderText: "Mobile, not premium HeaderText",
     },
     MobilePremium: {
-        "BodyText:": "Mobile, with premium BodyText",
+        BodyText: "Mobile, with premium BodyText",
         FooterText: "Mobile, with premium FooterText",
         SubheaderText: "Mobile, with premium SubheaderText",
         HeaderText: "Mobile, with premium HeaderText",
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 007987ba8..7d4891594 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
@@ -157,10 +157,12 @@ export default {
             return this.$refs[this.modalName];
         },
         supplementalInformationBlock() {
+            console.log(this.selectedRouteCode)
             let appointmentTypeCmsWidgetName;
             if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return null;
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+
                 appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
                     PREMIUM_TIME_SLOT_ID_FLAG
                 )
@@ -177,6 +179,7 @@ export default {
                         );
                 }
             }
+
             return this.getCmsContent(
                 appointmentTypeCmsWidgetName,
                 cmsWidgetFieldMappings.SUPPLEMENTAL_INFORMATION
@@ -433,7 +436,9 @@ export default {
             }
 
             if (this.modelValue?.isPremiumAppointment) {
-                selectedRouteCode = this.addPremiumFlagToInput(this.modelValue?.timeSlot?.routeCode);
+                selectedRouteCode = this.addPremiumFlagToInput(
+                    this.modelValue?.timeSlot?.routeCode
+                );
             } else {
                 selectedRouteCode = this.modelValue?.timeSlot?.routeCode;
             }

From e55086533333a965eed1f5cad5dd5422ff5c8b54 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 5 Sep 2023 07:20:02 -0400
Subject: [PATCH 20/21] Updated unit tests - remove console.logs

---
 src/layouts/schedule/schedule.spec.js         |  2 +-
 .../time-slot-modal-question.spec.js          | 47 +++++++++----------
 .../time-slot-modal-question.vue              |  2 -
 3 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/layouts/schedule/schedule.spec.js b/src/layouts/schedule/schedule.spec.js
index 54b86af90..e8447f3ab 100644
--- a/src/layouts/schedule/schedule.spec.js
+++ b/src/layouts/schedule/schedule.spec.js
@@ -404,7 +404,7 @@ describe("schedule.vue...", () => {
                     routeCode: null,
                 },
                 isPremiumAppointment: null,
-            }
+            };
 
             wrapper.setData({
                 selectedTimeSlotInfo: selectedTimeSlotInfo,
diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js
index 775bf3a39..cbfe355e3 100644
--- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js
+++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js
@@ -89,8 +89,8 @@ describe("time-slot-modal-question.vue", () => {
         wrapper.vm.$refs.timeSlots.closeModal = jest.fn();
 
         await wrapper.setData({
-            selectedRouteCode: routeCode
-        })
+            selectedRouteCode: routeCode,
+        });
 
         //Act
         wrapper.vm.setSelectedTimeSlot();
@@ -176,7 +176,7 @@ describe("time-slot-modal-question.vue Supplemental information", () => {
         const dropOffWidgetName = "Dropoff";
         const modelValue = {
             timeSlot: {
-                routeCode: `test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                routeCode: `test${RouteCodeFlags.ALL_DAY_DROP_OFF}`,
                 date: null,
                 startTime: null,
                 endTime: null,
@@ -184,7 +184,7 @@ describe("time-slot-modal-question.vue Supplemental information", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -196,9 +196,6 @@ describe("time-slot-modal-question.vue Supplemental information", () => {
             },
         });
 
-
-        console.log(wrapper.vm.selectedRouteCode)
-
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[dropOffWidgetName]["BodyText"]
@@ -210,7 +207,7 @@ describe("time-slot-modal-question.vue Supplemental information", () => {
         const overnightDropOffCmsWidgetName = "Overnight";
         const modelValue = {
             timeSlot: {
-                routeCode: `test${ RouteCodeFlags.OVERNIGHT_DROP_OFF }`,
+                routeCode: `test${RouteCodeFlags.OVERNIGHT_DROP_OFF}`,
                 date: null,
                 startTime: null,
                 endTime: null,
@@ -218,7 +215,7 @@ describe("time-slot-modal-question.vue Supplemental information", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -247,7 +244,7 @@ describe("time-slot-modal-question.vue Supplemental information", () => {
         const jobMinMinutes = 50;
         const modelValue = {
             timeSlot: {
-                routeCode: `test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                routeCode: `test${RouteCodeFlags.ALL_DAY_DROP_OFF}`,
                 date: null,
                 startTime: null,
                 endTime: null,
@@ -255,7 +252,7 @@ describe("time-slot-modal-question.vue Supplemental information", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -299,7 +296,7 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
 
         const modelValue = {
             timeSlot: {
-                routeCode: `Test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                routeCode: `Test${RouteCodeFlags.ALL_DAY_DROP_OFF}`,
                 date: null,
                 startTime: null,
                 endTime: null,
@@ -307,8 +304,8 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
-        
+        };
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
@@ -336,13 +333,13 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
             mockCmsContent[sameDayDropOffCmsWidgetName]["FooterText"]
         );
     });
-    
+
     test("Correct disclaimer information should be retrieved, Dropoff regular", async () => {
         //Arrange
         const dropOffWidgetName = "Dropoff";
         const modelValue = {
             timeSlot: {
-                routeCode: `Test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                routeCode: `Test${RouteCodeFlags.ALL_DAY_DROP_OFF}`,
                 date: null,
                 startTime: null,
                 endTime: null,
@@ -350,7 +347,7 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -367,13 +364,13 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
             mockCmsContent[dropOffWidgetName]["FooterText"]
         );
     });
-    
+
     test("Correct disclaimer information should be retrieved, Dropoff overnight", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
         const modelValue = {
             timeSlot: {
-                routeCode: `Test${ RouteCodeFlags.OVERNIGHT_DROP_OFF }`,
+                routeCode: `Test${RouteCodeFlags.OVERNIGHT_DROP_OFF}`,
                 date: null,
                 startTime: null,
                 endTime: null,
@@ -381,7 +378,7 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -412,7 +409,7 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -449,7 +446,7 @@ describe("time-slot-modal-question.vue Duration", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -493,7 +490,7 @@ describe("time-slot-modal-question.vue Duration", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -525,7 +522,7 @@ describe("time-slot-modal-question.vue Duration", () => {
                 jobMinMinutes: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
@@ -554,7 +551,7 @@ describe("time-slot-modal-question.vue Duration", () => {
                 endTime: null,
             },
             isPremiumAppointment: null,
-        }
+        };
 
         const { wrapper } = setupMocks({
             customMountOptions: {
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 7d4891594..b6cc95365 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
@@ -157,12 +157,10 @@ export default {
             return this.$refs[this.modalName];
         },
         supplementalInformationBlock() {
-            console.log(this.selectedRouteCode)
             let appointmentTypeCmsWidgetName;
             if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return null;
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-
                 appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
                     PREMIUM_TIME_SLOT_ID_FLAG
                 )

From 726d52b10045cf6735dbf26880c4f5c4884b579b Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Wed, 6 Sep 2023 19:05:34 +0530
Subject: [PATCH 21/21] Update vehicle.vue

---
 src/layouts/vehicle/vehicle.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index db72d30f2..7719e83d4 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -121,8 +121,6 @@ export default {
             makeOptions: [],
             modelOptions: [],
             styleOptions: [],
-            //flag to check getVehicle action in progress
-            vehicleInProgress: false,
         };
     },
 
@@ -279,14 +277,13 @@ export default {
         },
         async selectedStyle(style) {
             if (style) {
-                this.vehicleInProgress = true;
+                this.carId = null;
                 const result = await this.getVehicle(
                     this.selectedYear,
                     this.selectedMake,
                     this.selectedModel,
                     style
                 );
-                this.vehicleInProgress = false;
                 this.carId = result?.data.carId;
                 this.category = result?.data.category;
                 this.imageUrl = result?.data.imageUrl;
@@ -299,12 +296,12 @@ export default {
     },
     computed: {
         unmatchedVehicleIcon() {
-            if (this.imageUrl == null) return true;
+            if (this.imageUrl == null && this.carId !== null) return true;
             else return false;
         },
         displayGeneric() {
             if (!this.selectedStyle) return true;
-            else if (this.vehicleInProgress) return true;
+            else if (this.carId == null) return true;
             else if (this.imageUrl == null && this.carId !== null) return false;
             else return true;
         },