Merge pull request #2709 from Safelite/rlsmerge/2025.07.31-to-develop

Rlsmerge/2025.07.31 to develop

jest.config.js

@@ -31,6 +31,8 @@ module.exports = {
     "!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
+    "!src/layouts/schedule/**/*.vue", // Temp test exclusion while in development
+    "!src/digital-components/date-picker/**/*.vue", // Temp test exclusion while in development
 
     "!src/**/*-june-2025.vue", // Exclude these temporary files for CASH-845 project
 
@@ -41,7 +43,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 68,
+      statements: 66,
     },
   },
   // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit

public/css/site-2020Styling.css

@@ -194,6 +194,16 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
   margin-bottom: 2px;
 }
 
+@media (min-width: 500px) {
+  .form-group {
+    width: 80%;
+  }
+}
+@media (min-width: 800px) {
+  .form-group {
+    width: 60%;
+  }
+}
 .list-group {
   margin-bottom: 20px;
   padding-left: 0;

public/scss/site-2020Styling.scss

@@ -188,6 +188,17 @@
     margin-bottom: 2px;
   }
   
+  @media (min-width: 500px) {
+    .form-group {
+      width: 80%;
+    }
+  }
+  @media (min-width: 800px) {
+    .form-group {
+      width: 60%;
+    }
+  }
+  
   .list-group {
     margin-bottom: 20px;
     padding-left: 0;

src/constants/progress-bar-mapper.js

@@ -1,95 +1,28 @@
-export const pageProgressMapper = {
+const pagePercentageMapper = {
-    //Combine progress bar slide percent and button steps
+    vehicle: 4,
-    vehicle: {
+    "vehicle-damage": 16,
-        percent: 7,
+    estimate: 28,
-        step: 1,
+    "service-zip": 32,
-    },
+    "vin-lookup": 32,
-    "vehicle-damage": {
+    "license-plate-lookup": 32,
-        percent: 10,
+    "address-lookup": 32,
-        step: 1,
+    "address-vehicles": 36,
-    },
+    "part-questions": 40,
-    estimate: {
+    "molding-questions": 40,
-        percent: 14,
+    "vehicle-parts": 40,
-        step: 1,
+    "capability-questions": 40,
-    },
+    quote: 48,
-    "service-zip": {
+    "insurance-company": 52,
-        percent: 18,
+    // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
-        step: 1,
+    // "service-location": 60,
-    },
+    schedule: 64,
-    "vin-lookup": {
+    "mobile-details": 76,
-        percent: 18,
+    "customer-details": 84,
-        step: 1,
+    "payment-method": 92,
-    },
+    payment: 96,
-    "license-plate-lookup": {
+    confirmation: 100,
-        percent: 18,
-        step: 1,
-    },
-    "address-lookup": {
-        percent: 18,
-        step: 1,
-    },
-    "address-vehicles": {
-        percent: 25,
-        step: 1,
-    },
-    "part-questions": {
-        percent: 30,
-        step: 1,
-    },
-    "molding-questions": {
-        percent: 30,
-        step: 1,
-    },
-    "vehicle-parts": {
-        percent: 30,
-        step: 1,
-    },
-    "capability-questions": {
-        percent: 30,
-        step: 1,
-    },
-    quote: {
-        percent: 39, //Must be 39
-        step: 2,
-    },
-    "insurance-company": {
-        percent: 52,
-        step: 2,
-    },
-    "service-location": {
-        percent: 60,
-        step: 2,
-    },
-    schedule: {
-        percent: 70.5, //Must be 70.5
-        step: 3,
-    },
-    "mobile-details": {
-        percent: 76,
-        step: 3,
-    },
-    "customer-details": {
-        percent: 84,
-        step: 3,
-    },
-    "payment-method": {
-        percent: 92, //Must be 92
-        step: 3,
-    },
-    payment: {
-        percent: 96,
-        step: 4,
-    },
-    confirmation: {
-        percent: 100,
-        step: 4,
-    },
 };
 
 export const getProgressBarPercentage = (page) => {
-    return pageProgressMapper[page]?.percent || 0;
+    return pagePercentageMapper[page] || 0;
-};
-
-export const getProgressBarStep = (page) => {
-    return pageProgressMapper[page]?.step || 1;
 };

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

@@ -7,7 +7,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
         ">
         <div
             v-if="questionText && answers && answers.length > 0"
-            class="question-text"
+            class="question-text d-flex"
             :class="{ 'small-question-text': isSmallQuestionText }">
             <span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
                 {{ questionText }}
@@ -83,7 +83,10 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                 </div>
             </fieldset>
         </div>
-        <div id="form-test-error" class="row form-test-error">
+        <div
+            id="form-test-error"
+            class="row form-test-error"
+            :class="isErrorCentered ? 'text-center' : ''">
             <error-message
                 role="comment"
                 aria-atomic="true"
@@ -258,6 +261,12 @@ export default {
 
             return classes;
         },
+        isErrorCentered() {
+            if (this.buttonTypeString == "listCard" && this.buttonsInfo.length <= 2) {
+                return true;
+            }
+            return false;
+        },
         buttonsInfo() {
             return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
                 buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,

src/digital-components/date-picker/date-picker.specDISABLED.js

@@ -674,140 +674,140 @@ describe("date-picker.vue", () => {
             wrapper.unmount();
         });
 
-        describe("when loadInitialData is run...", () => {
+        // describe("when loadInitialData is run...", () => {
-            test("and this.todayString exists, expect it should have a todayDate matching today", async () => {
+        //     test("and this.todayString exists, expect it should have a todayDate matching today", async () => {
-                // Arrange
+        //         // Arrange
-                const { wrapper } = setupMocks({});
+        //         const { wrapper } = setupMocks({});
-                const todayDate = new Date();
+        //         const todayDate = new Date();
-                const todayDateString =
+        //         const todayDateString =
-                    todayDate.getFullYear() +
+        //             todayDate.getFullYear() +
-                    "-" +
+        //             "-" +
-                    ("0" + (todayDate.getMonth() + 1)).slice(-2) +
+        //             ("0" + (todayDate.getMonth() + 1)).slice(-2) +
-                    "-" +
+        //             "-" +
-                    ("0" + todayDate.getDate()).slice(-2);
+        //             ("0" + todayDate.getDate()).slice(-2);
 
-                // Act
+        //         // Act
-                const testResult = await wrapper.vm.loadInitialData({
+        //         const testResult = await wrapper.vm.loadInitialData({
-                    selectableDatesSetting: "custom",
+        //             selectableDatesSetting: "custom",
-                    initialViewRowsToShow: 5,
+        //             initialViewRowsToShow: 5,
-                    getSelectableDatesCallback: mockPromiseResolve,
+        //             getSelectableDatesCallback: mockPromiseResolve,
-                    preSelectedDate: null,
+        //             preSelectedDate: null,
-                });
+        //         });
 
-                // Assert
+        //         // Assert
-                expect(testResult).toMatchObject({
+        //         expect(testResult).toMatchObject({
-                    todayDate: todayDateString,
+        //             todayDate: todayDateString,
-                });
+        //         });
 
-                wrapper.unmount();
+        //         wrapper.unmount();
-            });
+        //     });
 
-            test("and overrride date exists, expect it should have a todayDate matching the override", async () => {
+        //     test("and overrride date exists, expect it should have a todayDate matching the override", async () => {
-                // Arrange
+        //         // Arrange
-                const overrideDate = mockValuesForSetDate01.overrideDate;
+        //         const overrideDate = mockValuesForSetDate01.overrideDate;
-                const { wrapper } = setupMocks({
+        //         const { wrapper } = setupMocks({
-                    propsData: {
+        //             propsData: {
-                        selectableDatesSetting: "custom",
+        //                 selectableDatesSetting: "custom",
-                        todayOverrideDateString: overrideDate,
+        //                 todayOverrideDateString: overrideDate,
-                    },
+        //             },
-                });
+        //         });
 
-                // Act
+        //         // Act
-                const localThis = {
+        //         const localThis = {
-                    todayString: null,
+        //             todayString: null,
-                    todayOverrideDateString: overrideDate,
+        //             todayOverrideDateString: overrideDate,
-                    getMonthEnd: () => mockValuesForSetDate01.monthEnd,
+        //             getMonthEnd: () => mockValuesForSetDate01.monthEnd,
-                    getInitialViewWeeks: () => mockValuesForSetDate01.initialViewWeeks,
+        //             getInitialViewWeeks: () => mockValuesForSetDate01.initialViewWeeks,
-                };
+        //         };
-                const testResult = await datePicker.methods.loadInitialData.call(localThis, {
+        //         const testResult = await datePicker.methods.loadInitialData.call(localThis, {
-                    selectableDatesSetting: "custom",
+        //             selectableDatesSetting: "custom",
-                    initialViewRowsToShow: 5,
+        //             initialViewRowsToShow: 5,
-                    getSelectableDatesCallback: mockPromiseResolve,
+        //             getSelectableDatesCallback: mockPromiseResolve,
-                    preSelectedDate: null,
+        //             preSelectedDate: null,
 
-                    todayOverrideDateString: overrideDate,
+        //             todayOverrideDateString: overrideDate,
-                });
+        //         });
 
-                // Assert
+        //         // Assert
-                expect(testResult).toMatchObject({
+        //         expect(testResult).toMatchObject({
-                    todayDate: overrideDate,
+        //             todayDate: overrideDate,
-                });
+        //         });
 
-                wrapper.unmount();
+        //         wrapper.unmount();
-            });
+        //     });
 
-            test("with no this.todayString or overrride date, expect it should have a todayDate matching today", async () => {
+        //     test("with no this.todayString or overrride date, expect it should have a todayDate matching today", async () => {
-                // Arrange
+        //         // Arrange
-                const { wrapper } = setupMocks({});
+        //         const { wrapper } = setupMocks({});
-                const todayDate = new Date();
+        //         const todayDate = new Date();
-                const todayDateString =
+        //         const todayDateString =
-                    todayDate.getFullYear() +
+        //             todayDate.getFullYear() +
-                    "-" +
+        //             "-" +
-                    ("0" + (todayDate.getMonth() + 1)).slice(-2) +
+        //             ("0" + (todayDate.getMonth() + 1)).slice(-2) +
-                    "-" +
+        //             "-" +
-                    ("0" + todayDate.getDate()).slice(-2);
+        //             ("0" + todayDate.getDate()).slice(-2);
 
-                // Act
+        //         // Act
-                const localThis = {
+        //         const localThis = {
-                    todayString: null,
+        //             todayString: null,
-                    getMonthEnd: () => mockValuesForSetDate01.monthEnd,
+        //             getMonthEnd: () => mockValuesForSetDate01.monthEnd,
-                    getInitialViewWeeks: () => mockValuesForSetDate01.initialViewWeeks,
+        //             getInitialViewWeeks: () => mockValuesForSetDate01.initialViewWeeks,
-                };
+        //         };
 
-                //Act
+        //         //Act
-                const testResult = await datePicker.methods.loadInitialData.call(localThis, {
+        //         const testResult = await datePicker.methods.loadInitialData.call(localThis, {
-                    selectableDatesSetting: "custom",
+        //             selectableDatesSetting: "custom",
-                    initialViewRowsToShow: 5,
+        //             initialViewRowsToShow: 5,
-                    getSelectableDatesCallback: mockPromiseResolve,
+        //             getSelectableDatesCallback: mockPromiseResolve,
-                    preSelectedDate: null,
+        //             preSelectedDate: null,
-                });
+        //         });
 
-                // Assert
+        //         // Assert
-                expect(testResult).toMatchObject({
+        //         expect(testResult).toMatchObject({
-                    todayDate: todayDateString,
+        //             todayDate: todayDateString,
-                });
+        //         });
 
-                wrapper.unmount();
+        //         wrapper.unmount();
-            });
+        //     });
 
-            test("and config.selectableDatesSetting is PAST, expect it should have a calendarViewDirection of PAST", async () => {
+        //     test("and config.selectableDatesSetting is PAST, expect it should have a calendarViewDirection of PAST", async () => {
-                // Arrange
+        //         // Arrange
-                const { wrapper } = setupMocks({});
+        //         const { wrapper } = setupMocks({});
 
-                // Act
+        //         // Act
-                const testResult = await wrapper.vm.loadInitialData({
+        //         const testResult = await wrapper.vm.loadInitialData({
-                    selectableDatesSetting: "past",
+        //             selectableDatesSetting: "past",
-                    initialViewRowsToShow: 5,
+        //             initialViewRowsToShow: 5,
-                    getSelectableDatesCallback: mockPromiseResolve,
+        //             getSelectableDatesCallback: mockPromiseResolve,
-                });
+        //         });
 
-                // Assert
+        //         // Assert
-                expect(testResult).toMatchObject({
+        //         expect(testResult).toMatchObject({
-                    calendarViewDirection: "past",
+        //             calendarViewDirection: "past",
-                });
+        //         });
 
-                wrapper.unmount();
+        //         wrapper.unmount();
-            });
+        //     });
 
-            test("and config.selectableDatesSetting is CUSTOM, expect it should have a calendarViewDirection of FUTURE", async () => {
+        //     test("and config.selectableDatesSetting is CUSTOM, expect it should have a calendarViewDirection of FUTURE", async () => {
-                // Arrange
+        //         // Arrange
-                const { wrapper } = setupMocks({});
+        //         const { wrapper } = setupMocks({});
 
-                // Act
+        //         // Act
-                const testResult = await wrapper.vm.loadInitialData({
+        //         const testResult = await wrapper.vm.loadInitialData({
-                    selectableDatesSetting: "custom",
+        //             selectableDatesSetting: "custom",
-                    initialViewRowsToShow: 5,
+        //             initialViewRowsToShow: 5,
-                    getSelectableDatesCallback: mockPromiseResolve,
+        //             getSelectableDatesCallback: mockPromiseResolve,
-                });
+        //         });
 
-                // Assert
+        //         // Assert
-                expect(testResult).toMatchObject({
+        //         expect(testResult).toMatchObject({
-                    calendarViewDirection: "future",
+        //             calendarViewDirection: "future",
-                });
+        //         });
 
-                wrapper.unmount();
+        //         wrapper.unmount();
-            });
+        //     });
-        });
+        // });
 
         describe("when setCalendarData is run...", () => {
             test("expect that data elements are updated properly", async () => {

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

@@ -307,6 +307,7 @@ export default {
             },
             set(newSelectedDate) {
                 this.$emit("update:modelValue", newSelectedDate);
+                this.dispatchStoreAction(this.storeActions.SAVE_WAITLIST_REQUESTED, false, false);
             },
         },
         dropOffDurationText() {
@@ -335,11 +336,32 @@ export default {
                 this.estimatedServiceMinutesMaximum
             );
 
-            return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
+            if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) {
+                return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
+            }
+
+            return null;
+        },
+        mobileDurationText() {
+            const mobileDurationTextWithoutTime = this.getCmsContent(
+                "TimeSlotModalQuestion",
+                cmsWidgetFieldMappings.DURATION
+            );
+
+            const mobileDurationTime = getDisplayTextForDurationLength(
+                this.estimatedServiceMinutesMinimum,
+                this.estimatedServiceMinutesMaximum
+            );
+
+            if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) {
+                return `${mobileDurationTextWithoutTime} ${mobileDurationTime}`;
+            }
+
+            return null;
         },
         durationTextBlockCopy() {
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                return null;
+                return this.mobileDurationText;
             } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return this.inshopDurationText;
             } else if (
@@ -359,8 +381,8 @@ export default {
         },
     },
     methods: {
-        initializeComponent(initialData) {
+        async initializeComponent(initialData) {
-            this.setCalendarData(initialData);
+            await this.setCalendarData(initialData);
             this.$refs.timeSlotModalQuestion.initializeComponent();
         },
         fireDateSelectedEvent(event, date) {
@@ -555,6 +577,8 @@ export default {
                     endDateString: initialViewEndDate,
                     providerNumber: config.providerNumber,
                     zipCode: config.zipCode,
+                    includeMobileTimeSlots: config.includeMobileTimeSlots,
+                    includeInshopTimeSlots: config.includeInshopTimeSlots,
                 });
                 resolve(response);
             });
@@ -574,6 +598,11 @@ export default {
             });
         },
         async setCalendarData(config = {}) {
+            this.isLoading = true;
+            this.selectableDatesInshop = [];
+            this.selectableDatesMobile = [];
+            this.months = [];
+
             this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
             const hideSecondMonth = config.hideSecondMonth;
             const direction = config.calendarViewDirection;

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

@@ -152,7 +152,6 @@ export default {
         border: 1px solid $gray-500;
         border-radius: 0.5rem;
         min-height: 3rem;
-        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
         @include media-breakpoint-up(md) {
             min-height: 3.5rem;
         }

src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue

@@ -66,18 +66,19 @@ export default {
 .btn {
     &.btn-primary {
         position: relative;
-        background: $red;
+        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         border: none;
+        border-radius: $border-radius-lg;
         color: $white;
         justify-content: center;
         font-weight: 500;
         @media (hover: hover) {
-            background: $red;
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         }
         &:focus {
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -85,26 +86,27 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             color: $white;
-            background: $red;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
         }
         &:disabled {
             background: $gray-200 !important;
-            background: $red !important;
+            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
             color: $gray-600 !important;
             font-weight: 400;
             height: 48px;
             border: none;
+            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            background: $red;
+            background: $blue-700;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             pointer-events: none;
         }
         &.delay {
@@ -115,7 +117,8 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
+        border: 1px solid $blue;
+        border-radius: $border-radius-lg;
         color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
@@ -130,7 +133,7 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             color: $white;
             @include blue-gradient;
         }
@@ -139,12 +142,14 @@ export default {
             color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $red;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
+            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {

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

@@ -182,11 +182,11 @@ export default {
         };
     },
     methods: {
-        focusSearchInput() {
+        focusSearchInput(event) {
             // Focus cursor in input when search icon is clicked
             const field = document.querySelector("input");
             field.focus();
-            this.$emit("search-icon-click");
+            this.$emit("search-icon-click", event);
         },
         async imageChanged(e) {
             let file = e.target.files[0];
@@ -337,7 +337,6 @@ export default {
         border-radius: 0.5rem;
         min-height: 3rem;
         padding: 0.75rem 1rem;
-        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
         @include media-breakpoint-up(md) {
             padding: 1rem;
             min-height: 3.5rem;

src/fmg-components/cart/cart.vue

@@ -1286,11 +1286,11 @@ export default {
         &:after {
             content: "";
             transition: all 0.5s ease;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
             background-repeat: no-repeat;
             background-position: right center;
-            width: 24px;
+            width: 16px;
-            height: 24px;
+            height: 9px;
             display: inline-flex;
             position: relative;
             right: 0.75rem;

src/fmg-components/funnel-footer/funnel-footer.vue

@@ -1,5 +1,15 @@
 <template>
     <div class="funnel-footer">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col d-flex justify-content-center justify-content-md-start">
+                    <img class="skyline" src="~@/assets/img/skyline-van.svg" alt="" />
+                </div>
+                <div class="col d-none d-md-flex justify-content-end align-items-end">
+                    <img class="neighborhood" src="~@/assets/img/neighborhood.svg" alt="" />
+                </div>
+            </div>
+        </div>
         <div class="footer-inner-wrapper">
             <textLink
                 linkType="newWindowLink"
@@ -54,6 +64,13 @@ export default {
     margin-top: auto;
     padding: 0 0 2rem 0;
 
+    .skyline {
+        height: 96px;
+    }
+    .neighborhood {
+        height: 48px;
+    }
+
     p {
         font-size: 0.875rem;
         margin-top: 0.25rem;
@@ -76,16 +93,12 @@ export default {
         :deep(a) {
             text-decoration: none;
             &.new-window-link {
-                font-family: Urbanist, Arial, Helvetica, sans-serif;
                 margin: 0 0.75rem;
                 color: $gray-600;
-                font-weight: 400;
             }
             &.navigation-link {
-                font-family: Urbanist, Arial, Helvetica, sans-serif;
                 margin: 0 0.75rem;
                 color: $gray-600;
-                font-weight: 400;
             }
         }
 

src/fmg-components/funnel-header/funnel-header.vue

@@ -1,16 +1,8 @@
 <template>
     <div class="funnel-header" v-if="imageSrc">
-        <div class="d-flex w-100">
+        <div class="d-flex justify-content-between align-items-center">
-            <progress-bar :page="$route.name" />
+            <div class="button-container">
-        </div>
+                <span class="webchat">
-        <div class="container d-flex">
-            <div class="site-logo">
-                <a href="https://safelite.com">
-                    <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-                </a>
-            </div>
-            <div class="button-container webchat">
-                <span class="webchat d-flex">
                     <button
                         v-show="shouldShowWebchatButton"
                         v-on:click="webchatClicked"
@@ -18,9 +10,17 @@
                         class="chat-button"></button>
                 </span>
             </div>
-            <div class="button-container">
+            <div class="site-logo">
-                <menuModal />
+                <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
             </div>
+            <div class="button-container">
+                <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
+                <menuModal />
+                <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
+            </div>
+        </div>
+        <div class="d-flex w-100">
+            <progress-bar :page="$route.name" />
         </div>
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
@@ -197,39 +197,23 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
-    .container {
-        padding: 1rem 0.75rem;
-        display: flex;
-        align-items: center;
-        @include media-breakpoint-up(md) {
-            padding: 2rem 0.75rem;
-        }
-    }
     position: relative;
-    padding: 0 0 1rem 0;
+    padding: 1rem 0;
 
     .button-container {
-        &.webchat {
+        width: 1.5rem;
-            margin-right: 1rem;
+        height: 1.625rem;
-            @include media-breakpoint-up(md) {
-                margin-right: 2rem;
-            }
-        }
-    }
-
-    .site-logo {
-        margin-right: auto;
     }
 
     .logo-image {
-        width: 100px;
+        width: auto;
-        height: auto;
+        height: 1.1875rem;
         margin: 0 auto;
-        @include media-breakpoint-up(md) {
-            width: 165px;
-        }
     }
 
+    :deep(.menu-modal-container) {
+        display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
+    }
     .webchat {
         .chat-button {
             width: 1.5rem;

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -6,13 +6,9 @@
             :class="[isActive ? 'active' : '']"
             @click="toggleModal"
             aria-label="Hamburger Menu (modal window)">
-            <span v-if="isActive">Close</span>
+            <div class="bar1"></div>
-            <span v-else>Step {{ currentStepNumber }} of 4</span>
+            <div class="bar2"></div>
-            <div class="bars ms-2">
+            <div class="bar3"></div>
-                <div class="bar1"></div>
-                <div class="bar2"></div>
-                <div class="bar3"></div>
-            </div>
         </button>
     </div>
     <div
@@ -22,45 +18,47 @@
         tabindex="-1"
         aria-labelledby="footerModalLabel"
         aria-hidden="true"
-        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"
+        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
-        @click.self="closeModal">
         <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header visually-hidden">
                     <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
                 </div>
                 <div class="modal-body d-flex flex-column">
-                    <div class="step-grid">
+                    <textLink
-                        <div class="bar-container">
+                        linkType="newWindowLink"
-                            <progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
+                        text="Terms of service"
-                            <span class="dot1"></span>
+                        href="//www.safelite.com/terms-of-service"
-                            <span class="dot2"></span>
+                        target="_blank" />
-                            <span class="dot3"></span>
+                    <textLink
-                            <span class="dot4"></span>
+                        linkType="newWindowLink"
-                        </div>
+                        text="Your privacy choices"
-                        <div class="d-flex flex-column justify-content-between">
+                        href="//www.safelite.com/privacy-center"
-                            <div class="step-containers">
+                        target="_blank">
-                                <span class="step-number">Step 1 of 4</span>
+                        <template v-slot:after-text>
-                                <br />
+                            <img
-                                <span class="step-name">Vehicle</span>
+                                class="ccpa-icon"
-                            </div>
+                                src="~@/assets/img/icons/ccpa-icon.svg"
-                            <div class="step-containers">
+                                alt="Your privacy choices" />
-                                <span class="step-number">Step 2 of 4</span>
+                        </template>
-                                <br />
+                    </textLink>
-                                <span class="step-name">Quote</span>
+                    <textLink
-                            </div>
+                        linkType="navigation"
-                            <div class="step-containers">
+                        text="Cookie preferences"
-                                <span class="step-number">Step 3 of 4</span>
+                        href="javascript:OneTrust.ToggleInfoDisplay();" />
-                                <br />
+                    <textLink
-                                <span class="step-name">Schedule</span>
+                        linkType="newWindowLink"
-                            </div>
+                        text="Warranty"
-                            <div class="step-containers">
+                        href="//www.safelite.com/national-lifetime-warranty"
-                                <span class="step-number">Step 4 of 4</span>
+                        target="_blank" />
-                                <br />
+                    <textLink
-                                <span class="step-name">Review</span>
+                        linkType="newWindowLink"
-                            </div>
+                        text="Notice at collection"
-                        </div>
+                        href="https://www.safelite.com/ccpa-privacy-policy"
-                    </div>
+                        target="_blank" />
+                </div>
+                <div class="modal-footer d-flex justify-content-start">
+                    &copy; {{ new Date().getFullYear() }} Safelite Group
                 </div>
             </div>
         </div>
@@ -68,9 +66,8 @@
 </template>
 
 <script>
+import textLink from "@/ux-components/text-link/text-link";
 import { Modal } from "bootstrap";
-import { getProgressBarStep } from "@/constants/progress-bar-mapper";
-import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
@@ -103,13 +100,8 @@ export default {
             self.isActive = false;
         },
     },
-    computed: {
-        currentStepNumber() {
-            return getProgressBarStep(this.$route.name);
-        },
-    },
     components: {
-        progressBar,
+        textLink,
     },
 };
 </script>
@@ -119,92 +111,49 @@ export default {
     button {
         border: none;
         &.menu-button {
-            width: auto;
+            width: 1.5rem;
-            height: auto;
+            height: 1.5rem;
-            border-radius: 1.5rem;
+            border-radius: 50%;
-            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
             background-color: $white;
             position: relative;
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
-            padding: 0.15rem 0.5rem; //Required to prevent 'squish' on iPhone
+            padding: 0; //Required to prevent 'squish' on iPhone
             z-index: 1050;
-            @include media-breakpoint-up(md) {
+            .bar1,
-                padding: 0.25rem 1rem;
+            .bar2,
+            .bar3 {
+                width: 14px;
+                height: 2px;
+                background-color: $blue;
+                margin: 1px 0;
+                transition: 0.25s;
             }
             &.active .bar1 {
-                transform: rotate(-45deg) translate(-3px, 8px);
+                transform: rotate(-45deg) translate(-3px, 3px);
             }
             &.active .bar2 {
                 opacity: 0;
             }
             &.active .bar3 {
-                transform: rotate(45deg) translate(-3px, -8px);
+                transform: rotate(45deg) translate(-3px, -3px);
-            }
-            .bars {
-                width: 1.5rem;
-                height: 1.5rem;
-                display: flex;
-                justify-content: space-around;
-                flex-direction: column;
-                scale: 0.75;
-                .bar1,
-                .bar2,
-                .bar3 {
-                    width: 1.5rem;
-                    height: 2px;
-                    background-color: $blue;
-                    margin: 1px 0;
-                    transition: 0.25s;
-                }
-            }
-            .step-numbers {
-                font-size: 0.875rem;
-                margin-right: 0.5rem;
-                @include media-breakpoint-up(md) {
-                    font-size: 1rem;
-                }
             }
         }
     }
 }
 .modal {
     &.menu-modal {
-        .modal-dialog {
+        //left: auto;
-            position: fixed;
+        height: calc(100% - 56px);
-            bottom: 0;
+        top: 56px;
-            right: 0;
-            height: calc(100% - 68px);
-            width: 100vw; // or set a max-width if you want a drawer effect
-            max-width: 294px;
-            margin: 0;
-            transform: translateX(100%);
-            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            z-index: 1050;
-            @include media-breakpoint-up(md) {
-                height: calc(100% - 102px);
-                top: 102px;
-            }
-        }
-        &.show .modal-dialog {
-            transform: translateX(0);
-        }
-        background-color: rgba(0, 0, 0, 0.5);
-        height: calc(100% - 68px);
-        top: 68px;
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
-        @include media-breakpoint-up(md) {
-            height: calc(100% - 102px);
-            top: 102px;
-        }
         .modal-body {
             padding: 2rem;
-            display: flex;
-            align-items: center;
             .ccpa-icon {
                 width: 2.0625rem;
                 height: 1rem;
@@ -213,48 +162,6 @@ export default {
             :deep(.navigation-link) {
                 margin-bottom: 1.5rem;
             }
-            .step-grid {
-                display: grid;
-                max-width: 140px;
-                grid-template-columns: 1fr 1fr;
-                .step-containers {
-                    line-height: 1;
-                }
-                .bar-container {
-                    width: 24px;
-                    position: relative;
-                    .dot1,
-                    .dot2,
-                    .dot3,
-                    .dot4 {
-                        position: absolute;
-                        width: 22px;
-                        height: 22px;
-                        background-color: $white;
-                        border-radius: 50rem;
-                        border: 1px solid $gray;
-                        left: 1px;
-                    }
-                    .dot1 {
-                        top: 1px;
-                    }
-                    .dot2 {
-                        top: 114px;
-                    }
-                    .dot3 {
-                        top: 227px;
-                    }
-                    .dot4 {
-                        top: 332px;
-                    }
-                }
-                .step-number {
-                    font-size: 0.75rem;
-                }
-                .step-name {
-                    font-size: 1.25rem;
-                }
-            }
         }
         .modal-fullscreen {
             width: 100vw;
@@ -283,30 +190,23 @@ export default {
                     align-items: center;
                     padding: 0; //Required to prevent 'squish' on iPhone
                     z-index: 1056;
-                    .bars {
+                    .bar1,
-                        width: 1.5rem;
+                    .bar2,
-                        height: 1.5rem;
+                    .bar3 {
-                        display: flex;
+                        width: 14px;
-                        justify-content: space-around;
+                        height: 2px;
-                        flex-direction: column;
+                        background-color: $blue;
-                        .bar1,
+                        margin: 1px 0;
-                        .bar2,
+                        transition: 0.25s;
-                        .bar3 {
+                    }
-                            width: 1.5rem;
+                    &.active .bar1 {
-                            height: 2px;
+                        transform: rotate(-45deg) translate(-3px, 3px);
-                            background-color: $blue;
+                    }
-                            margin: 1px 0;
+                    &.active .bar2 {
-                            transition: 0.25s;
+                        opacity: 0;
-                        }
+                    }
-                        &.active .bar1 {
+                    &.active .bar3 {
-                            transform: rotate(-45deg) translate(-3px, 8px);
+                        transform: rotate(45deg) translate(-3px, -3px);
-                        }
-                        &.active .bar2 {
-                            opacity: 0;
-                        }
-                        &.active .bar3 {
-                            transform: rotate(45deg) translate(-3px, -8px);
-                        }
                     }
                 }
             }

src/fmg-components/funnel-header/progress-bar/progress-bar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="barClass">
+    <div class="progress-bar-outer">
         <div class="progress-bar-inner" :style="progressStyle"></div>
     </div>
 </template>
@@ -18,10 +18,6 @@ export default {
             type: String,
             required: true,
         },
-        vertical: {
-            type: Boolean,
-            default: false,
-        },
     },
     data() {
         return {
@@ -49,20 +45,9 @@ export default {
     },
     computed: {
         progressStyle() {
-            if (this.vertical) {
+            return {
-                return {
+                width: this.displayedProgress + "%",
-                    height: this.displayedProgress + "%",
+            };
-                    width: "100%",
-                };
-            } else {
-                return {
-                    width: this.displayedProgress + "%",
-                    height: "100%",
-                };
-            }
-        },
-        barClass() {
-            return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer";
         },
     },
 };
@@ -70,43 +55,50 @@ export default {
 <style lang="scss">
 .progress-bar-outer {
     background: $blue-100;
-    height: 5px;
+    height: 10px;
     position: relative;
-    border-radius: 0;
+    border-radius: 10px;
     width: 100%;
-    margin-top: 0;
+    margin-top: 1rem;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
     .progress-bar-inner {
-        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
         will-change: width;
-        height: 100%;
+        height: 10px;
-        background-color: $red;
+        background-color: $blue;
         position: absolute;
         top: 0;
         left: 0;
-        border-radius: 0;
+        border-radius: 10px;
     }
-}
 
-.progress-bar-outer-vertical {
+    progress {
-    background: $blue-100;
+        height: 10px;
-    width: 24px;
-    height: 356px;
-    position: relative;
-    border-radius: 0;
-    margin-top: 0;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-    overflow: hidden;
-    border-radius: 50rem;
-    .progress-bar-inner {
-        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        will-change: height !important;
         width: 100%;
-        background-color: $red;
+
-        position: absolute;
+        /* Firefox */
-        left: 0;
+        appearance: none;
-        top: 0;
+        background-color: $blue-100;
-        border-radius: 50rem;
+        border: 0;
+        border-radius: $border-radius-pill;
+        box-shadow: $box-shadow-inset;
+
+        &::-moz-progress-bar {
+            background-color: $blue;
+            border-radius: $border-radius-pill;
+        }
+
+        /* Webkit */
+        -webkit-appearance: none;
+        &::-webkit-progress-bar {
+            background-color: $blue-100;
+            border-radius: $border-radius-pill;
+            box-shadow: $box-shadow-inset;
+        }
+        &::-webkit-progress-value {
+            background-color: $blue;
+            border-radius: $border-radius-pill;
+        }
     }
 }
 </style>

src/fmg-components/funnel-sub-header/funnel-sub-header.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="funnel-sub-header">
-        <div class="d-flex align-items-center overflow-hidden">
+        <div
-            <h5 class="fw-normal mb-0" :class="headerColor">
+            class="d-flex align-items-center container-fluid overflow-hidden"
+            :class="[textAlignment]">
+            <h5 class="text-center fw-normal mb-0" :class="headerColor">
                 <span>
                     {{ text }}
                 </span>
@@ -11,9 +13,13 @@
                     @click-event="clickEvent" />
             </h5>
         </div>
-        <div v-if="subText" class="d-flex align-self-center overflow-hidden mt-1">
+        <div
-            <p class="small fw-normal sub-text">
+            v-if="subText"
-                <span v-html="boldedSubHeaderText"></span>
+            class="d-flex align-items-center justify-content-center container-fluid overflow-hidden mt-1">
+            <p class="text-center small fw-normal sub-text">
+                <span>
+                    {{ subText }}
+                </span>
             </p>
         </div>
     </div>
@@ -31,17 +37,21 @@ export default {
             type: String,
             default: "dark-header",
         },
+        leftAlignHeader: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         buttonBack,
     },
     computed: {
-        boldedSubHeaderText() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
-        },
         text() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
+        textAlignment() {
+            return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
+        },
         subText() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
         },
@@ -58,12 +68,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.bolded-words) {
-    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
-}
 h5 {
     line-height: 32px;
-    font-size: 1.25rem;
 
     button {
         color: inherit;

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -1,15 +1,31 @@
 <template>
     <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles">
-        <div class="container page-container-grouped-styles">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
+            <div class="row justify-content-center">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
+                <div class="col-md-6 col-xl-4">
+                    <alert
+                        ref="alertFewMoreQuestions"
+                        cmsWidgetName="alertWidget"
+                        class="my-5"
+                        alertClass="alert-warning"
+                        :manualHeadline="alertFewMoreQuestionsHeader"
+                        :manualCopy="alertFewMoreQuestionsCopy"
+                        v-bind:isDismissible="false" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 question-chain-wrapper">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
                             ref="questionChain"
@@ -38,6 +54,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import alert from "@/ux-components/alert/alert";
 import questionChain from "@/digital-components/question-chain/question-chain";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
@@ -79,6 +96,7 @@ export default {
     },
     components: {
         funnelHeader,
+        alert,
         questionChain,
         funnelSubHeader,
         navbar,
@@ -90,7 +108,7 @@ export default {
 <style lang="scss">
 .questions-page {
     .question-text {
-        margin-bottom: 1.5rem;
+        margin-bottom: 0.5rem;
 
         span {
             text-align: left;

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -118,14 +118,13 @@ export default {
     margin-bottom: 1.5rem;
     order: 2;
     text-align: center;
-    background: $gray-100;
+    background: $blue-100;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     height: 3rem;
     border-radius: 0.5rem;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     &.progress-saved {
         background: none;
@@ -136,13 +135,14 @@ export default {
         position: relative;
         color: $blue;
         border: none;
-        font-family: UrbanistSemibold;
+        font-weight: 900;
         font-size: 0.875rem;
-        text-align: left;
+        text-align: center;
         display: inline-block;
         width: auto;
         height: auto;
-        text-decoration: none;
+        text-decoration: underline;
+        text-underline-offset: 0.25rem;
         line-height: 1rem;
         padding: 1rem;
         margin: 0 auto;
@@ -154,6 +154,7 @@ export default {
 
         &.btn {
             &.btn-secondary {
+                font-weight: 900;
                 border: none;
                 &:hover,
                 &:active,
@@ -182,17 +183,6 @@ export default {
             // fixes flicker while transitioning between states
             transition: background 0s 0s ease-in-out;
         }
-
-        &.open-save-progress-button {
-            span {
-                color: $gray-600;
-                font-family: UrbanistRegular;
-                .highlighted-words {
-                    font-family: UrbanistSemibold;
-                    color: $blue;
-                }
-            }
-        }
     }
 
     .modal.modal-component .modal-dialog .modal-content {

src/layouts/address-lookup/address-lookup.vue

@@ -5,14 +5,15 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles" id="address-lookup">
-        <div class="container page-container-grouped-styles">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                    <funnelSubHeader
+                </div>
-                        cmsWidgetName="FunnelSubHeaderWidget"
+            </div>
-                        ref="funnelSubHeader"
+            <div class="row justify-content-center">
-                        class="mb-7" />
+                <div class="col-md-6 col-xl-4 mt-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
 
                     <customerQuestions
                         ref="customerQuestions"

src/layouts/customer-details/customer-details.vue

@@ -1,9 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid">
-        <div class="container page-container-grouped-styles">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
                     <textboxQuestion
                         isRequired
@@ -43,6 +47,8 @@
                         cmsWidgetName="TextMeQuestionWidget"
                         v-model="isSmsOptIn" />
 
+                    <techNotes v-model="techNotes" :textAreaLabelCopy="textAreaLabelCopy" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -68,6 +74,7 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
 import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
 import textBlock from "@/digital-components/text-block/text-block";
 import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
+import techNotes from "@/layouts/customer-details/tech-notes/tech-notes";
 //Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -212,6 +219,7 @@ export default {
         textBlock,
         phoneNumberQuestion,
         checkboxQuestion,
+        techNotes,
     },
 };
 </script>

src/layouts/estimate/estimate.vue

@@ -1,16 +1,17 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles">
-        <div class="container page-container-grouped-styles estimate">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
-                        <div v-html="this.VinLookupQuestionBodyText2"></div>
-                        <div
-                            class="select-an-option"
-                            v-html="this.VinLookupQuestionFooterText"></div>
                         <buttonQuestion
                             cmsWidgetName="VinLookupMethod"
                             :answers="answersFromCms"
@@ -28,8 +29,6 @@
                         :isForwardActionDisabled="!meta.valid"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
-
-                    <div class="text-center" v-html="this.VinLookupQuestionFooterText2"></div>
                 </div>
             </div>
         </div>
@@ -40,6 +39,7 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
@@ -229,18 +229,10 @@ export default {
         VinLookupQuestionText() {
             return this.getCmsContent("VinLookupQuestion", "BodyText");
         },
-        VinLookupQuestionBodyText2() {
-            return this.getCmsContent("VinLookupQuestion", "BodyText2");
-        },
-        VinLookupQuestionFooterText() {
-            return this.getCmsContent("VinLookupQuestion", "FooterText");
-        },
-        VinLookupQuestionFooterText2() {
-            return this.getCmsContent("VinLookupQuestion", "FooterText2");
-        },
     },
     components: {
         funnelHeader,
+        funnelSubHeader,
         navbar,
         buttonQuestion,
         Form,
@@ -251,12 +243,14 @@ export default {
 
 <style lang="scss">
 .vinlookupquestion p {
-    font-size: 1.25rem;
+    margin-bottom: 0;
 }
-
+.vinlookupquestion strong {
-.select-an-option {
+    font-weight: 500;
-    font-family: UrbanistSemibold;
+    color: $black;
-    font-weight: 600;
+}
+.vinlookupquestion p:nth-child(2) {
+    font-size: 0.875rem;
     margin-bottom: 1rem;
 }
 </style>

src/layouts/insurance-company/insurance-company.vue

@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles">
-        <div class="container page-container-grouped-styles">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
 
                     <div v-if="originalList.length > 0">

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -1,9 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles">
-        <div class="container page-container-grouped-styles">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <textboxQuestion

src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue

@@ -112,7 +112,6 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {

src/layouts/payment-method/payment-method.vue

@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal notFullScreen ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid payment-method">
-        <div class="container payment-method">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <hr class="my-0" />
@@ -53,7 +57,7 @@
 
                     <div
                         v-if="isRecalibrationOnOrder && shouldHideRecalibration"
-                        class="questions-about-service mt-5">
+                        class="questions-about-service my-5">
                         <textBlock
                             cmsWidgetName="QuestionsAboutYourServiceWidget"
                             justifyText="left"
@@ -63,7 +67,7 @@
                         <div class="d-flex flex-row checkbox-group">
                             <checkboxQuestion
                                 cmsWidgetName="RecalConfirmWidget"
-                                class="mb-3"
+                                class="mb-5"
                                 isRequired="true"
                                 v-model="isRecalAckOptIn"
                                 validationRules="recal-ack-required"
@@ -78,6 +82,13 @@
                         :isInsurance="isInsurance"
                         validationRules="payment-method-required" />
 
+                    <alert
+                        v-if="showHavePaymentReadyAlert"
+                        :isDismissible="false"
+                        alertClass="alert-info"
+                        cmsWidgetName="NoPiaDisclaimerWidget"
+                        shouldScrollToOnMount="false" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -759,6 +770,11 @@ export default {
 
             return false;
         },
+        showHavePaymentReadyAlert() {
+            return (
+                !this.showPaymentMethodQuestions && !this.forwardClicked && this.totalAmountDue > 0
+            );
+        },
         totalAmountDue() {
             return getAmountDue(this.lineItems);
         },
@@ -891,12 +907,6 @@ export default {
     margin: 0;
 }
 .payment-method {
-    :deep(.almost-done) {
-        font-family: UrbanistSemibold;
-    }
-    :deep(h5) {
-        margin-bottom: 1rem;
-    }
     .recal-modal {
         :deep(.modal-body) {
             display: flex;

src/layouts/payment-method/review-dropdown/review-dropdown.vue

@@ -157,11 +157,11 @@ export default {
     &:after {
         content: "";
         transition: all 0.5s ease;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
         background-repeat: no-repeat;
         background-position: right center;
-        width: 24px;
+        width: 16px;
-        height: 24px;
+        height: 9px;
         display: inline-flex;
         position: relative;
         right: 0.75rem;

src/layouts/payment/payment.spec.js

@@ -577,7 +577,7 @@ describe("payment.vue", () => {
             // Arrange
             const wrapper = setupMocks({});
 
-            const outerDiv = wrapper.find(".container");
+            const outerDiv = wrapper.find(".container-fluid");
             const clickFn = jest.fn();
             outerDiv.element.addEventListener("click", clickFn);
 

src/layouts/payment/payment.vue

@@ -1,10 +1,15 @@
 <template>
     <Form>
         <loadingModal notFullScreen ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid">
-        <div class="container">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 p-0">
                     <div>
                         <alert
                             ref="piaCCErrorAlert"

src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue

@@ -6,9 +6,13 @@
             async></component>
 
         <div>
-            <span v-for="token in headerCopyTokens" :key="token" v-html="token"></span>
+            <span
+                class="callout"
+                v-for="token in headerCopyTokens"
+                :key="token"
+                v-html="token"></span>
         </div>
-        <div :id="showAfterpayExtendedPayOption ? 'extended-pay-option' : ''">
+        <div>
             <span v-for="token in afterpayCopyTokens" :key="token">
                 <span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
                 <span v-else-if="isInlineImageToken(token)">
@@ -78,15 +82,7 @@ export default {
             return splitCMSCopyOnBR(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
         },
         afterpayCopyTokens() {
-            if (this.showAfterpayExtendedPayOption) {
+            return splitCopyOnCMSPlaceHolder(this.getCmsContent(this.cmsWidgetName, "BodyText"));
-                return splitCopyOnCMSPlaceHolder(
-                    this.getCmsContent(this.cmsWidgetName, "BodyText")
-                );
-            } else {
-                return splitCopyOnCMSPlaceHolder(
-                    this.getCmsContent(this.cmsWidgetName, "BodyText2")
-                );
-            }
         },
         modalCopy() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
@@ -114,12 +110,6 @@ export default {
 
             return price;
         },
-        showAfterpayExtendedPayOption() {
-            return (
-                this.afterpayExtendedPayOptionThreshold &&
-                this.getTierOnePackagePrice >= this.afterpayExtendedPayOptionThreshold
-            );
-        },
     },
     components: {},
 };
@@ -138,11 +128,17 @@ export default {
         flex-direction: row;
     }
 
+    .callout {
+        font-family:
+            UrbanistSemibold Arial,
+            Helvetica,
+            sans-serif;
+    }
+
     > div:first-of-type {
         display: flex;
         color: $black;
         font-size: $font-size-20;
-        font-weight: $font-weight-600;
         line-height: 2rem;
         @include media-breakpoint-down(md) {
             border-bottom: 1px solid;
@@ -170,11 +166,12 @@ export default {
         }
         @include media-breakpoint-up(md) {
             padding-left: 1rem;
-            max-width: 26rem;
+            max-width: 32rem;
         }
     }
-    & .alert-heading {
+
-        font-size: 0.875rem;
+    #afterpay-learnmore {
+        white-space: nowrap;
     }
 }
 </style>

src/layouts/quote/quote.vue

@@ -1,15 +1,17 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div
-        <div class="container quote position-relative">
+            class="container-fluid page-container-grouped-styles quote-page"
-            <div class="row justify-content-center">
+            :class="showSaveProgressPopup ? 'show-save-progress-popup' : ''">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+            <div class="row justify-content-center funnel-header-wrapper">
-                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+                <div class="col-md-6">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6">
+                <div class="col-md-6 col-xl-4 mt-4">
+                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
                     <cashOrInsuranceQuestion
                         ref="cashOrInsurance"
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
@@ -67,7 +69,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-8 col-xl-6">
+                <div class="col-md-6 col-xl-4">
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                     <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
@@ -88,8 +90,9 @@
 
                     <textBlock
                         cmsWidgetName="quoteDisclaimer"
+                        justifyText="center"
                         typeStyle="caption"
-                        class="mb-5 quote-disclaimer text-left text-md-center" />
+                        class="mb-5 quote-disclaimer" />
                 </div>
             </div>
 
@@ -892,31 +895,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// Unique to quote page for 2.0/Heritage parity
-.quote {
-    padding-bottom: 2rem;
-    :deep(.nav-bar) {
-        position: initial;
-        button {
-            width: 100%;
-            justify-content: center;
-        }
-        a.navigation-link {
-            position: absolute;
-            left: 1rem;
-            bottom: 1rem;
-            @include media-breakpoint-up(lg) {
-                left: 6rem;
-            }
-        }
-        .col-auto {
-            width: -webkit-fill-available;
-        }
-        .col-auto {
-            width: -moz-available;
-        }
-    }
-}
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;
 
@@ -934,11 +912,6 @@ export default {
 .text-block {
     display: block;
 }
-:deep(.container .funnel-sub-header) {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-}
 :deep(.promo-modal-question a) {
     @include responsive-font-size-md(0.875rem, 1rem);
 }

src/layouts/return-user/return-user.vue

@@ -2,12 +2,15 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="return-user small-question-text">
             <loadingModal ref="loadingModal" />
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+            <div class="container-fluid page-container-grouped-styles">
-            <div class="container page-container-grouped-styles">
                 <div class="row justify-content-center">
-                    <div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
+                    <div class="col-md-6">
+                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                    </div>
+                </div>
+                <div class="row justify-content-center return-user-spacing">
+                    <div class="col-md-6 col-xl-4 mt-4">
                         <funnelSubHeader
-                            class="justify-content-center d-flex"
                             ref="funnelSubHeader"
                             cmsWidgetName="FunnelSubHeaderWidget" />
                     </div>

src/layouts/schedule/schedule.specDISABLED.js

@@ -608,6 +608,7 @@ function setupMocks({ customMountOptions }) {
 
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.$refs.datePicker.initializeComponent = jest.fn();
+    wrapper.vm.$refs.datePicker.loadInitialData = jest.fn();
     wrapper.vm.$refs.locationAlerts.initializeComponent = jest.fn();
     wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
 

src/layouts/schedule/schedule.vue

@@ -1,10 +1,14 @@
 <template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles page-schedule">
-        <div class="container page-container-grouped-styles">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
                     <serviceZipModalQuestion
                         editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
@@ -18,6 +22,7 @@
                         @updated-serviceability="setServiceabilityDetails"
                         @updated-contains-military-base="setContainsMilitaryBase"
                         @updated-bill-to-account-number="setBillToAccountNumber"
+                        @service-zip-changed-from-modal="onServiceZipChanged"
                         linkWidgetName="ServiceZipLinkWidget"
                         modalWidgetName="ServiceZipModalWidget" />
                     <alert
@@ -101,23 +106,12 @@
                             class="ps-4 pe-4 mt-4" />
                     </div>
                     <shopQuestionPopup
-                        modalWidgetName="ShopQuestionPopupWidget"
+                        v-if="isShopQuestionDisplayed"
-                        :appointmentType="appointmentType"
+                        :selectedProviderNumberFromParent="selectedProvider?.providerNumber"
-                        :modelValue="{
+                        :shopProviderDataFromParent="shopProviderData"
-                            zipCode: zipCode,
-                            state: state,
-                        }"
-                        :preSelectedProviderNumber="selectedProvider?.providerNumber"
-                        :shopProviderData="shopProviderData"
-                        :isServiceableInshop="isServiceableInshop"
-                        @updated-serviceability="setServiceabilityDetails"
                         @shop-selected="onShopSelected"
-                        @update:modelValue="onShopModelUpdated"
+                        @updated-serviceability="setServiceabilityDetails"
-                        @updated-zipcode-ctu="setZipcodeCtu"
+                        :zipCodeFromParent="zipCode"
-                        @update-shop-provider-data="shopProviderData = $event"
-                        @updated-contains-military-base="setContainsMilitaryBase"
-                        :zipCode="zipCode"
-                        :isDisplayed="isShopQuestionDisplayed"
                         cmsWidgetName="YourSafeliteShopWidget" />
 
                     <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
@@ -127,6 +121,8 @@
                 <div class="col-md-6 col-xl-4">
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
                     <datePicker
+                        :currentZip="zipCode"
+                        :currentProviderNumber="selectedProvider?.providerNumber"
                         v-show="appointmentType"
                         customComponentId="dateQuestion"
                         selectableDatesSetting="custom"
@@ -152,7 +148,7 @@
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="isForwardActionDisabled"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -170,7 +166,6 @@ import shopQuestion from "@/layouts/service-location/shop-question/shop-question
 import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
 import buttonQuestion from "@/digital-components/button-question/button-question.vue";
 import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
-import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
@@ -258,6 +253,8 @@ const getScheduleApiResponse = async ({
     endDateString,
     providerNumber,
     zipCode,
+    includeMobileTimeSlots = true,
+    includeInshopTimeSlots = true,
 }) => {
     const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
     const difference = calcDaysBetweenDates(startDateString, endDateString);
@@ -301,8 +298,8 @@ const getScheduleApiResponse = async ({
             },
         };
         if (apiStartDate < apiEndDate) {
-            storeActionConfigs.push(storeActionConfigInshop);
+            if (includeInshopTimeSlots) storeActionConfigs.push(storeActionConfigInshop);
-            storeActionConfigs.push(storeActionConfigMobile);
+            if (includeMobileTimeSlots) storeActionConfigs.push(storeActionConfigMobile);
         }
     }
 
@@ -338,6 +335,8 @@ const getScheduleApiResponse = async ({
                         ...mobileTimeSlotsData.days,
                         ...mobileTimeSlotsResponse.data.days,
                     ];
+                    mobileTimeSlotsData.type = mobileTimeSlotsResponse.data.type;
+                    mobileTimeSlotsData.zipCode = mobileTimeSlotsResponse.data.zipCode;
                 } else {
                     const inshopTimeSlotsResponse =
                         await baseMixin.methods.dispatchStoreActionWithLogging(
@@ -355,6 +354,9 @@ const getScheduleApiResponse = async ({
                         ...inshopTimeSlotsData.days,
                         ...inshopTimeSlotsResponse.data.days,
                     ];
+                    inshopTimeSlotsData.type = inshopTimeSlotsResponse.data.type;
+                    inshopTimeSlotsData.providerNumber =
+                        inshopTimeSlotsResponse.data.providerNumber;
                 }
             })
         );
@@ -384,7 +386,7 @@ export default {
     name: "schedule",
     data() {
         return {
-            selectedDate: this.getSelectedDate(),
+            selectedDate: this.getSelectedDateFromStore(),
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             mobilePremiumAppointmentFee: null,
             waitListRequested: null,
@@ -397,6 +399,7 @@ export default {
             showPricingByDay: null,
             selectableDatesInshop: [],
             selectableDatesMobile: [],
+            preSelectedDate: null,
 
             streetAddress: this.getServiceAddressFromStore(),
             apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
@@ -412,9 +415,9 @@ export default {
             isRecalibrationServiceableDropoff: null,
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
-            appointmentType: this.getAppointmentType(),
+            appointmentType: this.getAppointmentTypeFromStore(),
-            appointmentTypeFromAppointmentTypeQuestion: this.getAppointmentType(),
+            appointmentTypeFromAppointmentTypeQuestion: this.getAppointmentTypeFromStore(),
-            selectedProvider: this.getSelectedProvider(),
+            selectedProvider: this.getSelectedProviderFromStore(),
             mobileFeePart: null,
             recycleFeePart: null,
             zipContainsMilitaryBase: false,
@@ -422,8 +425,8 @@ export default {
             billToAccountNumber: null,
             shopProviderData: null,
             navigatingForward: false,
-            isMobileAddressValid: true,
             shopListButton: shopListButton,
+            lastSelectedInshopOrDropoffProvider: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -467,11 +470,11 @@ export default {
         let appointmentType = store.getters.order.serviceLocation.appointmentType;
 
         //  Check to see if date should be pre-selected
-        let preSelectedSlot = await store.getters.order.schedule;
+        let scheduleFromStore = await store.getters.order.schedule;
         let preSelectedDate;
 
-        if (preSelectedSlot.date && preSelectedSlot.date.length > 0) {
+        if (scheduleFromStore.date && scheduleFromStore.date.length > 0) {
-            preSelectedDate = preSelectedSlot.date;
+            preSelectedDate = scheduleFromStore.date;
 
             if (appointmentType === AppointmentTypeStrings.MOBILE) {
                 preSelectedDate += "-mobile";
@@ -480,7 +483,7 @@ export default {
             // Check to see if pre-selected date should have pricing by day upcharge
             if (showPricingByDay) {
                 // is this preSelectedDate a higher priced pricingByDay day?
-                const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
+                const dayIndex = convertDateStringToDate(scheduleFromStore?.date).getDay();
                 const dayObject = DAYS_OF_WEEK[dayIndex];
                 if (dayObject.isPricingByDayUpchargeDay) {
                     includePricingByDayUpcharge = true;
@@ -504,18 +507,9 @@ export default {
             "service-location"
         );
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");
-        const shopProviderData = await getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
+        const shopProviderData = await getShopProviderData(serviceZipCode);
         const providerNumber = shopProviderData?.data?.shopProviders[0]?.providerNumber;
 
-        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
-            // setup config options for date-picker
-            selectableDatesSetting: "custom",
-            initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
-            getSelectableDatesCallback: getScheduleApiResponse,
-            preSelectedDate: preSelectedDate,
-            providerNumber: providerNumber,
-        });
-
         // Get pricingByDayUpcharge needed for Pricing By Day
         const pricingByDayUpchargePartPromise = showPricingByDay
             ? getPricingByDayPartWithPrice()
@@ -551,10 +545,6 @@ export default {
                 resultKey: "alertReasons",
                 promise: alertReasonsPromise,
             },
-            {
-                resultKey: "datePickerInitialData",
-                promise: datePickerInitialDataPromise,
-            },
             {
                 resultKey: "pricingByDayUpchargePart",
                 promise: pricingByDayUpchargePartPromise,
@@ -579,6 +569,7 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
+        // add pricing by day data
         const pricingByDayUpcharge =
             showPricingByDay && resultMap.pricingByDayUpchargePart
                 ? await baseMixin.methods.getTotalLineItemPrice(
@@ -587,31 +578,21 @@ export default {
                   )
                 : null;
 
-        const datePickerInitialData = resultMap.datePickerInitialData;
-        datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
-        datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
-
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.datePicker.initializeComponent(datePickerInitialData);
             vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
-            vm.selectableDatesInshop =
-                datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
-            vm.selectableDatesMobile =
-                datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
             vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
                 ? resultMap.premiumFeeWithPrice[0]
                 : null;
             vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
-            vm.setDisplayWaitList();
             vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
             vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
             vm.isPricingByDayExperiment = isPricingByDayExperiment;
             vm.pricingByDayBasePrice = pricingByDayBasePrice;
             vm.pricingByDayUpcharge = pricingByDayUpcharge;
             vm.showPricingByDay = showPricingByDay;
-
+            vm.preSelectedDate = preSelectedDate;
             vm.appointmentType = appointmentType;
             vm.setData(
                 resultMap.zipCodeData,
@@ -619,39 +600,7 @@ export default {
                 resultMap.mobileFeePart,
                 shopProviderData.data
             );
-        });
+            vm.initializeDatePicker();
-    },
-    mounted() {
-        this.$nextTick(() => {
-            if (!this.selectedDate) {
-                // if no date is preselected on load, then select the first available
-                if (this.isMobileSelected) {
-                    this.selectedDate = returnFirstDate(this.selectableDatesMobile);
-                } else {
-                    this.selectedDate = returnFirstDate(this.selectableDatesInshop);
-                }
-
-                // if there is still no selected date, then load more and try again
-                if (!this.selectedDate) {
-                    setTimeout(() => {
-                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDates) => {
-                            // update global
-                            this.selectableDatesInshop.days =
-                                moreSelectableDates.inshopTimeSlotsData.days;
-                            this.selectableDatesMobile.days =
-                                moreSelectableDates.mobileTimeSlotsData.days;
-
-                            if (this.isMobileSelected) {
-                                this.selectedDate = returnFirstDate(this.selectableDatesMobile);
-                            } else {
-                                this.selectedDate = returnFirstDate(this.selectableDatesInshop);
-                            }
-
-                            this.setDisplayWaitList();
-                        });
-                    }, 50);
-                }
-            }
         });
     },
     computed: {
@@ -664,17 +613,7 @@ export default {
                 };
             },
             set: function (newValue) {
-                if (newValue.zipCode !== this.zipCode) {
+                this.handleZipCodeChange(newValue);
-                    this.resetMobileLocation();
-                    this.appointmentType = null;
-                    this.selectedProvider = new Provider();
-                }
-
-                this.state = newValue.state;
-                this.zipCode = newValue.zipCode;
-                this.zipCodeCtu = newValue.zipCodeCtu;
-
-                this.$nextTick();
             },
         },
         isMobileSelected() {
@@ -806,20 +745,10 @@ export default {
             return store.getters.order.policy.isNoComp;
         },
         isForwardActionDisabled() {
-            return this.displayNoShopsAlert || !this.isMobileAddressValid;
+            return !this.selectedTimeSlotInfo?.timeSlot?.routeCode || !this.appointmentType;
         },
         additionalButtonData() {
-            const startDate = new Date();
-            const endDate = new Date();
-            endDate.setDate(startDate.getDate() + 6);
-
-            const formattedStartDate = startDate.toISOString().split("T")[0];
-            const formattedEndDate = endDate.toISOString().split("T")[0];
-
             return {
-                availabilityRatingCallback: getAvailabilityRating,
-                startDate: formattedStartDate,
-                endDate: formattedEndDate,
                 shopAppointmentType: this.appointmentType,
             };
         },
@@ -831,7 +760,11 @@ export default {
                 });
             };
 
-            if (this.selectedProvider && this.selectedProvider.address) {
+            if (
+                this.selectedProvider &&
+                this.selectedProvider.address &&
+                this.selectedProvider?.providerNumber
+            ) {
                 const provider = this.shopProviderData?.shopProviders?.find(
                     (p) => p.providerNumber === this.selectedProvider?.providerNumber
                 );
@@ -983,13 +916,13 @@ export default {
 
             if (shopProviderData) {
                 this.shopProviderData = shopProviderData;
+                this.updateSelectedProvider(); // ensure that page loads with non-null selectedProvider
             }
 
             var gaLabel = this.GaLabels.NO;
             if (this.isServiceableMobile) {
                 gaLabel = this.GaLabels.YES;
             }
-
             this.pushEventToGA(
                 this.GaCategories.APPOINTMENT,
                 this.GaActions.MOBILE_AVAILABLE,
@@ -1038,10 +971,10 @@ export default {
         getIsVehicleProtectedFromStore() {
             return store.getters.order.serviceLocation.isVehicleProtected;
         },
-        getAppointmentType() {
+        getAppointmentTypeFromStore() {
             return store.getters.order.serviceLocation.appointmentType;
         },
-        getSelectedProvider() {
+        getSelectedProviderFromStore() {
             return store.getters.order.serviceLocation.provider;
         },
         resetMobileLocation() {
@@ -1051,6 +984,17 @@ export default {
 
             this.isVehicleProtected = null;
         },
+        resetWaitlist() {
+            this.dispatchStoreAction(this.storeActions.SAVE_WAITLIST_REQUESTED, false, false);
+            this.waitListRequested = false;
+        },
+        onServiceZipChanged() {
+            this.resetWaitlist();
+            this.appointmentType = null;
+            this.selectedProvider = null;
+            this.appointmentTypeFromAppointmentTypeQuestion = null;
+            this.preSelectedDate = null;
+        },
         setServiceabilityDetails(serviceabilityDetails) {
             this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
             this.isRecalibrationServiceableInshop =
@@ -1164,43 +1108,22 @@ export default {
                 startTime: "08:00",
             };
         },
-        onShopSelected(providerObject) {
+        onShopSelected(shopQuestionPopUpData) {
-            const current = this.shopProviderData?.shopProviders?.find(
+            this.resetWaitlist();
-                (p) => p.providerNumber === this.selectedProvider?.providerNumber
+            this.preSelectedDate = null;
-            );
+            this.shopProviderData = shopQuestionPopUpData.shopProviderData;
-            if (current) {
+            const selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => {
-                this.selectedProvider = current;
+                return shopProvider.providerNumber === shopQuestionPopUpData.selectedProviderNumber;
-            }
+            });
 
-            let provider = this.shopProviderData?.shopProviders?.find(
+            // No zipCodeData comes back if zip was not changed
-                (p) => p.providerNumber === providerObject?.providerNumber
+            if (shopQuestionPopUpData.zipCodeData) {
-            );
+                this.updateSelectedProviderAndZipCode(
-            this.selectedProvider = provider;
+                    shopQuestionPopUpData.zipCodeData,
-            if (providerObject && providerObject.address) {
+                    selectedProvider
-                this.zipCode = providerObject.searchedZip;
-                this.state = providerObject.searchedState;
-            }
-        },
-        setZipcodeCtu(zipcodeCtu) {
-            this.zipCodeCtu = zipcodeCtu;
-        },
-        onShopModelUpdated(newModel) {
-            if (newModel.zipCode) {
-                this.zipCode = newModel.zipCode;
-            }
-            if (newModel.zipCodeCtu) {
-                this.zipCodeCtu = newModel.zipCodeCtu;
-            }
-            if (newModel.state) {
-                this.state = newModel.state;
-            }
-            if (this.shopProviderData && newModel.selectedProviderNumber) {
-                const provider = this.shopProviderData.shopProviders.find(
-                    (p) => p.providerNumber === newModel.selectedProviderNumber
                 );
-                if (provider) {
+            } else {
-                    this.selectedProvider = provider;
+                this.updateSelectedProvider(selectedProvider);
-                }
             }
         },
         async getMoreScheduleData(startDate, endDate) {
@@ -1208,8 +1131,10 @@ export default {
             const moreShopTimeSlots = await getScheduleApiResponse({
                 startDateString: startDate,
                 endDateString: endDate,
-                providerNumber: this.selectedProvider.providerNumber,
+                providerNumber: this.selectedProvider?.providerNumber,
                 zipCode: this.zipCode,
+                includeMobileTimeSlots: this.isServiceableMobile,
+                includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
             });
 
             // ADD API CALL RESULTS TO EXISTING DATE DATA
@@ -1222,11 +1147,71 @@ export default {
 
             return moreShopTimeSlots;
         },
+
+        async initializeDatePicker() {
+            this.selectedDate = null;
+
+            const datePickerInitialData = await this.$refs.datePicker.loadInitialData({
+                // setup config options for date-picker
+                selectableDatesSetting: "custom",
+                initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
+                getSelectableDatesCallback: getScheduleApiResponse,
+                preSelectedDate: this.preSelectedDate,
+                providerNumber: this.selectedProvider?.providerNumber,
+                zipCode: this.zipCode,
+                includeMobileTimeSlots: this.isServiceableMobile,
+                includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
+            });
+            datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
+            datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
+            await this.$refs.datePicker.initializeComponent(datePickerInitialData);
+            this.selectableDatesInshop =
+                datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
+            this.selectableDatesMobile =
+                datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
+            this.setDisplayWaitList();
+
+            if (this.preSelectedDate) this.selectedDate = this.preSelectedDate;
+
+            if (!this.selectedDate) {
+                // if no date is preselected on load, then select the first available
+                let selectedDateMobile = this.getSelectedDateForMobile();
+                let selectedDateInshop = this.getSelectedDateForInshop();
+
+                // if there is still no selected date, then load more and try again
+                if (
+                    (this.isServiceableMobile && !selectedDateMobile) ||
+                    (this.isServiceableInshop && !selectedDateInshop) ||
+                    (this.isServiceableDropoff && !selectedDateInshop)
+                ) {
+                    await this.$nextTick();
+                    await this.$refs.datePicker.showAnotherMonth();
+
+                    // update all dates
+
+                    // > CHLOE HERD 7/22 -- CASH-1207
+                    // > Do not update the available dates again here;
+                    // > they have already been updated by `showAnotherMonth`.
+                    // > Doing so will likely add or remove dates,
+                    // > desyncing the schedule page and the date-picker.
+
+                    this.setDisplayWaitList();
+                }
+
+                await this.$nextTick();
+
+                if (this.isMobileSelected) {
+                    this.selectedDate = this.getSelectedDateForMobile();
+                } else {
+                    this.selectedDate = this.getSelectedDateForInshop();
+                }
+            }
+        },
         getScheduleApiResponse,
         getServiceZipCtuCodeFromStore() {
             return store.getters.order.serviceLocation.zipCodeCtu;
         },
-        getSelectedDate() {
+        getSelectedDateFromStore() {
             let isMobileSelected = this.isMobileSelected;
             if (isMobileSelected === undefined) {
                 isMobileSelected = this.appointmentType === AppointmentTypeStrings.MOBILE;
@@ -1270,7 +1255,10 @@ export default {
                     this.appointmentType === AppointmentTypeStrings.DROP_OFF
                 ) {
                     if (
-                        !timeSlotInfo.timeSlot.routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)
+                        !timeSlotInfo.timeSlot.routeCode.includes(
+                            RouteCodeFlags.ALL_DAY_DROP_OFF
+                        ) &&
+                        !timeSlotInfo.timeSlot.routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)
                     ) {
                         navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
                             timeSlotInfo.timeSlot.startTime
@@ -1328,19 +1316,20 @@ export default {
                 );
             }
         },
+        showLoadingModal() {
+            this.$refs.loadingModal.showModal();
+        },
         async forwardButtonAction() {
             this.navigatingForward = true;
             var ctu = this.zipCodeCtu;
-            if (
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                this.appointmentType == AppointmentTypeStrings.MOBILE &&
+                if (this.selectedProvider && this.selectedProvider.address) {
-                this.selectedProvider &&
+                    this.selectedProvider.address.streetAddress = null;
-                this.selectedProvider.address
+                    this.selectedProvider.address.city = null;
-            ) {
+                    this.selectedProvider.address.state = null;
-                this.selectedProvider.address.streetAddress = null;
+                    this.selectedProvider.address.zipCode = null;
-                this.selectedProvider.address.city = null;
+                    this.selectedProvider.address.zipCodeCtu = null;
-                this.selectedProvider.address.state = null;
+                }
-                this.selectedProvider.address.zipCode = null;
-                this.selectedProvider.address.zipCodeCtu = null;
             } else {
                 if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
                     ctu = this.selectedProvider.address.zipCodeCtu;
@@ -1420,12 +1409,15 @@ export default {
             }
 
             if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
-                this.selectedTimeSlotInfo.timeSlot.jobMinMinutes = this.isMobileSelected
+                this.selectedTimeSlotInfo = this.getSelectedTimeSlotInfo();
-                    ? this.selectableDatesMobile.estimatedServiceMinutesMinimum?.toString()
+                if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
-                    : this.selectableDatesInshop.estimatedServiceMinutesMinimum?.toString();
+                    this.selectedTimeSlotInfo.timeSlot.jobMinMinutes = this.isMobileSelected
-                this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes = this.isMobileSelected
+                        ? this.selectableDatesMobile.estimatedServiceMinutesMinimum?.toString()
-                    ? this.selectableDatesMobile.estimatedServiceMinutesMaximum?.toString()
+                        : this.selectableDatesInshop.estimatedServiceMinutesMinimum?.toString();
-                    : this.selectableDatesInshop.estimatedServiceMinutesMaximum?.toString();
+                    this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes = this.isMobileSelected
+                        ? this.selectableDatesMobile.estimatedServiceMinutesMaximum?.toString()
+                        : this.selectableDatesInshop.estimatedServiceMinutesMaximum?.toString();
+                }
             }
 
             this.dispatchStoreAction(
@@ -1454,19 +1446,19 @@ export default {
                     this.pageName
                 );
             }
+            this.showLoadingModal();
         },
         setDisplayWaitList() {
+            const dateString = this.isMobileSelected
+                ? this.selectableDatesMobile?.days[0]?.date
+                : this.selectableDatesInshop?.days[0]?.date;
             if (
                 experimentMixin.methods.hasSettingEqualTo(
                     experimentSettings.DISPLAY_WAITLIST,
                     "true"
                 ) &&
-                this.selectableDatesInshop.days[0] &&
+                dateString
-                this.selectableDatesMobile.days[0]
             ) {
-                const dateString = this.isMobileSelected
-                    ? this.selectableDatesMobile.days[0].date
-                    : this.selectableDatesInshop.days[0].date;
                 const [year, month, day] = dateString.split("-").map(Number);
                 const targetDate = new Date(year, month - 1, day);
                 const currentDate = new Date();
@@ -1568,8 +1560,17 @@ export default {
         },
         updateTimeSlot(timeSlotObj) {
             this.selectedTimeSlotInfo = timeSlotObj;
-            if (this.appointmentType !== AppointmentTypeStrings.MOBILE) {
+            if (
+                this.appointmentType !== AppointmentTypeStrings.MOBILE &&
+                this.appointmentType !== null
+            ) {
                 // update apptType based on routeCode to determine if it should be dropoff or inshop
+                debugLog(`Updating appointment type based on route code.`);
+                debugLog(`Route code =`, timeSlotObj.timeSlot.routeCode);
+                debugLog(
+                    `Parsed type = `,
+                    this.getInShopOrDropOffApptType(timeSlotObj.timeSlot.routeCode)
+                );
                 this.appointmentType = this.getInShopOrDropOffApptType(
                     timeSlotObj.timeSlot.routeCode
                 );
@@ -1580,56 +1581,128 @@ export default {
                 ? AppointmentTypeStrings.DROP_OFF
                 : AppointmentTypeStrings.IN_SHOP;
         },
+        getSelectedDate() {
+            let dateToSelect;
+            if (this.isMobileSelected) {
+                dateToSelect = returnFirstDate(this.selectableDatesMobile);
+            } else {
+                dateToSelect = returnFirstDate(this.selectableDatesInshop);
+            }
+            if (!dateToSelect) return null;
+            return this.isMobileSelected ? dateToSelect + "-mobile" : dateToSelect;
+        },
+        getSelectedDateForMobile() {
+            let dateToSelect = returnFirstDate(this.selectableDatesMobile);
+            if (!dateToSelect) return null;
+            return dateToSelect + "-mobile";
+        },
+        getSelectedDateForInshop() {
+            let dateToSelect = returnFirstDate(this.selectableDatesInshop);
+            if (!dateToSelect) return null;
+            return dateToSelect;
+        },
+        resetSelectedProvider() {
+            this.selectedProvider = new Provider();
+            this.updateSelectedProvider();
+        },
+        updateSelectedProvider(newProvider) {
+            if (newProvider) {
+                this.selectedProvider = newProvider;
+                this.initializeDatePicker();
+            } else if (this.appointmentType === this.appointmentTypeStrings.MOBILE) {
+                this.selectedProvider = {
+                    providerNumber: this.shopProviderData.mobileProviderNumber.toString(),
+                    address: {
+                        streetAddress: null,
+                        city: null,
+                        state: null,
+                        zipCode: null,
+                        zipCodeCtu: null,
+                    },
+                };
+            } else if (
+                !this.selectedProvider?.address?.streetAddress &&
+                this.shopProviderData?.shopProviders?.length
+            ) {
+                this.selectedProvider = this.shopProviderData.shopProviders[0];
+            }
+        },
+        handleZipCodeChange(newZipCode) {
+            this.resetMobileLocation();
+
+            getShopProviderData(newZipCode.zipCode).then((result) => {
+                this.shopProviderData = result.data;
+                this.resetSelectedProvider();
+                this.state = newZipCode.state;
+                this.zipCode = newZipCode.zipCode;
+                this.zipCodeCtu = newZipCode.zipCodeCtu;
+                this.selectedDate = null;
+                this.initializeDatePicker();
+            });
+        },
+        updateSelectedProviderAndZipCode(newZipCode, newProvider) {
+            this.resetMobileLocation();
+            this.state = newZipCode.state;
+            this.zipCode = newZipCode.zipCode;
+            this.zipCodeCtu = newZipCode.zipCodeCtu;
+            this.zipContainsMilitaryBase = newZipCode.containsMilitaryBase;
+            this.selectedDate = null;
+            this.selectedProvider = newProvider;
+            this.initializeDatePicker();
+        },
+        handleAppointmentTypeChange(newAppointmentType) {
+            this.updateFooterButtonText();
+            if (newAppointmentType === AppointmentTypeStrings.MOBILE) {
+                // Remember last shop selected if previous selection was inshop/dropoff
+                if (
+                    (this.appointmentType == AppointmentTypeStrings.IN_SHOP ||
+                        AppointmentTypeStrings.DROP_OFF ||
+                        AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) &&
+                    this.selectedProvider
+                ) {
+                    this.lastSelectedInshopOrDropoffProvider = this.selectedProvider;
+                }
+                this.appointmentType = AppointmentTypeStrings.MOBILE;
+                this.updateSelectedProvider();
+            } else if (newAppointmentType) {
+                if (this.appointmentType != AppointmentTypeStrings.MOBILE) {
+                    // Clear last shop selected if appointment type was changed in any manner other than from Mobile
+                    this.lastSelectedInshopOrDropoffProvider = null;
+                }
+                if (this.selectedTimeSlotInfo?.timeSlot?.routeCode) {
+                    // update appointmentType based on routeCode to determine if it should be dropoff or inshop
+                    this.appointmentType = this.getInShopOrDropOffApptType(
+                        this.selectedTimeSlotInfo.timeSlot.routeCode
+                    );
+                } else {
+                    this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
+                }
+
+                // make sure a selectedProvider exists
+                this.updateSelectedProvider(this.lastSelectedInshopOrDropoffProvider);
+            } else {
+                this.appointmentType = null;
+            }
+            this.selectedDate = this.getSelectedDate();
+            this.setDisplayWaitList();
+        },
     },
     watch: {
-        zipCode: {
-            handler(newValue) {
-                if (!this.navigatingForward) {
-                    getShopProviderData(this.zipCode).then(async (result) => {
-                        this.shopProviderData = result.data;
-                        if (this.appointmentType === "Mobile") {
-                            this.selectedProvider = new Provider(
-                                this.shopProviderData.mobileProviderNumber
-                            );
-                        } else {
-                            this.isMobileAddressValid = true;
-                        }
-                    });
-                }
-            },
-        },
-        appointmentType: {
-            handler(newValue, oldValue) {
-                if (newValue === AppointmentTypeStrings.MOBILE) {
-                    this.selectedProvider = new Provider(
-                        this.shopProviderData.mobileProviderNumber
-                    );
-                    this.isMobileSelected = true;
-                } else {
-                    this.selectedProvider = this.shopProviderData.shopProviders[0];
-                }
-            },
-        },
         appointmentTypeFromAppointmentTypeQuestion: {
             handler(newValue, oldValue) {
-                if (newValue === AppointmentTypeStrings.MOBILE) {
+                this.handleAppointmentTypeChange(newValue);
-                    this.appointmentType = AppointmentTypeStrings.MOBILE;
-                } else {
-                    if (this.selectedTimeSlotInfo?.timeSlot?.routeCode) {
-                        // update appointmentType based on routeCode to determine if it should be dropoff or inshop
-                        this.appointmentType = this.getInShopOrDropOffApptType(
-                            this.selectedTimeSlotInfo.timeSlot.routeCode
-                        );
-                    } else {
-                        this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
-                    }
-                }
             },
         },
-
         selectedDate(newValue, oldValue) {
             // Clear time slot selection if date selected changes
-            if (newValue !== oldValue) {
+            const selectedDate = this.getSelectedDateFromStore();
+            if (oldValue && this.appointmentType === AppointmentTypeStrings.MOBILE) {
+                oldValue = `${oldValue}-mobile`;
+            }
+            const hasValueChanged = newValue !== oldValue;
+            const isDateDifferent = (newValue || oldValue) !== selectedDate;
+
+            if (hasValueChanged && isDateDifferent) {
                 this.selectedTimeSlotInfo = {
                     timeSlot: {
                         date: null,

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

@@ -94,7 +94,6 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span.premium-appointment-price {
         position: absolute;

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

@@ -7,7 +7,8 @@
             :answers="answersForDropOffQuestion"
             isRequired
             insertOrLabelBeforeFinalOption
-            groupName="chooseDropOffOrInshop">
+            groupName="chooseDropOffOrInshop"
+            validationRules="time-slot-required">
             <div>
                 <alert
                     v-if="shouldDisplayDropOffAlert"
@@ -40,7 +41,7 @@
             v-if="supplementalInformationBlock"
             v-html="supplementalInformationBlock" />
         <div
-            v-if="hasWaitListExperiment && displayWaitListFeature"
+            v-if="hasWaitListExperiment && displayWaitListFeature && selectedDate"
             class="mt-5 bg-light rounded waitlist">
             <textBlock
                 cmsWidgetName="WaitListLabelWidget"
@@ -53,7 +54,10 @@
                 v-model="waitListRequested"
                 @click="waitListChecked" />
         </div>
-        <div v-if="waitListRequested" class="rounded waitlist-success" ref="waitlistSuccessMessage">
+        <div
+            v-if="waitListRequested && displayWaitList && selectedDate"
+            class="rounded waitlist-success"
+            ref="waitlistSuccessMessage">
             <img :src="waitListSuccessImage" class="success-image" />
             <span v-html="waitListSuccessText" class="success-text"></span>
         </div>
@@ -76,6 +80,7 @@ import alert from "@/ux-components/alert/alert.vue";
 import experimentMixin from "@/mixins/experiment-mixin";
 import { experimentSettings } from "@/constants/experiments";
 import store from "@/store";
+import { storeActions } from "@/constants/store-actions";
 
 // Helpers
 import { deepClone } from "@/helpers/object-helper";
@@ -144,7 +149,6 @@ export default {
         return {
             selectedRouteCode: null,
             timeSlotModalListButton: timeSlotModalListButton,
-            waitListRequested: this.getWaitListRequestedFromStore(),
             selectedAnswerForDropOffOrInshop: null,
             selectedAnswerForTimeSlots: null,
         };
@@ -222,7 +226,7 @@ export default {
         },
         premiumAppointmentButtonText() {
             return this.getCmsContent(
-                this.dropOffOrPickATimeQuestionCmsWidgetName,
+                this.mobilePremiumCmsWidgetName,
                 cmsWidgetFieldMappings.TIME_SLOT_BUTTON
             );
         },
@@ -345,6 +349,14 @@ export default {
         waitListSuccessText() {
             return this.getCmsContent("WaitListSuccessWidget", "BodyText");
         },
+        waitListRequested: {
+            get() {
+                return this.$store.getters.order.customer?.waitListRequested;
+            },
+            set(value) {
+                this.dispatchStoreAction(storeActions.SAVE_WAITLIST_REQUESTED, value);
+            },
+        },
         isMobileAppointment() {
             return this.appointmentType === AppointmentTypeStrings.MOBILE;
         },
@@ -432,6 +444,8 @@ export default {
                 );
             }
 
+            this.resetSelectedTimeSlotIfDateChange(timeSlotsForSelectedDate);
+
             return availableTimeSlots;
         },
         getPremiumAppointmentTimeSlot(timeSlotData) {
@@ -468,7 +482,7 @@ export default {
             return store.getters.order.customer?.waitListRequested;
         },
         autoSelectTimeSlotIfOnlyOneIsAvailable() {
-            const numberOfOptions = this.timeSlotsForSelectedDate.timeSlots?.length;
+            const numberOfOptions = this.timeSlotsForSelectedDate?.timeSlots?.length;
             if (numberOfOptions === 1) {
                 if (this.availableTimeSlots.length > 0) {
                     this.selectedAnswerForTimeSlots = this.availableTimeSlots[0].value;
@@ -527,6 +541,23 @@ export default {
                 successMessageElement.scrollIntoView({ behavior: "smooth" });
             }
         },
+        resetSelectedTimeSlotIfDateChange(timeSlotsForSelectedDate) {
+            if (this.selectedRouteCode) {
+                const selectedRouteCodeString = this.selectedRouteCode.replace(
+                    PREMIUM_TIME_SLOT_ID_FLAG,
+                    ""
+                );
+                const matchingTimeSlot = timeSlotsForSelectedDate.find((slot) => {
+                    return slot.id === selectedRouteCodeString;
+                });
+                if (!matchingTimeSlot) {
+                    this.resetSelectedTimeSlot();
+                }
+            }
+        },
+        resetSelectedTimeSlot() {
+            this.selectedRouteCode = null;
+        },
     },
     watch: {
         waitListRequested(newVal) {
@@ -544,7 +575,9 @@ export default {
         },
         selectedDate: {
             handler() {
-                this.selectedRouteCode = null;
+                this.resetSelectedTimeSlot();
+                this.selectedAnswerForDropOffOrInshop = null;
+                this.selectedAnswerForTimeSlots = null;
                 this.autoSelectTimeSlotIfOnlyOneIsAvailable();
             },
         },

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -73,7 +73,11 @@ export default {
         },
         selectedValue: {
             get: function () {
-                return this.modelValue;
+                if (this.modelValue === AppointmentTypeStrings.DROP_OFF) {
+                    return AppointmentTypeStrings.IN_SHOP;
+                } else {
+                    return this.modelValue;
+                }
             },
             set: function (newValue) {
                 this.$emit("update:modelValue", newValue);

src/layouts/service-location/helpers/service-location-helper/service-location-helper.js

@@ -122,35 +122,6 @@ export async function getShopProviderData(serviceZipCode) {
     );
 }
 
-export async function getAvailabilityRating(
-    startDate,
-    endDate,
-    shopAppointmentType,
-    providerNumber
-) {
-    // For a given shop provider number and date range, get the appointment time slots available
-    const shopTimeSlots = await baseMixin.methods.dispatchStoreActionWithLogging(
-        storeActions.GET_SHOP_TIME_SLOTS,
-        {
-            providerNumber: providerNumber,
-            startDate: startDate,
-            endDate: endDate,
-            shopAppointmentType: shopAppointmentType,
-        },
-        "service-location",
-        false
-    );
-
-    const numberOfDaysToEvaluate = 2;
-    const isGoodAvailability =
-        shopTimeSlots.data.days.filter((x) => x.timeSlots.length > 0).length >=
-        numberOfDaysToEvaluate;
-
-    const shopStatus = isGoodAvailability ? "high" : "low";
-
-    return shopStatus;
-}
-
 export async function getClosestApplicableShops(serviceZipCode, carId, pageNameToLog) {
     if (!serviceZipCode) {
         return null;

src/layouts/service-location/helpers/service-location-helper/service-location-helper.spec.js

@@ -1,8 +1,4 @@
-import {
+import { getPricedMobileFeePart, getServiceabilityDetails } from "./service-location-helper";
-    getPricedMobileFeePart,
-    getServiceabilityDetails,
-    getAvailabilityRating,
-} from "./service-location-helper";
 import { storeActions } from "@/constants/store-actions";
 
 jest.mock("@/store", () => ({
@@ -320,38 +316,4 @@ describe("service-location-helper.js", () => {
             expect(result).toEqual(expected);
         });
     });
-
-    describe("getAvailabilityRating", () => {
-        it("Should return a 'high' rating", async () => {
-            // Arrange
-            const providerNumber = "0000001";
-            const expected = "high";
-            // Act
-            const result = await getAvailabilityRating(
-                "2023-06-30",
-                "2023-07-06",
-                "Inshop",
-                providerNumber
-            );
-
-            // Assert
-            expect(result).toEqual(expected);
-        });
-
-        it("Should return a 'low' rating", async () => {
-            // Arrange
-            const providerNumber = "0000000";
-            const expected = "low";
-            // Act
-            const result = await getAvailabilityRating(
-                "2023-06-30",
-                "2023-07-06",
-                "Inshop",
-                providerNumber
-            );
-
-            // Assert
-            expect(result).toEqual(expected);
-        });
-    });
 });

src/layouts/service-location/service-location.vue

@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles">
-        <div class="container page-container-grouped-styles">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <serviceZipModalQuestion
@@ -65,8 +69,8 @@
                         alertClass="alert-success" />
                 </div>
             </div>
-            <div class="row appointment-type">
+            <div class="row justify-content-center appointment-type">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                <div class="col-md-6">
                     <appointmentTypeQuestion
                         v-model="selectedAppointmentType"
                         v-show="isAppointmentTypeDisplayed"
@@ -83,8 +87,21 @@
                         labelBold="true" />
                 </div>
             </div>
-            <div class="row">
+            <div class="row justify-content-center">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                <div class="col-md-6 col-xl-4">
+                    <button-question
+                        v-if="selectedAppointmentType == appointmentTypeStrings.IN_SHOP"
+                        class="shop-question-button"
+                        ref="buttonQuestion"
+                        :answers="selectedShopAnswer"
+                        :modelValue="selectedProvider?.providerNumber"
+                        :isMultiSelect="false"
+                        :readonly="true"
+                        :questionText="questionText"
+                        buttonTypeString="shopListButton"
+                        :buttonTypeObject="shopListButton"
+                        groupName="chooseShop"
+                        textPosition="text-start" />
                     <div class="text-center">
                         <textBlock
                             v-if="mobileFeeApplies && isMobileSelected"
@@ -131,10 +148,9 @@
 import alert from "@/ux-components/alert/alert";
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
-import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
 import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
 import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
-import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
@@ -145,7 +161,6 @@ import contentGroupModal from "@/fmg-components/content-group-modal/content-grou
 import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting files
-import baseMixin from "@/mixins/base-mixin.js";
 import experimentMixin from "@/mixins/experiment-mixin.js";
 import { experimentSettings } from "@/constants/experiments";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
@@ -432,17 +447,7 @@ export default {
             return this.displayNoShopsAlert || !this.isMobileAddressValid;
         },
         additionalButtonData() {
-            const startDate = new Date();
-            const endDate = new Date();
-            endDate.setDate(startDate.getDate() + 6);
-
-            const formattedStartDate = startDate.toISOString().split("T")[0];
-            const formattedEndDate = endDate.toISOString().split("T")[0];
-
             return {
-                availabilityRatingCallback: getAvailabilityRating,
-                startDate: formattedStartDate,
-                endDate: formattedEndDate,
                 shopAppointmentType: this.selectedAppointmentType,
             };
         },
@@ -895,6 +900,7 @@ export default {
         loadingModal,
         contentGroupModal,
         shopQuestionPopup,
+        buttonQuestion,
         textBlock,
     },
 };
@@ -907,6 +913,10 @@ export default {
             @include media-breakpoint-up(md) {
                 padding: 0 0.75rem;
             }
+            @include media-breakpoint-up(xl) {
+                width: 33.3333333%;
+                flex: 0 0 auto;
+            }
         }
     }
 }

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="text-left">
+    <div class="text-center">
         <div class="update-zip-text-link">
             <textLink
                 id="serviceZipLinkPromptId"
@@ -219,7 +219,7 @@ export default {
                     this.$emit("updated-serviceability", serviceabilityDetails.data);
                     this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
                     this.$emit("updated-bill-to-account-number", billToAccountNumber);
-
+                    this.$emit("service-zip-changed-from-modal");
                     // update the page level model
                     this.$emit("update:modelValue", this.internalModel);
 

src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue

@@ -8,7 +8,6 @@
         cornerStyle="rounded"
         mask="#####"
         :includeSearchIcon="includeSearchIcon"
-        @search-icon-click="$emit('search-icon-click')"
         :displayQuestionText="false"
         :isRequired="isRequired"
         :validationRules="computedValidationRules" />

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -2,11 +2,11 @@
     <transition name="fade" mode="out-in">
         <baseInputButton
             v-bind="$props"
-            buttonWrapperClasses="list-group base-input-button rounded-pill list-button d-flex flex-column w-100 mb-2"
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
             v-model="selectedValue">
             <div
                 :aria-label="buttonLabel"
-                class="button-content list-button-content rounded-pill d-flex flex-column justify-content-center py-3 px-4 p-md-4">
+                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
                 <div class="row-one">
                     <span class="m-0 button-label-copy text-truncate" :class="textPosition">
                         {{ buttonLabel }}
@@ -58,15 +58,22 @@ export default {
     beforeMount() {
         if (this.displayAvailabilityIndicators) {
             this.displayLoader();
-            const startDate = this.additionalButtonData.startDate;
+            const startDate = new Date();
-            const endDate = this.additionalButtonData.endDate;
+            const endDate = new Date();
+            endDate.setDate(startDate.getDate() + 6);
+            const formattedStartDate = startDate.toISOString().split("T")[0];
+            const formattedEndDate = endDate.toISOString().split("T")[0];
+
             const shopAppointmentType = this.additionalButtonData.shopAppointmentType;
 
-            this.additionalButtonData
+            this.getAvailabilityRating(
-                .availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
+                formattedStartDate,
-                .then((data) => {
+                formattedEndDate,
-                    this.availabilityRating = data;
+                shopAppointmentType,
-                });
+                this.value
+            ).then((data) => {
+                this.availabilityRating = data;
+            });
         }
     },
     data() {
@@ -103,6 +110,29 @@ export default {
         displayLoader() {
             this.isLoaderDisplayed = true;
         },
+        async getAvailabilityRating(startDate, endDate, shopAppointmentType, providerNumber) {
+            // For a given shop provider number and date range, get the appointment time slots available
+            const shopTimeSlots = await this.dispatchStoreActionWithLogging(
+                this.storeActions.GET_SHOP_TIME_SLOTS,
+                {
+                    providerNumber: providerNumber,
+                    startDate: startDate,
+                    endDate: endDate,
+                    shopAppointmentType: shopAppointmentType,
+                },
+                "service-location",
+                false
+            );
+
+            const numberOfDaysToEvaluate = 2;
+            const isGoodAvailability =
+                shopTimeSlots.data.days.filter((x) => x.timeSlots.length > 0).length >=
+                numberOfDaysToEvaluate;
+
+            const shopStatus = isGoodAvailability ? "high" : "low";
+
+            return shopStatus;
+        },
     },
     components: {
         loader,
@@ -144,10 +174,10 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
+    border-radius: $border-radius-lg;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {
@@ -163,7 +193,6 @@ export default {
         display: flex;
         align-items: center;
         line-height: 1.5rem;
-        justify-content: center;
 
         .button-label-copy {
             font-weight: 500;
@@ -233,7 +262,7 @@ export default {
     }
 
     .row-two {
-        text-align: center;
+        text-align: left;
     }
 }
 </style>

src/layouts/service-location/shop-question/shop-question-popup.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isDisplayed" class="shop-question" aria-live="polite">
+        <div class="shop-question" aria-live="polite">
             <div class="modal-link">
                 <text-link
                     linkType="text"
@@ -13,20 +13,17 @@
     <modal
         ref="shopQuestionModal"
         :headerText="modalHeaderText"
-        :onModalOpenedCallback="onModalOpened"
+        :onModalOpenedCallback="updateSelectedAnswer"
-        :onModalClosedCallback="onModalClosed"
+        :onModalClosedCallback="resetZipCodeData"
         :footerButtonText="modalFooterText"
-        :footerButtonDisabled="
+        :footerButtonDisabled="isModalFooterButtonDisabled"
-            displayInvalidZipAlert || displayNoShopsAlert || !selectedProviderNumber
-        "
         @footer-button-event="setZipCodeAndShop">
         <form @submit.prevent>
             <serviceZipQuestion
                 ref="serviceZipQuestion"
                 class="shop-question-zipcode"
                 customInputId="serviceZipCode"
-                v-model="internalModel.zipCode"
+                v-model="localZipCode"
-                v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
                 cmsWidgetName="ServiceZipQuestionWidget"
                 @search-icon-click="onSearchZip"
                 @keydown.enter="onSearchZip"
@@ -34,43 +31,48 @@
                 :isRequired="false"
                 :validationRules="''" />
         </form>
-        <alert
+        <div v-show="isLoading" class="loader-wrapper">
-            ref="alertInvalidZip"
+            <loader loaderColor="blue" loaderPosition="center" />
-            v-if="displayInvalidZipAlert"
+        </div>
-            class="mb-4"
+        <div v-show="!isLoading">
-            cmsWidgetName="AlertInvalidZipWidget"
+            <alert
-            alertClass="alert-danger"
+                ref="alertInvalidZip"
-            v-bind:isDismissible="false" />
+                v-if="displayInvalidZipAlert"
-        <alert
+                class="mb-4"
-            ref="alertNoShops"
+                cmsWidgetName="AlertInvalidZipWidget"
-            class="my-5"
+                alertClass="alert-danger"
-            cmsWidgetName="AlertNoShopsWidget"
+                v-bind:isDismissible="false" />
-            v-if="displayNoShopsAlert"
+            <alert
-            alertClass="alert-warning" />
+                ref="alertNoShops"
-        <div v-if="!displayInvalidZipAlert">
+                class="my-5"
-            <buttonQuestion
+                cmsWidgetName="AlertNoShopsWidget"
-                ref="buttonQuestion"
+                v-if="displayNoShopsAlert"
-                buttonTypeString="shopListButton"
+                alertClass="alert-warning" />
-                :buttonTypeObject="shopListButton"
+            <div v-if="!displayInvalidZipAlert">
-                class="radioQuestion"
+                <buttonQuestion
-                :questionText="questionText"
+                    ref="buttonQuestion"
-                :answers="answers"
+                    buttonTypeString="shopListButton"
-                groupName="chooseShop"
+                    :buttonTypeObject="shopListButton"
-                textPosition="text-start"
+                    class="radioQuestion"
-                v-model="selectedProviderNumber"
+                    :questionText="questionText"
-                isRequired
+                    :answers="answers"
-                :validationRules="this.selectedProviderNumber ? '' : 'option-required'" />
+                    groupName="chooseShop"
-            <div class="show-more-shops-link">
+                    textPosition="text-start"
-                <textLink
+                    v-model="localSelectedProviderNumber"
-                    v-if="displaySeeMoreLocationsLink"
+                    isRequired
-                    ref="showMoreShopsLink"
+                    :validationRules="this.localSelectedProviderNumber ? '' : 'option-required'" />
-                    id="showMoreShopsId2"
+                <div class="show-more-shops-link">
-                    cmsWidgetName="ShowMoreShopsLinkWidget"
+                    <textLink
-                    linkType="text"
+                        v-if="displaySeeMoreLocationsLink"
-                    :text="showMoreShopsLinkText"
+                        ref="showMoreShopsLink"
-                    href="#!"
+                        id="showMoreShopsId2"
-                    @click-event="getNextShopsFromList(3)"
+                        cmsWidgetName="ShowMoreShopsLinkWidget"
-                    :aria-label="showMoreShopsLinkText" />
+                        linkType="text"
+                        :text="showMoreShopsLinkText"
+                        href="#!"
+                        @click-event="updateShopListWithNextShops()"
+                        :aria-label="showMoreShopsLinkText" />
+                </div>
             </div>
         </div>
     </modal>
@@ -84,81 +86,45 @@ import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-que
 import buttonQuestion from "@/digital-components/button-question/button-question.vue";
 import alert from "@/ux-components/alert/alert.vue";
 import shopListButton from "./shop-list-button/shop-list-button";
-import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 // Supporting files
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
-import { nextTick } from "vue";
+import loader from "@/ux-components/loader/loader";
-import { regex } from "@/helpers/validation-rules";
 
-import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
-
-import { Provider } from "@/layouts/service-location/classes/provider";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
 import {
-    getPricedMobileFeePart,
-    getPricedRecycleFeePart,
     getServiceabilityDetails,
-    getBillToAccountNumber,
     getClosestApplicableShops,
     getShopProviderData,
-    getZipCodeData,
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
-defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 export default {
     name: "shop-question-popup",
     mixins: [baseMixin],
     data() {
         return {
-            isShopQuestionDisplayed: true,
+            localZipCode: this.zipCodeFromParent,
-            internalModel: this.copyModel(this.modelValue),
-            answers: [],
             shopListButton: shopListButton,
-            shopIndex: 0,
+            numberOfShopsToDisplay: 0,
-            displaySeeMoreLocationsLink: false,
+            localShopProviderData: this.shopProviderDataFromParent,
-            serviceZipCodeTextInputId: "",
+            localSelectedProviderNumber: null,
-            localShopProviderData: this.shopProviderData,
+            zipCodeData: null,
-            selectedProviderNumber: null,
+            isLoading: false,
-            isLoadingShops: false,
-            lastSearchedZip: "",
-            lastSuccessfulZip: "",
-            hasLoadedShopData: false,
-            displayInvalidZipAlert: false,
-            areShopsAvialable: true,
-            displayNoShopsAlert: false,
         };
     },
     props: {
-        appointmentType: String,
+        shopProviderDataFromParent: Object,
-        shopProviderData: Object,
+        zipCodeFromParent: {
-        modelValue: {
-            type: Object,
-            default: () => ({
-                state: "",
-                zipCode: "",
-            }),
-        },
-        isDisplayed: Boolean,
-        modelWidgetName: {
-            type: String,
-            required: true,
-        },
-        isServiceableInshop: {
-            type: Boolean,
-            default: false,
-        },
-        zipCode: {
             type: String,
             default: "",
         },
-        preSelectedProviderNumber: {
+        selectedProviderNumberFromParent: {
             type: String,
             default: null,
         },
@@ -167,14 +133,20 @@ export default {
         shopQuestionLinkText() {
             return this.getCmsContent("ChangeMyLocationLinkWidget", "Text");
         },
-        modalName() {
-            return this.modelWidgetName;
-        },
         modalHeaderText() {
             return this.getCmsContent("ShopQuestionWidget", "QuestionText");
         },
-        selectShopText() {
+        modalFooterText() {
-            return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
+            return this.getCmsContent("SaveLocationWidget", "Text");
+        },
+        showMoreShopsLinkText() {
+            return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
+        },
+        displayInvalidZipAlert() {
+            return this.zipCodeData && !this.zipCodeData.isValid;
+        },
+        displayNoShopsAlert() {
+            return !this.shopProviders.length && !this.displayInvalidZipAlert;
         },
         modal() {
             return this.$refs.shopQuestionModal;
@@ -182,79 +154,33 @@ export default {
         shopProviders() {
             return this.localShopProviderData?.shopProviders ?? [];
         },
-        modalFooterText() {
-            return this.getCmsContent("SaveLocationWidget", "Text");
-        },
-        selectedValue: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {},
-        },
         additionalButtonData() {
-            const startDate = new Date();
-            const endDate = new Date();
-            endDate.setDate(startDate.getDate() + 6);
-
-            const formattedStartDate = startDate.toISOString().split("T")[0];
-            const formattedEndDate = endDate.toISOString().split("T")[0];
-
             return {
-                availabilityRatingCallback: getAvailabilityRating,
+                // Used for availability indicators, could be refactored out of any availability indicator
-                startDate: formattedStartDate,
+                //   logic if/when we are sure we'll never have separate drop off/ in shop logic
-                endDate: formattedEndDate,
+                shopAppointmentType: AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF,
-                shopAppointmentType: this.appointmentType,
             };
         },
-        showMoreShopsLinkText() {
+        displaySeeMoreLocationsLink() {
-            return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
+            if (!this.shopProviders.length) return false;
+            return this.numberOfShopsToDisplay < this.shopProviders.length;
         },
-    },
+        isModalFooterButtonDisabled() {
-    methods: {
+            return (
-        openModal(event) {
+                this.isLoading ||
-            if (event) event.preventDefault();
+                this.displayInvalidZipAlert ||
-            if (
+                this.displayNoShopsAlert ||
-                !this.shopProviderData ||
+                !this.localSelectedProviderNumber
-                !this.shopProviderData.shopProviders ||
+            );
-                !this.shopProviderData.shopProviders.length
-            ) {
-                // Optionally show a loading message or disable the link
-                return;
-            }
-            this.$refs.shopQuestionModal.openModal();
         },
-        getSelectedProviderObject(providerNumber) {
+        answers() {
-            const provider =
+            const updatedProvidersToDisplay = this.shopProviders.slice(
-                this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ??
+                0,
-                new Provider();
+                this.numberOfShopsToDisplay
-
+            );
-            return provider;
+            return updatedProvidersToDisplay.map((shopProvider) => {
-        },
+                const streetAddress = this.toTitleCase(shopProvider.address.streetAddress);
-        async getNextShopsFromList(numberToGet = 3) {
+                const city = this.toTitleCase(shopProvider.address.city);
-            const logFirstShopsDisplayed = this.shopIndex == 0;
-
-            const shopIterator = (array, n) => {
-                const l = array.length;
-                return () => {
-                    const end = this.shopIndex + n;
-                    const part = array.slice(this.shopIndex, end);
-                    this.shopIndex = end < l ? end : this.shopProviders.length;
-                    return part;
-                };
-            };
-
-            const toTitleCase = (str) => {
-                return str.replace(/\w\S*/g, function (txt) {
-                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-                });
-            };
-
-            const nextShop = shopIterator(this.shopProviders, numberToGet);
-
-            // Map API result data
-            const mappedData = nextShop().map((shopProvider) => {
-                const streetAddress = toTitleCase(shopProvider.address.streetAddress);
-                const city = toTitleCase(shopProvider.address.city);
                 const state = shopProvider.address.state;
                 const zipCode = shopProvider.address.zipCode;
                 const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
@@ -267,354 +193,139 @@ export default {
                     value: shopProvider.providerNumber,
                 };
             });
-
-            var gaAction = this.GaActions.MORE_LOCATIONS_CLICKED;
-            if (logFirstShopsDisplayed) {
-                gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED;
-            }
-            if (
-                this.appointmentType === AppointmentTypeStrings.IN_SHOP ||
-                this.appointmentType === AppointmentTypeStrings.DROP_OFF ||
-                this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF
-            ) {
-                var shops = mappedData.map((shop) => {
-                    if (shop.value.length > 5 && shop.value.startsWith("00")) {
-                        return shop.value.substring(1);
-                    } else {
-                        return shop.value;
-                    }
-                });
-
-                var joinedShops = shops.join(",");
-                if (!joinedShops) {
-                    joinedShops = "no-shops";
-                }
-
-                this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, gaAction, joinedShops, true);
-            }
-
-            if (this.answers.length === 0) {
-                this.answers = mappedData;
-            } else {
-                mappedData.forEach((shop) => {
-                    this.answers.push(shop);
-                });
-            }
-
-            await nextTick();
-
-            if (this.shopIndex == this.shopProviders.length) {
-                this.displaySeeMoreLocationsLink = false;
-            } else {
-                this.displaySeeMoreLocationsLink = true;
-            }
-
-            await nextTick();
-
-            this.scrollToPageBottom();
         },
-        async handleUpdate(selectedShopIndex = null) {
+    },
-            this.resetAnswers();
+    methods: {
-            if (selectedShopIndex >= 3) {
+        openModal() {
-                await this.getNextShopsFromList(selectedShopIndex + 1);
+            // Reset local state from parent
-            } else {
+            this.zipCodeData = null;
-                await this.getNextShopsFromList();
+            this.localShopProviderData = this.shopProviderDataFromParent;
-                await nextTick();
+            this.localZipCode = this.zipCodeFromParent;
-            }
+            // This will be set once the modal is open (updateSelectedAnswer()) to ensure that the
-        },
+            //   correct answer is selected
-        copyModel(modelToCopy) {
+            this.localSelectedProviderNumber = null;
-            return {
+
-                state: modelToCopy.state,
+            const selectedProviderNumberFromParentIndex = this.shopProviders.findIndex(
-                zipCode: modelToCopy.zipCode,
+                (provider) => provider.providerNumber == this.selectedProviderNumberFromParent
-            };
-        },
-        resetAnswers() {
-            this.answers = [];
-            this.shopIndex = 0;
-        },
-        onModalOpened() {
-            const preSelectedIndex = this.shopProviders.findIndex(
-                (provider) => provider.providerNumber == this.preSelectedProviderNumber
             );
 
-            if (preSelectedIndex > -1) {
+            if (selectedProviderNumberFromParentIndex > -1) {
-                this.shopIndex = Math.ceil((preSelectedIndex + 1) / 3) * 3;
+                this.numberOfShopsToDisplay =
+                    Math.ceil((selectedProviderNumberFromParentIndex + 1) / 3) * 3;
             } else {
-                this.shopIndex = 3;
+                this.numberOfShopsToDisplay = 3;
             }
-            this.internalModel = this.copyModel(this.modelValue);
+
-            this.internalModel.zipCode = this.zipCode;
+            this.updateShopsForZip();
-            this.localShopProviderData = this.shopProviderData;
+            this.$refs.shopQuestionModal.openModal();
-            this.answers = [];
+        },
-            this.onSearchZip();
+        updateSelectedAnswer() {
-            this.focusOnZipInput();
+            this.localSelectedProviderNumber = this.selectedProviderNumberFromParent;
-            this.selectedProviderNumber = this.preSelectedProviderNumber;
+        },
-            if (
+        toTitleCase(str) {
-                (!this.selectedProviderNumber ||
+            return str.replace(/\w\S*/g, function (txt) {
-                    !this.shopProviders.some(
+                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-                        (p) => p.providerNumber == this.selectedProviderNumber
+            });
-                    )) &&
+        },
-                this.shopProviders.length > 0
+        updateShopListWithNextShops() {
-            ) {
+            //gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED; --This needs to actually fire on initial display, can never happen here
-                this.selectedProviderNumber = this.shopProviders[0].providerNumber;
+            this.numberOfShopsToDisplay += 3;
+            this.pushShopsDisplayedGAEvent(this.answers);
+        },
+        pushShopsDisplayedGAEvent(nextShopListAnswers) {
+            var shops = nextShopListAnswers.map((shop) => {
+                if (shop.value.length > 5 && shop.value.startsWith("00")) {
+                    return shop.value.substring(1);
+                } else {
+                    return shop.value;
+                }
+            });
+
+            var joinedShops = shops.join(",");
+            if (!joinedShops) {
+                joinedShops = "no-shops";
             }
+
+            this.pushEventToGA(
+                this.GaCategories.SERVICE_LOCATION,
+                this.GaActions.MORE_LOCATIONS_CLICKED,
+                joinedShops,
+                true
+            );
         },
         closeModal() {
             this.modal.closeModal();
         },
-        onModalClosed() {
-            this.internalModel = this.copyModel(this.modelValue);
-            this.resetsOnZipInput();
-        },
-        resetsOnZipInput() {
-            this.resetAlerts();
-        },
         async onSearchZip(event) {
-            if (event) {
+            event.preventDefault();
-                event.preventDefault();
+            if (!this.localZipCode) {
-                event.stopPropagation();
+                this.zipCodeData = {
+                    isValid: false,
+                };
+                return;
             }
-            this.resetsOnZipInput();
+            this.isLoading = true;
-            this.displayNoShopsAlert = false;
+            this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
-            const zip = this.internalModel.zipCode;
+            // Add zipCode to zipCodeData as it does not come back from endpoint
-            const zipCodeData = await this.getZipCodeData(
+            this.zipCodeData.zipCode = this.localZipCode;
-                this.internalModel.zipCode,
+            if (this.zipCodeData.isValid) {
-                "service-location"
-            );
-            if (!zipCodeData.isValid) {
-                this.displayInvalidZipAlert = true;
-                //this.selectedProviderNumber = null;
-                this.focusOnZipInput();
-                this.resetModalButtonStyle();
-            } else {
                 if (this.isVehicleHeavyTruck) {
                     // check the location endpoint to verify this zip can service a heavy truck
                     const closestShops = await getClosestApplicableShops(
-                        this.internalModel.zipCode,
+                        this.localZipCode,
                         this.carId,
                         "service-location"
                     );
 
                     if (!closestShops || closestShops.providers?.length === 0) {
-                        this.displayNoServiceAlert = true;
+                        // We need an alert for heavy trucks
-                        this.focusOnZipInput();
-                        this.resetModalButtonStyle();
                         return null;
                     }
                 } else {
-                    getShopProviderData(zip).then(async (result) => {
+                    getShopProviderData(this.localZipCode).then(async (result) => {
-                        if (this.displayNoShopsAlert === true) {
-                            this.displayNoShopsAlert = false;
-                        }
                         this.localShopProviderData = result.data;
-                        this.updateShopsForZip(this.internalModel.zipCode);
+                        this.numberOfShopsToDisplay = 3;
-                        if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+                        this.updateShopsForZip();
-                            this.selectedProvider = new Provider(
+                        this.isLoading = false;
-                                this.shopProviderData.mobileProviderNumber
-                            );
-                        } else {
-                            this.selectedProvider = new Provider();
-                        }
                     });
                 }
+            } else {
+                this.isLoading = false;
             }
         },
-        async updateShopsForZip(zipCode) {
+        updateShopsForZip() {
-            if (!this.appointmentType) {
+            if (!this.shopProviders.length) {
-                this.answers = [];
-                this.isLoadingShops = false;
                 return;
             }
-            this.lastSearchedZip = zipCode;
-            if (!zipCode) {
-                this.isLoadingShops = false;
-                this.answers = [];
-                return;
-            }
-            this.isLoadingShops = true;
-            if (!zipCode || !this.shopProviders.length) {
-                this.answers = [];
-                this.displayNoShopsAlert = true;
-                this.displaySeeMoreLocationsLink = false;
-                this.isLoadingShops = false;
-                return;
-            }
-
-            const selectedIndex = this.shopProviders.findIndex(
-                (provider) => provider.providerNumber == this.selectedProviderNumber
-            );
-
-            // If not found, only show the first 3 shops
-            if (selectedIndex === -1) {
-                this.shopIndex = 3;
-            }
-
-            const sortedShops = this.getShopsByZip(zipCode, this.shopProviders, this.shopIndex);
-
-            const toTitleCase = (str) => {
-                return str.replace(/\w\S*/g, function (txt) {
-                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-                });
-            };
-
-            const mappedData = sortedShops.map((shopProvider) => {
-                const streetAddress = toTitleCase(shopProvider.address.streetAddress);
-                const city = toTitleCase(shopProvider.address.city);
-                const state = shopProvider.address.state;
-                const zipCode = shopProvider.address.zipCode;
-                const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
-
-                const startDate = new Date();
-                const endDate = new Date();
-                endDate.setDate(startDate.getDate() + 6);
-
-                const formattedStartDate = startDate.toISOString().split("T")[0];
-                const formattedEndDate = endDate.toISOString().split("T")[0];
-
-                return {
-                    buttonLabel: city,
-                    buttonLabelSubCopy: `${distanceInMiles} mi`,
-                    buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
-                    additionalButtonData: {
-                        availabilityRatingCallback: getAvailabilityRating,
-                        startDate: formattedStartDate,
-                        endDate: formattedEndDate,
-                        shopAppointmentType: this.appointmentType,
-                    },
-                    value: shopProvider.providerNumber,
-                };
-            });
-            this.answers = mappedData;
             if (
-                this.selectedProviderNumber &&
+                !this.answers.some(
-                !this.answers.some((a) => String(a.value) === String(this.selectedProviderNumber))
+                    (a) => String(a.value) === String(this.localSelectedProviderNumber)
+                )
             ) {
-                this.selectedProviderNumber = null;
+                this.localSelectedProviderNumber = null;
             }
-            this.shopIndex = mappedData.length;
+            // I think we should call our new pushGA Event here with new mapped data
-            this.displaySeeMoreLocationsLink = this.shopIndex < this.shopProviders.length;
-            if (mappedData.length > 0) {
-                this.lastSuccessfulZip = zipCode;
-            }
-            this.isLoadingShops = false;
-            this.displayNoShopsAlert = this.answers.length === 0;
-        },
-        resetModalButtonStyle() {
-            this.modal.resetButtonStyle();
-        },
-        onInputIdAssigned(inputId) {
-            this.serviceZipCodeTextInputId = inputId;
-        },
-        focusOnZipInput() {
-            const input = document.getElementById(this.serviceZipCodeTextInputId);
-            input?.focus();
-        },
-        resetAlerts() {
-            this.displayInvalidZipAlert = false;
-            this.displayNoServiceAlert = false;
-            this.displayNoShopsAlert = false;
         },
         async setZipCodeAndShop() {
-            if (
+            const shopQuestionPopUpData = {
-                this.displayInvalidZipAlert ||
+                zipCodeData: this.zipCodeData,
-                this.displayNoShopsAlert ||
+                shopProviderData: this.localShopProviderData,
-                !this.selectedProviderNumber
+                selectedProviderNumber: this.localSelectedProviderNumber,
-            ) {
+            };
-                return;
+            this.$emit("shop-selected", shopQuestionPopUpData);
-            }
-            const zipToEmit = this.lastSearchedZip;
-
-            const selectedProvider = this.shopProviders.find(
-                (provider) => provider.providerNumber == this.selectedProviderNumber
-            );
-            this.resetAlerts();
-
-            const zipCodeData = await this.getZipCodeData(zipToEmit, "service-location");
-
-            if (!zipCodeData.isValid) {
-                this.displayInvalidZipAlert = true;
-                this.focusOnZipInput();
-                this.resetModalButtonStyle();
-            } else {
-                if (this.isVehicleHeavyTruck) {
-                    // check the location endpoint to verify this zip can service a heavy truck
-                    const closestShops = await getClosestApplicableShops(
-                        selectedProvider.address.zipCode,
-                        this.carId,
-                        "service-location"
-                    );
-
-                    if (!closestShops || closestShops.providers?.length === 0) {
-                        this.displayNoServiceAlert = true;
-                        this.focusOnZipInput();
-                        this.resetModalButtonStyle();
-                        return null;
-                    }
-                }
-
-                selectedProvider.address.zipCodeCtu = zipCodeData.zipCodeCtu;
-
-                // retrieve mobile fee part
-                const serviceZipCode = selectedProvider.address.zipCode;
-                const mobileFeePart = await getPricedMobileFeePart(
-                    serviceZipCode,
-                    "service-location"
-                );
-
-                // retrieve recycle fee part
-                const recycleFeePart = await getPricedRecycleFeePart(
-                    serviceZipCode,
-                    "service-location"
-                );
 
+            if (this.zipCodeData) {
                 // retrieve serviceability details
                 const serviceabilityDetails = await getServiceabilityDetails(
-                    serviceZipCode,
+                    this.zipCodeData.zipCode,
                     null,
-                    "service-location"
+                    this.pageName
                 );
 
-                const billToAccountNumber = await getBillToAccountNumber(
-                    selectedProvider.address.zipCodeCtu
-                );
-
-                // update content related to service zip code
-                this.$emit("updated-mobile-fee-part", mobileFeePart);
-                this.$emit("updated-recycle-fee-part", recycleFeePart);
                 this.$emit("updated-serviceability", serviceabilityDetails.data);
-                this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
-                this.$emit("updated-bill-to-account-number", billToAccountNumber);
-                this.$emit("updated-zipcode-ctu", selectedProvider.address.zipCodeCtu);
-
-                this.$emit("update:modelValue", this.selectedValue);
-                this.$emit("update-shop-provider-data", this.localShopProviderData);
-                this.internalModel.state = zipCodeData.state;
-                this.$emit("shop-selected", {
-                    providerNumber: selectedProvider?.providerNumber,
-                    address: selectedProvider?.address,
-                    searchedZip: zipToEmit,
-                    searchedState: this.internalModel.state,
-                });
-
-                this.closeModal();
             }
-        },
+
-        getShopsByZip(zipCode, shops, numberToGet = 3) {
+            this.closeModal();
-            return shops
-                .filter(
-                    (shop) => shop.address && shop.address.zipCode && shop.address.zipCode !== ""
-                )
-                .sort((a, b) => a.distanceInMiles - b.distanceInMiles)
-                .slice(0, numberToGet);
-        },
-    },
-    watch: {
-        shopProviderData: {
-            immediate: true,
-            handler(newVal) {
-                this.localShopProviderData = newVal;
-                this.hasLoadedShopData = true;
-            },
         },
     },
     components: {
@@ -623,6 +334,7 @@ export default {
         serviceZipQuestion,
         buttonQuestion,
         alert,
+        loader,
     },
 };
 </script>
@@ -750,4 +462,10 @@ export default {
     display: block;
     width: 100%;
 }
+.loader-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+}
 </style>

src/layouts/service-location/shop-question/shop-question.vue

@@ -16,7 +16,7 @@
                 :questionText="questionText"
                 :answers="answers"
                 groupName="chooseShop"
-                textPosition="text-center"
+                textPosition="text-start"
                 v-model="selectedProviderNumber"
                 isRequired
                 validationRules="option-required" />
@@ -49,8 +49,6 @@ import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
 import { nextTick } from "vue";
 
-import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
-
 import { Provider } from "@/layouts/service-location/classes/provider";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
@@ -109,17 +107,7 @@ export default {
             return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
         },
         additionalButtonData() {
-            const startDate = new Date();
-            const endDate = new Date();
-            endDate.setDate(startDate.getDate() + 6);
-
-            const formattedStartDate = startDate.toISOString().split("T")[0];
-            const formattedEndDate = endDate.toISOString().split("T")[0];
-
             return {
-                availabilityRatingCallback: getAvailabilityRating,
-                startDate: formattedStartDate,
-                endDate: formattedEndDate,
                 shopAppointmentType: this.selectedAppointmentType,
             };
         },

src/layouts/service-zip/service-zip.vue

@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles">
-        <div class="container">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <textboxQuestion
@@ -355,6 +359,9 @@ export default {
 </script>
 
 <style lang="scss">
+.vinlookupquestion p {
+    margin-bottom: 0;
+}
 .vinlookupquestion strong {
     font-weight: 500;
     color: $black;

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles vehicle-damage">
-        <div class="container">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mb-7" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <alert
                         ref="vehicleChangeAlert"
                         v-if="shouldDisplayVehicleChangeAlert"
@@ -14,7 +18,7 @@
                         :isDismissible="false" />
                 </div>
             </div>
-            <div class="row">
+            <div class="row justify-content-center">
                 <div class="col-md-6">
                     <damageLocationQuestion
                         ref="damageLocation"
@@ -23,8 +27,8 @@
                         groupName="DamageLocationQuestion" />
                 </div>
             </div>
-            <div class="row">
+            <div class="row justify-content-center">
-                <div class="col-md-6">
+                <div class="col-md-6 col-xl-4">
                     <windshieldOptions
                         class="windshield-options"
                         ref="windshieldOptions"
@@ -57,8 +61,8 @@
                         validationRules="replace-options-required" />
                 </div>
             </div>
-            <div class="row">
+            <div class="row justify-content-center">
-                <div class="col-md-6">
+                <div class="col-md-6 col-xl-4">
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!isContinueEnabled"

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -2,18 +2,30 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+            <div class="container-fluid page-container-grouped-styles">
-            <div class="container page-container-grouped-styles">
+                <div class="row justify-content-center">
-                <div class="row">
+                    <div class="col-md-6">
-                    <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                        <funnelSubHeader
-                            ref="funnelSubHeader"
-                            cmsWidgetName="FunnelSubHeaderWidget"
-                            class="mb-7" />
                     </div>
                 </div>
-                <div class="row">
+                <div class="row justify-content-center">
-                    <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <div class="col-md-6 col-xl-4 mt-4">
+                        <funnelSubHeader
+                            ref="funnelSubHeader"
+                            cmsWidgetName="FunnelSubHeaderWidget" />
+                    </div>
+                </div>
+                <div class="row justify-content-center">
+                    <div class="col-md-6 col-xl-4 my-5">
+                        <alert
+                            class="rounded border-0 shadow-sm"
+                            alertClass="alert-warning"
+                            cmsWidgetName="AlertWidget"
+                            :isDismissible="false" />
+                    </div>
+                </div>
+                <div class="row justify-content-center">
+                    <div class="col-md-6 col-xl-4">
                         <div v-for="(item, i) in PartsOrQuestions" :key="i">
                             <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
                             <hr v-if="i > 0" />
@@ -51,6 +63,7 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
+import alert from "@/ux-components/alert/alert";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 // Supporting Files
@@ -231,6 +244,7 @@ export default {
         funnelHeader,
         funnelSubHeader,
         navbar,
+        alert,
         loadingModal,
         saveProgressModalQuestion,
     },

src/layouts/vehicle/vehicle.vue

@@ -1,9 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid">
-        <div class="container">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"

src/layouts/vin-lookup/vin-information/vin-information.vue

@@ -60,12 +60,12 @@ export default {
         &:after {
             content: "";
             transition: all 0.5s ease;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
             background-repeat: no-repeat;
             background-position: right center;
             margin-left: 0.5rem;
-            width: 24px;
+            width: 16px;
-            height: 24px;
+            height: 9px;
             display: inline-flex;
         }
         &.active:after {

src/layouts/vin-lookup/vin-lookup.vue

@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container-fluid page-container-grouped-styles">
-        <div class="container page-container-grouped-styles">
+            <div class="row justify-content-center">
-            <div class="row">
+                <div class="col-md-6">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <textboxQuestion
                         class="mb-2 mt-5"

src/styles/common-error-styles.scss

@@ -202,21 +202,21 @@ html {
 
     .form-test-invalid {
         &.btn.btn-primary {
-            color: $white;
+            color: $gray-600;
-            background: $red;
+            background: $gray-200;
             cursor: pointer;
             pointer-events: all;
             font-weight: $font-weight-normal;
         }
         &.btn.btn-primary:hover,
         &.btn.btn-primary:focus {
-            background: $red;
+            background: $gray-200;
             box-shadow: none;
         }
         &.btn.btn-primary:focus-visible {
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $gray-700;
         }
     }
 }

src/styles/common-styles.scss

@@ -8,10 +8,13 @@ body {
         display: flex;
         flex-direction: column;
         min-height: 100dvh;
-    }
+        form {
-    .container {
+            > .container-fluid {
-        @include media-breakpoint-up(xl) {
+                margin-bottom: -1rem;
-            max-width: 1020px;
+                @media screen and (min-width: 1090px) {
+                    margin-bottom: -5rem;
+                }
+            }
         }
     }
     .container-fluid {
@@ -87,7 +90,7 @@ body {
     }
 }
 .modal-open:not(.prevent-modal-scroll) {
-    .container {
+    .container-fluid {
         &.page-container-grouped-styles {
             overflow: hidden;
             height: auto;

src/styles/shared-input-button-styles.scss

@@ -1,22 +1,3 @@
-.base-input-button {
-    &.rounded-pill {
-        &:not(.has-error):hover {
-            cursor: pointer;
-
-            &.list-button,
-            &.list-button-horizontal,
-            &.list-card {
-                &:not(.selected) {
-                    position: relative;
-                    z-index: 5;
-                    @include box-shadow-hover($blue-300);
-                    border-radius: 50rem;
-                }
-            }
-        }
-    }
-}
-
 .base-input-button {
     &:not(.has-error):hover {
         cursor: pointer;

src/styles/ux-variables.scss

@@ -204,7 +204,6 @@ $enable-important-utilities: false;
 $grid-breakpoints: (
     xs: 0,
     md: 768px,
-    lg: 992px,
     xl: 1200px,
     xxl: 1440px,
 );

src/ux-components/button-main/button-main.vue

@@ -1,14 +1,14 @@
 <template>
     <button
         :aria-disabled="isDisabled"
-        class="btn rounded-pill d-flex align-items-center justify-content-center py-3 px-6 delay"
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
         :class="[
             isPrimary ? 'btn-primary' : 'btn-secondary',
             isFloat ? 'float-end' : '',
             isLoaderDisplayed && !suppressLoader ? 'has-loader' : '',
         ]"
         @click="clicked">
-        <span class="m-0" v-html="buttonText"></span>
+        <span class="m-0">{{ this.buttonText }}</span>
         <loader
             class="ms-2"
             v-if="isLoaderDisplayed && !suppressLoader"
@@ -63,23 +63,21 @@ export default {
 
 <style lang="scss">
 .btn {
-    &:first-child:active {
-        background-color: $red;
-    }
     &.btn-primary {
         position: relative;
-        background: $red;
+        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         border: none;
+        border-radius: $border-radius-lg;
         color: $white;
         justify-content: center;
         font-weight: 500;
         @media (hover: hover) {
-            background: $red;
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         }
         &:focus {
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -87,26 +85,27 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             color: $white;
-            background: $red;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
         }
         &:disabled {
             background: $gray-200 !important;
-            background: $red !important;
+            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
-            color: $white !important;
+            color: $gray-600 !important;
             font-weight: 400;
             height: 48px;
             border: none;
+            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            background: $red;
+            background: $blue-700;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             pointer-events: auto;
         }
         &.delay {
@@ -117,13 +116,15 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
+        border: 1px solid $blue;
-        color: $red;
+        border-radius: $border-radius-lg;
+        color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
         &:hover {
             color: $white;
+            @include blue-gradient;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -131,20 +132,23 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             color: $white;
+            @include blue-gradient;
         }
         &:disabled {
             background: transparent;
-            color: $red !important;
+            color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $red;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
+            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {
@@ -156,6 +160,7 @@ export default {
         position: relative;
         background: $green-100;
         border: 1px solid $green-400;
+        border-radius: $border-radius-lg;
         color: $black;
         font-weight: 500;
         transition: all 150ms linear;
@@ -180,11 +185,13 @@ export default {
             font-weight: 400;
             height: 48px;
             border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
+            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {

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

@@ -43,7 +43,6 @@ export default {
 
 <style lang="scss">
 .list-button-horizontal {
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
     input[type="radio"],
     input[type="checkbox"] {
         position: absolute;

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

@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="list-group base-input-button list-button rounded-pill d-flex flex-column w-100 mb-2"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
@@ -102,11 +102,10 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
+    border-radius: $border-radius-lg;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    border-radius: 50rem;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {

src/ux-components/list-card/list-card.vue

@@ -76,7 +76,6 @@ export default {
 }
 .list-card {
     border: 1px solid $gray-500;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     &.has-error {
         input[type="checkbox"],

src/ux-components/text-link/text-link.vue

@@ -64,9 +64,10 @@ export default {
 <style lang="scss">
 a {
     color: $blue;
-    text-decoration: none;
+    text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
     line-height: 2;
     padding: 0 0 4px 0;
+    font-weight: 500;
     max-width: fit-content;
     &:hover {
         color: $blue-700;
@@ -80,13 +81,10 @@ a {
     &.navigation-link,
     &.new-window-link {
         font-size: 0.875rem;
-        color: $blue;
+        color: $black;
         line-height: 26px;
         white-space: nowrap;
         align-items: center;
-        font-family: UrbanistSemibold;
-        font-weight: 600;
-        text-decoration: none;
         @include media-breakpoint-up(md) {
             font-size: 1rem;
         }